jQuery が Sumoselect プラグインに基づいてドロップダウンチェックボックス効果を実装する方法の詳細な説明-jsチュートリアル-php.cn

jQuery が Sumoselect プラグインに基づいてドロップダウンチェックボックス効果を実装する方法の詳細な説明

小云云

リリース： 2017-12-23 09:54:54

オリジナル

4746 人が閲覧しました

jquery.sumoselect は、クロスデバイス、クロスブラウザーの jQuery ドロップダウンリストボックスプラグインです。 jQuery ドロップダウンリストボックスプラグインでは、単一選択または複数選択が可能です。そのスタイルは CSS ファイルを通じてカスタマイズできます。最大の特徴は、デバイスをまたいで利用でき、どのデバイスでも機能が一貫していることです。この記事では、jQuery が Sumoselect プラグインに基づいてドロップダウンチェックボックス効果を実装する方法について詳しく説明します。お役に立てれば幸いです。

この jQuery ドロップダウンリストボックスプラグインの機能は次のとおりです:

単一選択または複数選択を実行できます。
CSS ファイルを通じてスタイルをカスタマイズできます。
ほとんどのデバイスをサポートします。
デバイスに基づいたスマートなレンダリング。
Android、IOS、Windows、その他のデバイスでは、デバイスのネイティブスタイルのドロップダウンリストボックスが自動的にレンダリングされます。
送信されたデータの形式をカスタマイズできます (複数の選択を CSV またはデフォルトの形式で送信できます)。
選択されたテキスト、無効なテキスト、およびプレースホルダーテキストをサポートします。
拡張が簡単で、開発者は新しいコンポーネントを簡単に作成できます。
オプションの追加、オプションの削除、無効化、選択などのギャップ管理の基本的な方法を使用します。

jQuery ドロップダウンリストボックスプラグインには、jQuery 1.8.3 以降のバージョンが必要です。最新バージョンの jQuery を使用することをお勧めします。

1. 公式サイト：

https://hemantnegi.github.io/jquery.sumoselect/ 紹介URL
https://hemantnegi.github.io/jquery.sumoselect/sumoselect_demo.html へ効果を実現します

3. コードデモ

まず、js ファイルと css ファイルを紹介します

<link href="css/sumoselect.css" rel="external nofollow" rel="stylesheet"> 
<script src="vendor/jquery.sumoselect.js"></script>

ログイン後にコピー

次に、HTML に select タグを追加します:

<select multiple="multiple" placeholder="咨询,建议" class="SlectBox" id="SlectBox" required style="width: 160px"></select>

ログイン後にコピー

最後に、js コードにコードを追加します:

$('.SlectBox').SumoSelect({ 
  csvDispCount: 3, 
  captionFormat: '已选择：{0}(个)', 
  selectAll:true, 
  captionFormatAllSelected: "全选", 
  okCancelInMulti: true, 
  locale : ['确定', '取消', ''] 
 });

ログイン後にコピー

注:公式ウェブサイトの属性には多くの属性があり、選択ドロップダウンボックスで多くのイベントをバインドすることもできます:

ドロップダウンボックスの二次リンクが必要な場合は、次のように選択タグのコンテンツを更新できます。イベントを使用してドロップダウンボックスの二次リンクを実現します。

rree

もう学びましたか？急いで試してみてください。