chrome firefox IE safari chain youtube-play pocket hatena facebook feedly github google-plus rss twitter search code envelope-o home pencil website works calendar drawer tag
2014/07/14

[jQuery] セレクトボックスの装飾や便利な機能をつけたjQueryプラグイン「Select or Die」

セレクトボックスはデフォルトでは、CSSのappearanceをnoneにしてからスタイルを上に載せたりWebkit以外のブラウザの考慮もしないといけなかったりとかなり大変ですが、「Select or Die」プラグインを使用する事でスタイルの変更や便利な機能を追加する事が可能です。
対応ブラウザ: Firefox/Chrome/Safari/Opera/IE8+(IE8の場合は、jQuery v1.8を使用する必要があります)

Select or Die

なかなか洒落おつなプラグイン名ですが、セレクトボックスの装飾や便利な機能を付けてくれる、プラグイン。

デモサイトはこちら

DLはこちら

jQ-Select-or-Die2-cont1

 

機能

  • カスタムClass/IDの付加
  • プレイスホルダーの付加
  • prefixの付加
  • リンクを追加(選択するとそのリンク先にジャンプ)
  • キーボードサイクル

個人的に一番最後のキーボードサイクル機能がちょっと便利だなと思いました。

デフォルトでは、キーボードの上下キーで選択部分を移動出来ますが一番下までいった場合はそこで止まってしまう。

「Select or Die」ではキーボードサイクルを有効にする事で一番下までいった後に一番上に戻るのです!(どーん)

何言ってるかよくわからないので、gifにしました。

xtbXaSRt92

その他にも基本となる機能がついてますので結構便利ではないかなと思います。
Method以外は、html自体にdata-タイプでパラメータを追加していくタイプです。

対応ブラウザはFirefox/Chrome/Safari/Opera/IE8+

IE8の場合はjQueryのコアファイルのv2.xは対応してないので、v1.8-v1.9を使ってください。

DLしたパッケージの_srcフォルダ内に.min版と通常のプラグイン、初期化スタイルのselectordie.cssが入っております。

DL

デモサイト: Select or Die

DL: Select-or-Die-master.zip

 

今後の励みになりますので、良かったらシェアをお願いします。

このエントリーをはてなブックマークに追加