- 2008年9月20日 10:00
- しらべる
jQueryUIのSliderをフォームのSelect要素のデータを元に生成することで、スライダーの値をコントロールしやすくする方法と、そのコンポーネントセットを提供しているサイトがあったのでメモ。
Using Progressive Enhancement to Convert a Select Box Into an Accessible jQuery UI Slider
selectを隠して、代わりに拡張されたjQueryUIのスライダーを生成、表示し、値のやりとりには元のselectをgetter/setterのインターフェースとすることで、使いやすくしているようです。
ちなみにこれを作っている会社はjQuery UI のThemeRollerを作った会社だそうです。 手っ取り早い使い方
jQueryとjQueryUIを入れて
とても便利です。
ただ、ビジュアル要素のカスタマイズやレイアウトとの兼ね合いが多少面倒なので、もうちょっと改善してほしいかも。
ちなみにこれを作っている会社はjQuery UI のThemeRollerを作った会社だそうです。 手っ取り早い使い方
jQueryとjQueryUIを入れて
<script src="jquery-1.2.6.min.js" type="text/javascript"></script> <script src="jquery-ui-1.6rc1.packed.js" type="text/javascript"></script>
ここでダウンロードしたSlider拡張のJSとCSSを入れ
<script src="accessibleUISlider.jQuery.js" type="text/javascript"></script> <link type="text/css" href="jquery-ui-slider-additions.css" media="screen" rel="Stylesheet" />
さらにThemeRollerのテーマファイルを入れる
<link type="text/css" href="jquery-ui-themeroller.css" media="screen" rel="Stylesheet" />
select要素を定義して
<select class="ui-accessible-hidden" name="filterPriceFrom" id="filterPriceFrom"> <option value="0">￥0</option> <option value="1000">￥1,000</option> ...... <option value="max" selected="selected"s>Max</option> </select> <select class="ui-accessible-hidden" name="filterPriceTo" id="filterPriceTo"> <option value="0">￥0</option> <option value="1000">￥1,000</option> ...... <option value="max" selected="selected"s>Max</option> </select>
select要素のidを指定してスライダーを初期化
<script type="text/javascript">
$(function(){
$('select#filterPriceFrom, select#filterPriceTo').accessibleUISlider({width: 170,labels: 2}).change();
});
</script>
以下はちょっと手を加えたサンプルです。
とても便利です。
ただ、ビジュアル要素のカスタマイズやレイアウトとの兼ね合いが多少面倒なので、もうちょっと改善してほしいかも。
