【ハウツー】jQueryを使ってるならコレ! ウィジェットライブラリの決定版 - jQuery UI (4) UI/Sliderの使い方 - 各種オプション | エンタープライズ

お知らせ: 「マイポ」からのポイント交換を再開いたしました。(5月9日); メール会員100万人突破記念「春の読者プレゼント」結果発表は5月30日です。; マイナビベアがミクシィで部屋を作ったよ。ぜひ見てね！; 一緒に「マイナビ」で働きませんか。採用情報はこちらから。; 旅行券3万円、時計、ビジネスバッグなどが当たる！さらに応募者全員に50マイポもプレゼント

その先を伝える総合情報サイト
マイナビニュース

エンタープライズ

急上昇ワード

[

]

【ハウツー】

jQueryを使ってるならコレ! ウィジェットライブラリの決定版 - jQuery UI

4 UI/Sliderの使い方 - 各種オプション

富田宏昭　 [2008/07/03]

印刷

先頭
前へ
- 1
- 2
- 3
- 4
- ／4

先のサンプルにおいて、ソース中で利用したAPIおよびオプションなどは次のとおり。

jQuery API/CSS
slider.css('width', '300px')	CSSのプロパティ/値の対をセットする。この場合{width: 300px}に相当
jQuery UI/Slider options
min	スライダの最小値を定義。設定しない場合の初期値は0
max	スライダの最大値を定義。設定しない場合の初期値は100
startValue	スライダハンドルの初期値を定義
slide	ハンドルを動かしている間に実行する関数を定義

このほかにもUI/Sliderには多くのプラグインメソッドが用意されている。jQuery Documentationではドキュメントやサンプルが豊富に用意されているため、開発の際はぜひ参考にしたい。

おわりに - jQuery UI + ThemeRollerでさくっと導入してみよう

今回は5つあるjQuery UIウィジェットのうちSliderウィジェットを紹介したが、jQuery UIにはこのほかにもDialogやTabsといった、すぐにでも既存のWebアプリケーションに組み込めるような実用的なウィジェットが用意されており、デベロッパの工夫しだいでさまざまなユーザインタフェースを簡単に構築することが可能だ。また6月9日(米国時間)に公開されたThemeRollerを利用すれば、簡単な操作で各種ウィジェットテーマの変更が可能となる。これらをうまく活用し、効率のよい開発を実現したい。