selectタグをイケてるUIにカスタマイズする「Selectize.js」

「Selectize.js」はselectタグをイケてるUIにカスタマイズすることのできるjQueryプラグインです。

Selectize.js

screenshot204

selectタグはそのまま使用するといかにも昔ながらのフォーム部品といった感じで、イケてないですよね。

<select>
  <option value="1">test1</option>
  <option value="2">test2</option>
  <option value="3">test3</option>
</select>

例:

 

「Selectize.js」はそんな悩みを解決してくれます。「Selectize.js」で実装できるselectボックスをいくつかご紹介します。

まずは最もシンプルな1つのoptionを選ぶタイプ。

screenshot205

複数のoptionを選べるタイプ。

screenshot206

E-mailアドレスなんかも表示できます。

screenshot207

で、個人的に一番グッときたのがこのタグ表示。ちょうど製作中のWebアプリにタグ機能をつけたかったのでグッドタイミングでした。プラグイン側でどのように実装しているのか気になるので時間があるときに調べてみようと思います。

screenshot208

 

一番グッときたタグ表示の実装方法をご紹介。まずはheadタグでjQueryと、「Selectize.js」のJSファイルとCSSファイルを読み込みます。

<script rc="jquery.min.js"></script>
<script src="selectize.min.js"></script>
<link rel="stylesheet" href="selectize.css">

 

マークアップは以下の通り。labelタグはあっても無くても大丈夫です。id=”input-tags”のinputタグが必要です。valueには最初から表示させておきたいタグをいれておきます。

<label for="input-tags">Tags:</label>
<input type="text" id="input-tags" class="demo-default" value="awesome,neat">

 

JSは以下の通り。

$('#input-tags').selectize({
  delimiter: ',',
  persist: false,
  create: function(input) {
    return {
      value: input,
      text: input
    }
  }
});

 

するとこの通り簡単に実装できました。オプションも用意されているので、詳しくは公式ドキュメントをご参照ください。

screenshot209

 

こうした細かなUIデザインで他のWebサービスと差をつけていきたいですね。

 

Home > JavaScript > selectタグをイケてるUIにカスタマイズする「Selectize.js」

Return to page top