vDrop

JavaScript

選択ボックスの選択肢をドロップダウンリストで表示できる「vDrop」

vDroppは、選択ボックスの選択肢をドロップダウンリストで表示してくれるとても軽量なjQueryプラグインです。このような仕様は様々なところで活躍します。ECサイトの商品検索での絞り込み、お問い合わせフォーム画面の入力補助などで特に多く見られます。メリットとして、見える情報量が最小限で済むので、シンプルなページを作成できます。

また、選択肢があらかじめ準備されているので、ユーザーにサイトの使いやすさを提供できます。それでは、vDropについて詳しく見ていきましょう。

vDrop

デモ

vDropを使用する際、jQueryライブラリを必ず読み込みましょう。これにより、ページの読み込みスピードも上がります。

<link href="vdrop.min.css" rel="stylesheet">
<script src="jquery.vdrop.min.js"></script>
$('select').vDrop();
$('select').vDrop({
  transitionSpeed: 200,
  allowMultiple: true,
});

プラグインの配布サイトでは、残念ながら詳しい使用方法が記載されていません。

ドロップダウンリストを簡単に設置はできますが、最低限の指示のみとなります。しかし、シンプルなデザインにこだわらず、CSSを利用して様々なデザインを楽しむことが可能です。「ドロップダウンリストの機能のみが欲しい」という方にぜひチェックしていただきたいです。

vDrop

関連記事

  1. JQuery Portfolio
  2. JUMBLE

    JavaScript

    テキストの色をカラフルにシャッフルさせるjQueryプラグイン「JUMBLE」

    JUMBLEというjQueryプラグインを使えば、指定したテキストの色…

  3. Image Tilt Effect

    JavaScript

    画像にチルトエフェクトをかけることができる「Image Tilt Effect」

    Image Tilt Effectは画像にチルトエフェクトをかけたちょ…

  4. flexible-bootstrap-carousel
  5. syncscroll

    JavaScript

    2つ以上のスクロールエリアを同時にスクロールできる「syncscroll」

    syncscrollは2つ以上のスクロールエリアを同時にスクロールでき…

  6. JavaScript

    JavaScriptの関数のスコープについてちょっと確認してみる

    JavaScriptの関数のスコープを確認、整理する意味で記事にしてみ…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP