multi-list

JavaScript

複数の選択可能なリストにするためのjQueryプラグイン「multi-list」

multi-listは、順序付けされていないリストを複数の選択可能なリストにするための便利なjQueryプラグインです。バラバラに並んでいるリストから、特定のジャンルに関するリストを表示したり文字によるフィルターをかけたりしたいという場合にはピッタリの機能ですね。

文字によるフィルターも可能

デモ

デモでは順序付けされていない地域名が並べられています。「Filter」と書かれたテキストボックスから文字を入力すると、その文字が入っている地域名が抽出されます。

また、下の方にはSelect all、Select Asia、Hide Oceania、Show Oceania、Disable Africa、Enable Africaなど、さまざまなボタンが設置されています。

すべてのチェックボックスにチェックを入れたり、アジアだけのチェックボックスにチェックを入れたり、またはオセアニアを非表示にしたりオセアニアを表示したりと、カスタマイズ次第でいろんなパターンのリストを表示させることができます。

マークアップもシンプルでわかりやすいほか、応用次第で多彩なカスタマイズができそうですね。

文字によるフィルターもかけれるので、たくさんのリストがあるサイトなんかにも大活躍してくれるのではないでしょうか?

選択時、または選択解除時によるイベント設定もできるみたいですよ。

というわけで、順序付けされていないリストを複数の選択可能なリストにすることができるjQueryプラグイン「multi-list」のご紹介でした。

multi-list

関連記事

  1. JavaScript

    水面にゆらゆらと波打つ動きを与えてくれるjQueryプラグイン「lake.js」

    面白そうなプラグインだったので使ってみました。画像を指定するとその画像…

  2. no-image

    JavaScript

    レスポンシブでスタイリッシュな「lightbox-jquery-plugin」

    lightbox-jquery-pluginは、レスポンシブに対応した…

  3. JavaScript

    円グラフ/折れ線グラフ/棒グラフを簡単に作れるjQueryプラグイン「Peity」

    個人的にかなり便利なプラグインを発見しました。円グラフ、折れ線グラフ、…

  4. responsive-flip-pricing-table

    JavaScript

    レスポンシブでフリップによる価格表示の切り替えができる「Responsive Flip Pricin…

    レスポンシブに対応し、フリップによる価格表示の切り替えもできるテーブル…

  5. no-image

    JavaScript

    背景にSVGによるライン(線)をランダムで生成する「ckLine.js」

    ckLine.jsは背景にSVGによるライン(線)をランダムで生成する…

  6. jQuery contextMenu plugin & polyfill

最近の記事

  1. ワンタッチ着脱フィルターキット
  2. Soundcore Ace A1
  3. cheero USB-C PD Charger 60W
  4. DY-S01

アーカイブ

PAGE TOP