前回のjQuery UI sliderに続いての記事です。
簡単にプルダウンをスライダーにできるプラグインselectToUISlider の説明です。
selectタグをスライダーにする
・JavaScriptファイルのインクルード
・CSSファイルのインクルード
・セレクトタグ設置
・タグに対しての関数コール
<head>
<link type="text/css" href="jquery-ui-1.8.17.custom.css" rel="stylesheet" />
<script type='text/javascript' src='jquery-1.7.1.min.js'></script>
<script type='text/javascript' src='jquery-ui-1.8.17.custom.min.js'></script>
<script type='text/javascript' src='selectToUISlider.jQuery.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$("#selectSlider").selectToUISlider();
}
</script>
</head>
<body>
<select id='selectSlider'>
<option value="Slower">Slower</option>
<option value="Slow">Slow</option>
<option value="Med">Med</option>
<option value="Fast">Fast</option>
<option value="Faster">Faster</option>
</select>
</body>
ほんと簡単。用意したselectタグに関数をコールするだけです。
$("#selectSlider").selectToUISlider();
二つのselectタグを範囲にして一つのスライダーにする
範囲最少：
<select id='selectSliderMin'>
<option value="10">10km</option>
<option value="20">20km</option>
<option value="30">30km</option>
<option value="40">40km</option>
<option value="50">50km</option>
</select>
範囲最大：
<select id='selectSliderMax'>
<option value="10">10km</option>
<option value="20">20km</option>
<option value="30">30km</option>
<option value="40">40km</option>
<option value="50">50km</option>
</select>これは何も考えず二つの「select」に関数を実行するだけです。
$("#selectSliderMin,#selectSliderMax").selectToUISlider();jQUeryのセレクタには「,」で区切るなどすると複数指定できます。
そのふたつを選択した状態で関数をコールすると自動的に関連付けられます。
オプションを指定してみる
$("#selectSlider").selectToUISlider({
labels:4,
labelSrc:"text",
tooltip:true,
tooltipSrc:"text",
sliderOptions: {
... // jQuery UI Sliderのオプション
}
});すごい簡単です。このプラグイン用に４つ追加されています。
labels
スライダーの下に項目の説明がありますが、その表示数です。（初期値は3）
labelSrc
表示される項目の説明文の内容が「select」の"value"か"text"かを指定。（初期値は"value")
tooltip
選択時に表示するツールチップのON/OFF(初期値はtrue)
tooltipSrc
ツールチップに表示する内容が「select」の"value"か"text"かを指定。（初期値は"text")
sliderOptions
jQuery UI Sliderに使用するオプション
スライダー化した後にselectタグがいらなければ「hide()」してやればいいだけですし。
jQuery UI のスライダーでは説明不足になるのでこっちを使う事の方が多いです。