jQueryフラットスタイルドロップダウンボックス美化プラグインFancySelect使い方ガイド

FancySelect は、小型で実用的な jQuery ドロップダウンボックス美化プラグインです。このドロップダウンボックス美化プラグインはフラットなデザインスタイルを採用しており、ファッションを追求する開発者にとって最初に選択されるドロップダウンボックス美化プラグインの 1 つです。

使用方法

HTML 構造

FancySelect は非常に使いやすく、jQuery または Zepto と組み合わせて使用できます。ページ上にいくつかの要素のデータクラス属性を通じてスタイルを指定することもできます。このメソッドを使用して、選択ドロップダウンボックスのさまざまなスタイルを指定できます。

コードをコピーしますコードは次のとおりです:

<クラス="基本" を選択>

JAVASCRIPT

コードをコピーしますコードは次のとおりです:

$('.basic').fancySelect();

オプションを更新

プラグインの初期化後にドロップダウンボックスのオプションが変更された場合は、ドロップダウンボックスで update.fs メソッドをトリガーすることで、オプションリストを更新するようにプラグインに指示できます。

コードをコピーしますコードは次のとおりです:

var mySelect = $('.my-select');

mySelect.fancySelect();

mySelect.append('');

mySelect.trigger('update.fs');

ドロップダウンボックスを有効/無効にします

FancySelect ドロップダウンボックスプラグインは、初期化後にドロップダウンボックスを自動的に無効な状態に設定します。ドロップダウンボックスの状態をリセットする必要がある場合は、select 要素でenable.fs メソッドまたは disable.fs メソッドを使用してドロップダウンボックスを変更できます。

コードをコピーしますコードは次のとおりです:

ドロップダウンボックスのオプションが変更されると、change.fs イベントをリッスンできます。

コードをコピーコードは次のとおりです:

jQueryフラットスタイルドロップダウンボックス美化プラグインFancySelect使い方ガイド_jquery