Chosen と Select2 を例を挙げて説明する

2 つの jQuery プラグインを使用して、Select2 と Chosen という選択ボックスのスタイルを設定できます。 Select2 プラグインと Chosen プラグインはどちらも、選択したボックスの外観を改善し、ボックスの動作を強化してユーザーフレンドリーにします。さらに、両方のプラグインは、選択された単一のボックスだけでなく、複数の選択されたボックスでも機能します。

＃＃＃選ぶ＃＃＃

ユーザーフレンドリーな選択ボックスを作成するための JavaScript プラグイン。 Chosen はプロトタイプ バージョンと JQuery バージョンの両方で利用できます。

選択された機能

フレンドリーなユーザー

ユーザーは、たくさんの可能性を検討する必要はなく、探しているものの名​​前から始めるだけで済みます。代替を選択するには、「Enter」を押すかマウスをクリックするだけで、一致しないエントリが画面から削除されます。

プログレッシブ機能強化

Chosen はデフォルトの HTML 選択フィールドを置き換えるため、JavaScript をサポートしていないブラウザーで動作させるためにこれ以上の手順を実行する必要はありません。また、バックエンドはデータの管理にイベントを使用しません。

簡単な設定

選択したファイルをアプリケーションに含めてプラグインを開くだけです。選択グループ、選択された状態、複数の機能、およびブラウザーのタブの順序は、選択によって自動的に尊重されます。

2を選択してください

Select2 は、検索、リモート データセット、マーカー、無限スクロール、その他多くの便利なプロパティに使用できるカスタマイズ可能な選択ボックスをユーザーに提供します。

Select2の特徴は

検索、タグ付け、リモート データセット、無限スクロール、その他多くのオプションのサポートに加えて、ユーザーがカスタマイズ可能な選択ボックスも提供します。

RTL 環境

RTL 環境をサポートし、40 を超える言語での検索機能が組み込まれています。

Ajax

Ajax を使用すると、項目の長いリストをすばやく検索できます。

Sass およびオプションの Bootstrap 3 テーマを使用して、完全にスキン可能な CSS を作成します。

選択されたJavaScriptライブラリ

選択したプラグインを JQuery で使用するには、以下に示すようにいくつかのライブラリを追加する必要があります -

chosen.jquery.min.js
Select.min.css
選択したボックスのプラグインも有効にするには、次のコードを追加する必要があります -

リーリー

上記のコードは JQuery のスクリプトです。

Select2 の JavaScript ライブラリ

jQuery で select2 プラグインを使用するには、以下に示すようにいくつかのライブラリを追加する必要があります -

select2.min.js
select2.min.css
選択したボックスのプラグインも有効にするには、次のコードを追加する必要があります -

リーリー

上記のコードは JQuery のスクリプトです。

selected と select2 の基本を理解しました。次に要点に進みます。つまり、要点でそれらの違いを観察します。

Chosen と Select2 の違い

選択ボックスを拡張するために最も一般的に使用される 2 つのライブラリは、Choose と select2 です。 Chosen は Select2 よりも古く、jQuery と Prototype をサポートしています。どちらも更新中です。 Select2 は Chosen からインスピレーションを受けており、jQuery のみをサポートします。

selected と select2 の違いを見てみましょう -

データのダウンロード

selected を使用してデータをロードする場合、データセット全体を DOM のオプション タグとしてロードする必要があるため、小さなデータセットの処理は制限されます。一方、Select2 は関数の概念を使用して結果を動的に検索するため、 select2 メソッドが結果を部分的に読み込むことができるため、 selected の欠点が解消されます。

ページング要件

前のポイントで説明したように、データセット全体がセレクターによって一度にロードされます。つまり、データを部分に分割する必要がないため、ページングの概念は役に立ちません。一方、Select2 関数は完全なデータ セットを処理し、必要な結果を部分的にロードし、ページングの概念をサポートします。ユーザーが現在のデータの一番下までスクロールすると、検索関数が呼び出され、データをロードして追加のデータが提供されます。

タグサポートタイプ

オプション タグによって提供される唯一のマークアップ サポートは、選択によってサポートされるレンダリング テキストです。一方、Select2 は、結果を表すさまざまなマークアップを作成するために使用できる拡張ポイントを提供します。

結果を追加

結果を追加するには、Choosen と select2 には静的または動的という 2 つのオプションがありますが、Choose は結果を動的に追加できませんが、select2 はその逆で、タグを使用して結果を動的に追加できます。

＃＃＃発達＃＃＃

Sass と CoffeeScript は select の開発に使用され、純粋な JavaScript と CSS は select2 の開発に使用されました。

上記の違いは、Select と Select の主な違いですが、Select のサイズは 27 KB であるのに対し、Select 2 のサイズは 57 KB と大きいなど、いくつかの小さな違いもあります。

NOTE

- Saas と CoffeeScript は、デバッグの選択をより困難にすることがわかっています。

Select2 はモバイル デバイスを公然とサポートしていますが、Chosen は一部のデバイスで意図的に無効化します。したがって、モバイル デバイスで「拡張セレクト ボックス」を使用する場合は、Select2 を使用することをお勧めします。 ＃＃＃結論は＃＃＃

この記事では、選択ボックスのスタイルを設定するために使用できる 2 つの JQuery プラグイン (Select2 と Chosen) があることを学びました。 Select2 プラグインと Chosen プラグインはどちらも、選択したボックスの外観を改善し、ボックスの動作を強化してユーザーフレンドリーにします。 Select2 と Choice の間には、データ読み込みプロセス、ページングが必要かどうか、結果を動的に追加できるかどうか、開発方法など、多くの違いがあります。

以上がChosen と Select2 を例を挙げて説明するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。