JQueryMobileにおけるSliderに関する一点の研究
5215 ワード
スライダー
Inputの新しいHTML 5プロパティをtype="range"に設定し、ページにスライドバーコンポーネントを追加し、value値(現在の値)、minおよびmaxプロパティの値を指定してスライドバーを構成できます.Jquery Mobileは、これらのプロパティを解析してスライドバーを構成します.スライドバーをスライドすると、inputは数値を更新し、逆にフォームに数値を簡単にコミットできます.注意labelのforプロパティをinputのid値に設定し、意味的に関連付けることができ、divコンテナで包んでdata-role=「fieldcontain」プロパティを設定する
HTMLコード:
minとmaxのプロパティの値を設定すると、スライドバーの上下に取れる値を設定できますが、value値はスライドバーの初期位置を指定し、inputボックス内の値スライドバーと同じようにキーボードに応答します.右矢印、上矢印、Page Upキーを使用して現在の値を増やし、左矢印、下矢印、Page Downキーを使用して現在の値を減らします.ホームキーとEndキーは、スライドバーの最小値と最大値にそれぞれ調整できます.
スライドバーRefreshing a sliderの更新
jsでスライドバーを手動で制御したい場合は、refreshメソッドを呼び出してスライドバーのスタイルをリフレッシュする必要があります.
実装コードは次のとおりです.
firefoxまたはchromeでhtmlページコードを表示します.
修飾後のコードは次のようになります.
次のことがわかります.
スライダが移動するとき、スライダバーはaラベルで実現され、その入力ボックスはinputタイプnumberラベルです.
jquerymobileのスライダを実現する方法について、そのinput入力ボックスを使用しないでください.以下の方法があります.
第1の単純で直接非表示のslider実装.
以上のように分析して直接使用する:$("#kk").hide();
2つ目は、aラベルに関連するスタイルインプリメンテーションを追加することです.
方法1:
htmlは次のとおりです.
方法2:htmlは以下の通りです.
Inputの新しいHTML 5プロパティをtype="range"に設定し、ページにスライドバーコンポーネントを追加し、value値(現在の値)、minおよびmaxプロパティの値を指定してスライドバーを構成できます.Jquery Mobileは、これらのプロパティを解析してスライドバーを構成します.スライドバーをスライドすると、inputは数値を更新し、逆にフォームに数値を簡単にコミットできます.注意labelのforプロパティをinputのid値に設定し、意味的に関連付けることができ、divコンテナで包んでdata-role=「fieldcontain」プロパティを設定する
HTMLコード:
<div data-role="fieldcontain">
<label for="slider">Input slider:</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</div>
minとmaxのプロパティの値を設定すると、スライドバーの上下に取れる値を設定できますが、value値はスライドバーの初期位置を指定し、inputボックス内の値スライドバーと同じようにキーボードに応答します.右矢印、上矢印、Page Upキーを使用して現在の値を増やし、左矢印、下矢印、Page Downキーを使用して現在の値を減らします.ホームキーとEndキーは、スライドバーの最小値と最大値にそれぞれ調整できます.
スライドバーRefreshing a sliderの更新
jsでスライドバーを手動で制御したい場合は、refreshメソッドを呼び出してスライドバーのスタイルをリフレッシュする必要があります.
$("input[type=range]").val(60).slider("refresh");
実装コードは次のとおりです.
<div data-role="fieldcontain"> <label for="slider">Input slider:</label> <input type="range" name="slider" id="slider" value="0" min="0" max="100" /></div>
firefoxまたはchromeでhtmlページコードを表示します.
修飾後のコードは次のようになります.
<div class="ui-field-contain ui-body ui-br" data-role="fieldcontain">
<label for="slider">Slider3:</label>
<input id="kk" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset ui-slider-input" type="number" data-type="range" max="100" min="0" value="0" name="slider">
<div class="ui-slider ui-btn-down-c ui-btn-corner-all" role="application">
<a class="ui-slider-handle ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" href="#" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="34" aria-valuetext="34" title="34" aria-labelledby="kk-label" style="left: 34%;">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text"></span>
</span>
</a>
</div>
</div>
次のことがわかります.
スライダが移動するとき、スライダバーはaラベルで実現され、その入力ボックスはinputタイプnumberラベルです.
jquerymobileのスライダを実現する方法について、そのinput入力ボックスを使用しないでください.以下の方法があります.
第1の単純で直接非表示のslider実装.
以上のように分析して直接使用する:$("#kk").hide();
2つ目は、aラベルに関連するスタイルインプリメンテーションを追加することです.
方法1:
htmlは次のとおりです.
<!-- slider 1 -->
<div class="slider range-slide">
<b>A range slider:</b>
<span class="amount"></span>
<div id="mm" class="slide" value="30,60" max="100" min="10"></div>
</div>
スクリプトは次のとおりです. $(function(){
$(".range-slide").each(function() {
var $this = $(this);
$(".slide", $this).slider({
values: [30, 60],
min: 0,
max: 100,
range: true,
slide: function(event, ui) {
$("span.amount", $this).html("" + ui.values[0] + " - " + ui.values[1]);
}
});
});
});
方法2:htmlは以下の通りです.
<!-- -->
<div id="slider_range" > </div>
jsスクリプトは次のとおりです. $(function(){
//
$("#slider_range").slider({
range: 'min',
min: 0,
max: 40,
value: 1,
step: 10,
slide : function(event, ui){
alert("previous value:"+ $(this).val());
},
stop: function(event, ui){
alert("Current value:"+ $(this).val());
}
});
//$("#kk").hide();
});