Blog

フォーム・選択要素で使えそうなjQuery「Selectivity」

今回はjQueryプラグイン「Selectivity」の紹介です。

これは最初select要素のカスタマイズをできるプラグインかと思っていたのですが、
ちょっと違いました。
HTML要素はselectではなくdivとかでよいようです。

機能の良くして、デザインも良くしてくれます。

単一の選択肢、複数選択、入れ子表示、
あとは、ajaxと連携して、外部のデータと紐付けたりもできるようです。

デモはこちらになります。

DEMO

Selectivityの使い方

それでは、Selectivityの使い方ですが、
導入は非常に簡単です。

まずは下記必要なファイルをダウンロードします。

selectivity

そして、head内で以下の記述をします。

font-awesomeは記号の表示のために必要です。なくても大丈夫だと思います。

スクリプトは、

となります。

htmlは、

だけです。

基本これだけですが、
オプションやできることが多いので、
場合によってはかなり複雑になってきます。

ちなみに、DEMOのスクリプトは、

になります。

正直な所、もっと応用できるプラグインだと思うのですが、
使い方があんまり把握できなかったため、説明はここまでになります。

僕の希望としては、
select要素をデフォルトでもっと見た目を自由にできるようになってほしいですね・・・

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ