1

jQuery mobileのスライダーの入力フィールドを、コントロールの左側ではなく右側に移動しようとしています（デフォルト）。また、スライダーコントロールの両側に増加ボタンと減少ボタンを含めたいと思います。これらはすべてインラインで表示される必要があります。つまり、ディスプレイの幅にまたがる1つのdivに表示されます。

入力フィールドを切り離して追加するには、次のようにします。

var inputField = $('input#slider-1').detach();
inputField.appendTo('#more');

しかし、スライダーコントロールは、使用できなくなるまで押しつぶされます。ここまたはここの完全なコード

固定ピクセル値を使用せずにスライダーの幅をオーバーライドするにはどうすればよいですか？

4

2 に答える 2

2

入力を右側に配置する際の主なポイントは、スライダーを適切に選択することです。

$('#control div.ui-slider').insertBefore('#slider-1');

スライダーの幅を上書きするには、パーセンテージ値を使用できます

#less { float:left; }
#control { float:left; width: 50%; }
#more { float:left; }

変更されたJSFiddle

#inner-divさらに、とを削除できます#test。これらがなくても機能します。

于 2013-01-22T17:02:18.047 に答える
1

このアップデートを確認してくださいデモhttp://jsfiddle.net/yeyene/Bq2dn/99/

増加/減少ボタンに従ってスライダーハンドラーを移動するスクリプトを追加しました。

$('#increase').live('tap',function(e){
    var slider = $("#slider-1");
    value = parseInt(slider.val(),10);            
    slider.val(value+1);
    slider.slider('refresh');
    slider.attr('style', 'left:'+(value+1)+'%;');
});

$('#decrease').live('tap',function(e){
    var slider = $("#slider-1");
    value = parseInt(slider.val(),10);
    slider.val(value-1);
    slider.slider('refresh');         
    slider.attr('style', 'left:'+(value-1)+'%;');
});

$('#control div.ui-slider').insertBefore('#slider-1');
于 2013-06-20T06:55:33.217 に答える