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

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

使用方法

HTML 構造

FancySelect は非常に使いやすく、jQuery または Zepto と組み合わせて使用​​できます。ページ上にいくつかの ドロップダウン ボックス コンポーネントを配置し、.fancySelect() メソッドを通じてドロップダウン ボックス プラグインを呼び出します。ドロップダウン ボックスのオプションに値がない場合、プラグインはある種のプレースホルダー テキストを使用してそれを置き換えます。

デフォルトでは、FancySelect は iOS デバイス上のネイティブのドロップダウン ボックスとスタイルのみを使用します。これをオーバーライドする場合は、ドロップダウン ボックス プラグインが初期化されるときに、forceiOS を true に設定します。

FancySelect では、

要素のデータクラス属性を通じてスタイルを指定することもできます。このメソッドを使用して、選択ドロップダウン ボックスのさまざまなスタイルを指定できます。

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

<クラス="基本" を選択>
何かを選択してください…
ロレム
イプサム
ドール
座る
アメット

JAVASCRIPT

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

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

オプションを更新

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

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

var mySelect = $('.my-select');
mySelect.fancySelect();
mySelect.append('');
mySelect.trigger('update.fs');

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

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

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

最初のオプション
2 番目のオプション

var mySelect = $('.my-select');
mySelect.fancySelect(); // HTML プロパティのため現在無効になっています
// 後で…
mySelect.trigger('enable.fs'); // 有効になりました
// 後でも…
mySelect.trigger('disable.fs'); // 再び無効になりました

パーソナライズされた効果を作成する必要がある場合は、triggerTemplate メソッドとtriggerTemplate メソッドを使用できます。これらのメソッドはどちらも、オプションを通して HTML 文字列を返します。

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

<クラス="電球" を選択>
白熱
CFL
ハロゲン

$('.bulbs').fancySelect({
optionTemplate: function(optionEl) {
return optionEl.text() '
'; } })

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

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

    最初のオプション
    2 番目のオプション

var mySelect = $('.my-select');
mySelect.fancySelect().on('change.fs', function() {
    $(this).trigger('change.$');
}); // FancySelect
を変更するときに DOM の変更イベントをトリガーします

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Node.js_node.js のバッファリングおよびストリーミング モジュールの詳細な紹介次の記事：Node.js_node.js のバッファリングおよびストリーミング モジュールの詳細な紹介

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて免責事項Sitemap

© php.cn All rights reserved