Subscribed unsubscribe Subscribe Subscribe

Tracのカスタムフィールドで複数選択可能にする

久々にTracネタです。
Tracのカスタムフィールドでは、複数選択可能なmultiselectは定義できません。そこで、syoさん作成のMultiSelectListPluginを使わせてもらっていましたが、入力項目が増えると入力しづらくなってきました。
特に、サイズが固定されているのでリストの数が増えると、誤ってCtrlなしでクリックしてしまい選択を外してしまうということがありました。selectタグのサイズを大きくすればよいのですが、そうすると縦に長くなり見た目がイマイチになってしまいます。
そこで、jQuery UI MultiSelect Widgetを組み込んだバージョンを作成してみました。jQuery UI MultiSelect Widgetはselectタグをかっこよく便利にしてくれるjQueryプラグインです。

↓のように、チェックボックスで複数選択可能になっています。
f:id:Hirohiro:20111228220430j:image:w360

↓選択を終え、フォーカスを外すとたたんでくれますので普段はすっきりしています。また、選択されたものが表示されており分かりやすい!(3つまで表示できるように、それ以上だと「4 selected」のように選択個数が表示されるようにしています)
f:id:Hirohiro:20111228220431j:image:w360

なお、現状ちょっと残念なのが、選択を全て外したい場合は「Uncheck all」では駄目で、一番上の空ラベルのチェックボックスのみを付けて送信してあげないといけません。

カスタマイズしたソースはGitHubに上げておきました。