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. MenuSpy

    JavaScript

    セクションビュー対応のナビゲーションメニュー実装「MenuSpy」

    MenuSpyは、ナビゲーションメニューを作成するためのjsライブラリ…

  2. jRCarousel

    JavaScript

    モダンエフェクトなレスポンシブ対応のカルーセル実装「jRCarousel」

    jRCarouselはモダンエフェクトなカルーセルを実装できるjQue…

  3. no-image

    JavaScript

    水平・垂直に対応したカルーセルスライドショー「jCarousel」

    jCarouselは水平・垂直に対応したカルーセルスライドショーを実装…

  4. Prism Effect Slider

    JavaScript

    プリズム効果を実装することができるスライダー「Prism Effect Slider」

    おもしろいスライダーがあったのでご紹介します。Prism Effect…

  5. Scrolltab

    JavaScript

    スクロール移動させるタブを追加できるjQueryプラグイン「Scrolltab」

    ScrolltabというjQueryプラグインを使えばスクロール移動さ…

  6. pixelate.js

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP