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

js-offcanvas上下左右にオフキャンバスのナビゲーションを実装できる「js-offcanvas」前のページ

ビューポート外のコンテンツ表示を防止できる「jQuery.appear」次のページjQuery.appear

関連記事

  1. Los Scrollos

    JavaScript

    シンプルで滑らかな水平スクロール実装「Los Scrollos」

    Los Scrollosはシンプルで滑らかな水平スクロールを実装できる…

  2. Drift

    JavaScript

    画像にホバーして拡大できる軽量のスクリプト「Drift」

    Driftは画像にホバーした部分を拡大できるシンプルで軽量なスクリプト…

  3. Jquery Toast Plugin

    JavaScript

    高いカスタマイズ性を備えたトースト通知を実装できる「Jquery Toast Plugin」

    Jquery Toast Pluginは高いカスタマイズ性を備えたアニ…

  4. notifit

    JavaScript

    多彩なカスタマイズができるシンプルなjQuery通知プラグイン「notifit」

    notifitは多彩なカスタマイズが可能なシンプルな通知機能を実装でき…

  5. Tippy.js

    JavaScript

    軽量ながらも多彩なツールチップを実装できるJSライブラリ「Tippy.js」

    Tippy.jsは軽量でありながらも多彩なツールチップを実装することが…

  6. Instafeed.js

    JavaScript

    Webサイト内にInstagramの画像を表示できる「Instafeed.js」

    Instafeed.jsはWebサイト内にInstagramの画像一覧…

最近の記事

  1. 有栖川公園
  2. グーディオ オーガニックチョコレート(ミント)
  3. チキンバターマサラとシュリンプバターマサラ
  4. 恵比寿のダ・ミケーレのピザ
  5. ハムエッグホットサンドとドリップコーヒー

アーカイブ

PAGE TOP