サードパーティのソリューションを使用しなければならなかった多数のプロジェクトの後、松葉杖の絶え間ない発明、既成のプラグインの柔軟性の欠如、生成速度に出会いました。
当然、このすべての後、私は自転車を発明することにしました。
この例は、CSS3を使用して追加の画像なしで開発されました。 サンドボックスデモページはこちらです。
また自転車?
私は長い間、既製のプラグインを使用して松葉杖を作成し、書き終えました。 最後のストローは、ユニットテストを作成するときに、テスターがまず標準選択に手を差し伸べようとするという事実でしたが、使用したほとんどのプラグインは「display = none」で標準選択を非表示にしているため、うまくいきません。
また、元の選択と同じように動作する、簡単なソリューション、高速生成(ページごとに多数の選択を行うIEで)が必要でした。
私が最も頻繁に使用したプラグインは、既に作成された定型化された選択の構造に関連するイベントに基づいていました。 Selectikの場合、イベントは主に元のselectに正確にハングします。
ライブラリは、次の2つの理由でjQueryを使用することを決定しました。
- 現在、作成されているほとんどのサイトはこの特定のライブラリを使用しています。
- ネイティブJavaScriptでは、作成にさらに時間がかかり、大量のコードが屋根を通過しました。
それで、Selectikはどのようなものですか?
minifyバージョンでは、スクリプトファイルの重みは5.2 Kbのみです。 そして、追加のプラグイン(スクロールホイールマウス)とデモ12.8 KbのCSS。 GZIP 2.1 Kb / 4.7 Kbそれぞれ。
サポートされるブラウザー:IE7 +、最新バージョンのChrome、Safari、Firefox。
現在実装されている機能:
- 上/下のコントロールとEnterキー
- 様式化されたスクロール
- マウスホイールスクロール
- スペル検索
- 自動的に幅を調整します
- 「スマートポジショニング」
- 移行Tab'omに反応する
- リストの幅の割り当て(標準の場合、元のリストの幅が計算されます)
- 可視要素の最大数
- スクロールタイプの選択-定型化または標準
- リストの開閉のアニメーション速度
- 定型化されたリストの更新
- リストを開く/閉じる
- 新しいアクティブな要素の割り当て
- 動的な幅の変更
- リストを有効/無効にする
将来的には
- モバイルデバイスのサポート
- コメントであなたの願い
問題のエラー/問題を説明できればありがたいです。
更新する
Connorがタグ付けしたように、.on()を使用するため、jQuery 1.7+が必要です。 ほとんどの場合、.bind()に置き換えられます。
アップデート2
コメントとバグに感謝します。 1週間以内に完了します。