4

プログレスバー（または操作が有効にならない親指のないスライダー）を探しています。

iOS/Android/Windows モバイル向けの jQuery モバイルを使用した HTML5 プロジェクトで使用したいと考えています。モバイル ブラウザーでは、進行状況は現在サポートされていません。

誰かがコードを持っているか、プラグインについて知っていますか (その要素のためだけに jQuery UI を統合したくありません)

4

3 に答える 3

13

はじめに

主な理由は、スタイルを同じに保つことができるためです。

例

作業例: http://jsfiddle.net/Gajotres/mFqUd/

例には動作するデモがありますので、見てください。これが必要な場合は、それからプラグインを作成します。

コード

このコードは、put とスライダー ボタンが表示されないスライダーを作成します。

$('<input>').appendTo('[ data-role="content"]').attr({'name':'slider','id':'slider','data-highlight':'true','min':'0','max':'100','value':'50','type':'range'}).slider({
    create: function( event, ui ) {
        $(this).parent().find('input').hide();
        $(this).parent().find('input').css('margin-left','-9999px'); // Fix for some FF versions
        $(this).parent().find('.ui-slider-track').css('margin','0 15px 0 15px');
        $(this).parent().find('.ui-slider-handle').hide();
    }
}).slider("refresh");

プログレスバーの親コンテナは一部設定する必要があります.appendTo()....。

次に、この関数を使用して進行状況バーの値を変更し、視覚的なスタイルを変更します。

var progressBar = {
    setValue:function(id, value) {
        $(id).val(value);
        $(id).slider("refresh");
    }
}

idプログレスバーの ID であり、value必要な値です。スライダーは 0 から 100 の間で動作するように設定されているため、整数値はパーセント値としてカウントされます。

于 2013-05-24T10:20:16.537 に答える
1

私はこれらを一度使用しました... css-tricksでのみ

これが必要なものかどうかを確認してください

于 2013-05-24T07:34:38.350 に答える