4

スライダーを動的に挿入しています。問題は、それらを動的に挿入すると、jquerymobile のテーマがないことです。私が使用するコードは次のとおりです。

for (var i = array_colors_available.length - 1; i >= 0; i--) {
        $('#insert_colors_slider').append('<div data-role="fieldcontain" ><fieldset data-role="controlgroup"> <label for="slider-8">'+array_colors_available[i]+' : '+'</label><input id=slider-'+i+' type="range" name='+array_colors_available[i]+' value="0" min="0" max="25" data-highlight="true" data-theme=c data-track-theme="f"></fieldset></div>');
        if(array_slider_info_value != null) $('#slider-'+i).val(array_slider_info_value[i+1].value);
    };

ここに画像の説明を入力

JQueryMobile のメソッドを使用すると、画面に 2 つのスライダーが表示されます。

for (var i = array_colors_available.length - 1; i >= 0; i--) {
        $('#insert_colors_slider').append('<div data-role="fieldcontain" ><fieldset data-role="controlgroup"> <label for="slider-8">'+array_colors_available[i]+' : '+'</label><input id=slider-'+i+' type="range" name='+array_colors_available[i]+' value="0" min="0" max="25" data-highlight="true" data-theme=c data-track-theme="f"></fieldset></div>');
        $('#slider-'+i).slider();
        if(array_slider_info_value != null) $('#slider-'+i).val(array_slider_info_value[i+1].value);
    };

ここに画像の説明を入力

私は何を間違っていますか?メソッドを使用しないときはテーマがなく、使用すると 1 つではなく 2 つのスライダーが表示されます...ありがとう!

4

1 に答える 1

6

これは、jQuery Mobile のバグの 1 つにすぎません。また、コードにエラーがあります。ラベルは正しいスライダーを指している必要がありますが、あなたの例ではそうではありません。

動的スライダーは 2 つの方法で作成できますが、いずれにもslider()メソッドは含まれていません。

例 1

pagebeforecreateまたはpagecreateイベント中にそれを行います。

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

$(document).on('pagebeforeshow', '#index', function(){    
    // Add a new input element
    $('[data-role="content"]').append('<input type="range" name="slider-2" id="slider-2" value="25" min="0" max="100"  />');
});

例 2

pagebeforeshowまたはpageshowイベント中に実行し、trigger('create')スライダーのスタイルに使用します。

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

$(document).on('pagebeforeshow', '#index', function(){    
    // Add a new input element
    $('[data-role="content"]').append('<div data-role="fieldcontain"></div>');
    $('[data-role="fieldcontain"]').append('<fieldset data-role="controlgroup"></fieldset>');
    $('[data-role="controlgroup"]').append('<label for="slider-2">Slider 2</label>');
    $('[data-role="controlgroup"]').append('<input type="range" name="slider-2" id="slider-2" value="25" min="0" max="100"  />');
    // Enhance new input element, unfortunately slider() function is not goinf to work correctly
    //$('[type="range"]').slider();
    $('#index').trigger('create');
});

この例ではslider()、入力ボックスを除くすべてのものだけを使用しようとすると、スタイルになります。

これについての詳細とその他の関連事項は、私の他のARTICLEで見つけることができます。または、ここで見つけることができます。

于 2013-03-29T17:45:33.423 に答える