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

画像が並んでいて、そこから選ぶようなインタフェースを作る場合、どういうものを想像するでしょうか。画像の下にチェックボックスを配置するのが簡単そうですが、直感的とは言いがたいUIです。

そこで使ってみたいのがImage Pickerです。画像をそのまま選択できるコンポーネントになっています。

Image Pickerの使い方

一例です。画像を選択すると枠が青くなります。

複数選択もできます。選択上限を設けることもできます。

ドロップダウンと連動させることもできます。

レイアウトは自由に変更できます。

Image Pickerは画像を選択肢として使うコンポーネントです。使い勝手としてはselectタグの選択肢やラジオボタン、チェックボックスと変わりません。しかしテキストよりも文字列の方が使いやすいケースもあるでしょう。

Image PickerはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

Image Picker

rvera/image-picker: Image Picker is a simple jQuery plugin that transforms a select element into a more user friendly graphical interface.

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2