このサイトは、主にjQueryに関連する内容を淡々と書きとめたものです。
スライダーの初期化直後にハンドルに値を設定する。
$( ".slider" ).slider( {
create:function(event, ui) {
/* ui.valueに変更された値が格納されている */
$(this).children( 'a' ).html( ui.value );
}
} );
初期化時、スライダーのハンドルはdivタグ内に中身のないaタグとして生成される。初期化直後に呼び出されるcreateイベントプロパティに関数を割り当てることで、任意の処理が行える。
スライダーの値が変わった時の処理を指定する。
$( ".slider" ).slider( {
slide:function(event, ui) {
/* ui.valueに変更された値が格納されている */
alert( ui.value );
}
} );
ドラッグ中は値は確定しておらず、ui.value の値と slider( ‘value’ ) で取得できる値とは異なる場合がある。
スライダーの値が変わった時の処理を指定する。
$( ".slider" ).slider( {
change:function(event, ui) {
/* ui.valueに変更された値が格納されている */
alert( ui.value );
}
} );
changeイベントは値が確定した後になるため、ui.value の値と slider( ‘value’ ) で取得できる値と一致する。
IDが’slider1’の要素について、その値を取得し、変数valに格納する。
var val = $( "#slider1" ).slider( 'value' );
取得できる値は、確定された値である。ドラッグ中の値を使う場合は、slideイベントハンドラの第2パラメータuiのvalueプロパティを参照する。
sliderクラスの要素にjQuery UIのSliderを適用させる。
$( ".slider" ).slider( {
min: 0, /* default: 0 */
max: 5, /* default: 100 */
step: 1, /* defaut: 1 */
value: 0, /* default: 0 */
orientation: 'horizontal', /* default: 'horizontal' or 'vertical' */
slide:function(event, ui) { },
change:function(event, ui) { }
} );
<!-- html部分 -->
<div id="slider1" class="slider"></div>
minやmaxなどのプロパティ値に変数を指定する場合は、必ずparseInt関数で整数化すること。少なくとも1.8.20/21では、minが0より大きな値を取る場合の挙動がおかしくなる。
