トップ 差分 一覧 ソース ヘルプ RSS ログイン

CheckList

CheckList

スクロール可能なチェックリストを提供します。これは、"Check id don't select it" によるチェックリストの実装のひとつです。

スクロール可能なCheckListは、mulitiple-select-boxよりもずっと使いやすいものです。多くのselect-boxを持つスクロール可能なdiv要素です。

スクロール可能なCheckListを作成する場合、setHeight(String)を使って、全体の高さを設定します。高さを設定する場合には、ブラウザ間の非互換問題により、並び替え可能にしないことをオススメします

CheckListは、setSortable(boolean)にてtrueをセットすると、ドラッグ&ドロップで並び替え可能となります。この場合、getSortorder()メソッドは、ユーザーによって並び替えられた順でその選択項目が選択されたかどうかを示すキーの集合を返します。この並び替え機能はscriptaculousによって提供されており、これはIE6、FireFox、そしてSafari1.2以上のみの対応となっています。このコントロールは、Windows上のIE6とFirefoxでのみテストされています。IEを使った場合、ドラッグされた要素のテキストが黒くなってあまり見栄えがよくありません。これを抑制するには、明示的にli要素の背景色を指定することです。一般的には、スタイルの指定で: .listClass li {background-color: #xxx}, とし、listClassをsetHtmlClass(String)でセットします。

requiredが指定されている場合、少なくともひとつの要素が選択されてなければならず、それをもって入力をvalidとします。これ以外のvalidationは実施されていません。

このコントロールのリスナーは、CheckListがvalidであるか否かにかかわらず、呼び出されます。

CheckListの値は、Selectコントロールと同様Optionオブジェクトによって提供されます。CheckListにOptionのリストを登録するにはaddメソッドを使います。Optionのラベルが表示され、そのvalueがgetValues()で提供され、getSortorder()はListを返します。

選択された値は、getValues()で利用できます。get/setValue()はサポートされていません。

Selectは、 /click/checklist.css スタイルを利用しています。このスタイルを拡張することにより、リストの見た目が変更可能です。スタイルクラスをセットするには、setAttribute("class","additionalClass")を使います。これは、このコントロールのデフォルトのクラスに、引数で指定したクラスを追加します。あるいは、addStyle(String)で、外側のdiv要素に対してスタイルを追加することも可能です。

使用例としては、click-examplesや上記blogを見てください。