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

    JavaScript

    2枚の画像を見比べれるjQueryプラグイン「TwentyTwenty」

    TwentyTwentyは2枚の画像を見比べれる便利なjQueryプラ…

  2. rpage

    JavaScript

    Bootstrapを使ったレスポンシブなページネーション「rpage」

    rpageはBootstrapを使ったレスポンシブに対応したページネー…

  3. jquery-confirm

    JavaScript

    アラートやダイアログなどさまざまな機能を実装できる「jquery-confirm」

    jquery-confirmはアラートやconfirm、ダイアログなど…

  4. InlineTweet.js

    JavaScript

    Webページのテキストにツイートリンクを作成できる「InlineTweet.js」

    InlineTweet.jsはWebページのテキストにツイートリンクを…

  5. Albumize

    JavaScript

    アルバムみたいな画像コレクションのギャラリーを管理・実装できるjQueryプラグイン「Albumiz…

    Webページにある画像コレクションをアルバムのようなギャラリーに管理・…

  6. JavaScript

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Shadow Plugin

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Sh…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP