ITエンジニア/デザイナ向けにオープンソースを毎日紹介

ddSlickはドロップダウンメニューにアイコン、説明文を追加できるjQueryライブラリです。

常々HTMLのコンポーネントは貧弱だと思っていた。特にドロップダウンの使い勝手の悪さったらない。テキストしか表示できず、情報選択のUIとしてあまりに粗雑ではなかろうか。そしてみんなが望んでいたライブラリが登場した。それがddSlickだ!


見よ、この格好いいドロップダウン!テキストに加えて画像が表示できるようになっています!


ダイナミックに変更も可能です。まず普通のドロップダウン。実にいけてない。


じゃじゃーん!


もちろん普通のドロップダウンライクに値が取得できます。選択した項目のデータも取れます。


外部から値を与えて表示項目を変更することもできます。


コールバック対応!


デフォルトの選択もできます。


画像を右に寄せられます。


さらに説明をつけて行ごとに高さを可変にもできます。


画像がない場合でもそれなりに奇麗です。

ddSlickはドロップダウンのアイテムに対して画像や説明文を追加したり、JSONを使ってオプションの内容を動的に組み立てることができます。

ddSlickはJavaScript/jQeury製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。


MOONGIFTはこう見る

最近よく使っているBootstrapのドロップダウンライクなコンポーネントは実際にはリンクであり中に画像を埋め込むことができるものの、従来の方法がそのまま使える訳ではありませんでした。ddSlickを使えばドロップダウンメニューにおいてアイコンを提示してユーザビリティを高められるでしょう。

このライブラリは個人的に最も望んでいた形に近いものになっています。こういう表示ができるかどうかでユーザビリティは大きく変わってきます。特にテキストだけでは分かりづらいケースは尚更です。HTML5になっても貧弱なコンポーネントは変わらずですが、それはプログラミングの力で克服できるかも知れません。

ddSlick - a jQuery plugin for custom drop down with images

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2