jQueryUI Selectableの基本
2009 年 9 月 15 日
コメントはありません
jQueryUIはリッチなUIを簡単に使えるライブラリです。
その名の通り、jQueryの上で動くので、jQueryを使ったことがある、
今使っているという方は簡単に扱えるはずです。
Selectableを初めて使ったのですが、つまづいたところ、
基本的な使い方など書き留めておきたいと思います。
(jQuery UI Selectbleのサンプルを元にしています)
リッチなUIにならない、表示が変、どうやらデザインが適用されてない。。。
jQueryUIをダウンロード・解凍するとjsとcssというフォルダがあると思います。
jsの中にjQueryとjQueryUIが入っているので、これらを読み込めば使えるわけです。
これだけでも、プログラムとしては動いてしまうのですが、肝心のデザイン関連(CSSやimage)は
cssフォルダに含まれています！自分だけかも知れませんがこれを忘れがち笑
/css/テーマ名/ の中にjQueryUIのCSSと 画像フォルダがありますので、
javascriptと同様適切なパス上において、linkタグで読み込んでおきましょう。
現在選択されているアイテムを取得する
サンプルのコード(View Sourceで表示されます)にもある通り、
JavaScript:
-
$(".ui-selected").each(function(){
-
//ここに処理
-
alert($(this).text());//thisがHTMLエレメントになってる
-
});
この形で走査できます。イベントで受け取る場合は、
JavaScript:
-
$("#selectable").selectable({
-
selected: function(event,ui){
-
alert($(ui.selected).text());//ui.selectedがHTMLエレメント
-
});
というような感じです。
イベントの場合は複数選択された場合、各々のアイテムについてそれぞれイベントが発生します。
また、もちろんunselectedの場合はui.unselectedで同様に要素にアクセスできます。
