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 の変更イベントをトリガーします

関連ラベル：

jquery ドロップダウンボックス

ソース：php.cn

前の記事：Node.js_node.js のバッファリングおよびストリーミング モジュールの詳細な紹介 次の記事：JavaScriptにおけるVarの重要性の分析_基礎知識

このウェブサイトの声明

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

著者別の最新記事

• NullPointerException とは何ですか?どのように修正すればよいですか?
  2024-10-22 09:46:29
• 初心者からプログラマーへ: 旅は C の基礎から始まります
  2024-10-13 13:53:41
• PHP による Web 開発のロックを解除する: 初心者ガイド
  2024-10-12 12:15:51
• C の謎を解く: 新人プログラマーのための明確でシンプルな道
  2024-10-11 22:47:31
• コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング
  2024-10-11 19:36:51
• 内なるプログラマーを解き放つ: まったくの初心者のための C
  2024-10-11 15:50:41
• C で生活を自動化する: 初心者向けのスクリプトとツール
  2024-10-11 15:07:41
• PHP を簡単に: Web 開発の最初のステップ
  2024-10-11 14:21:21
• Python で何でも構築: 創造性を解き放つための初心者ガイド
  2024-10-11 12:59:11
• コーディングの鍵: 初心者のための Python の力を解き放つ
  2024-10-11 12:17:31

最新の問題

Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...

から 2024-04-06 14:54:03

0

2

421

jqueryを使用してHTMLデータテーブルの選択されていない行の値を取得する方法 ボタンがクリックされなかったすべての行の値を取得しようとしています。たとえば、最初の行のボタンをクリックしたときに、クリックされなかった行の値を取得したいとします。 vartabl...

から 2024-04-05 09:26:49

0

1

1418

エンドユーザーの現在の選択に基づいて選択ボックスから選択したオプションを移動するには、jquery スクリプトが必要です エンドユーザーが選択ボックス要素を介してアイテムをランク付けできる HTML ページがあります。簡単なデモを確認するには、フィドルを参照してください: https://jsfidd...

から 2024-04-04 18:40:04

0

1

3528

ブックマークを介して純粋な CSS で要素を作成しました。作成されたが表示されない 私のコードは次のとおりです: g=document.createElement('div');g.setAttribute("id","divcont...

から 2024-04-04 17:27:27

0

1

417

Safari/Firefox iOS でフォ​​ームデータを送信できない これは、iOS 上の Safari/Firefox を除くすべてのプラットフォームで動作します: jQuery("#gform_1").one('submit'...

から 2024-04-04 12:53:48

0

1

303

関連トピック

詳細>

• jqueryプラグインとは何ですか?
• jQueryでJSONを操作する方法
• jqueryで要素を削除する方法
• jQueryのhover()メソッドの使用
• jqueryはページングメソッドを実装します
• jqueryの隠し要素とは何ですか
• jQueryでハイライト表示されているもの
• Excelの表をコピーして元の表と同じサイズにする方法

人気のおすすめ

• jsはどういう意味ですか
• jsで文字列を配列に変換するにはどうすればよいですか?
• JavaScriptを使用してページを更新する方法
• js配列内の項目を削除する方法
• sqrt関数の使い方

人気のチュートリアル

詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1417429
• 
  PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ

  4258587
• 
  JAVA 初心者向けビデオチュートリアル

  2481130
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  504142
• 
  PHP ゼロベースの入門チュートリアル

  844465

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1417429 回の学習
• 
  JAVA 初心者向けビデオチュートリアル

  2481130 回の学習
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  504142 回の学習
• 
  Web フロントエンド開発の簡単な紹介

  215340 回の学習
• 
  PSビデオチュートリアルをゼロからマスターする

  878353 回の学習

• 
  [Web フロントエンド] Node.js クイック スタート

  6488 回の学習
• 
  海外のWeb開発フルスタックコースの完全なコレクション

  5096 回の学習
• 
  Go言語実践GraphQL

  4278 回の学習
• 
  550W ファンマスターが JavaScript をゼロから段階的に学習します

  635 回の学習
• 
  Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる

  21780 回の学習

最新のダウンロード

詳細>

ウェブエフェクト

公式サイト

サイト素材

フロントエンドテンプレート

• [フォームボタン] jQuery エンタープライズ メッセージ フォームの連絡先コード
• [プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果
• [メニューナビゲーション] HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果
• [フォームボタン] jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード
• [プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤー コード
• [html5特殊効果] 古典的な HTML5 プッシュ ボックス ゲーム
• [画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール
• [フォトアルバム効果] CSS3 個人アルバム カバー ホバー ズーム効果

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

• [PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)
• [PNG素材] 4 つの赤い 2023 卒業バッジ ベクター素材 (AI+EPS+PNG)
• [バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）
• [PNG素材] 金色の卒業帽ベクター素材（EPS+PNG）
• [PNG素材] 黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG)
• [PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）
• [バナー画像] フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS)
• [PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

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

PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！