jQuery UI Selectmenu

  • 投稿日:
  • by
  • カテゴリ:
  • ハッシュタグ:

ボタンについては UI Button で見栄えを良くしたのですが、セレクトボックスやチェックボックスは無粋なままです。

select01.jpg

フォームの見栄え・使い勝手を強化するjQueryプラグインいっぱい」を見て、Uniform Sexy forms with jQuery の導入にチャレンジしたものの、うまくいかずに断念したりしていました。

でも今回の jQuery UI Selectmenu はひと味違います。

なぜなら開発元の filament group は jQuery UI ThemeRoller の 開発元であり Commercial sponsors でもあります。 ですから、当然ですが jQuery UI とデザインの統一性が取れています。
デザイン系プラグイン導入で難しいのは、この統一性なんですよね。  Thema Roller の効果ももちろん反映されます。
ただ適用するだけではダメで、かなりCSSをいじくりまわしましたが、満足できるデザインになりました。

select02.jpg

この UI Selectmenu はどういう仕組かというと、元のselect要素やoption要素は非表示にして、代わりにul要素とli要素に置き換えることで実現しています。
結構コストのかかる処理なので、セレクトボックスが沢山あるページではタイムアウトすることがあります。
基本は全適なんですが、毎行セレクトボックスが入るテーブルでは、否定擬似クラス(:not)で排除するようにしています。

チェックボックスとラジオボタンについても、filament group からデザインを変えるためのプラグインが出ています。
ただ、こちらは残念ながら ThemeRoller 対応ではないんですよね。 「プランB」のように背景が黒だと使えません。

jQuery UI Selectmenu は、jQuery UI に標準的に含まれている訳ではありませんのでご注意を。