オシャレなセレクト要素のデザインを実装できるjQueryプラグイン Select or Die

cap7

Select or Dieはselect要素のデザインをおしゃれにいできるjQueryプラグインです。

実装も簡単たんです。

地味なselect要素のデザインがおしゃれになります。

cssでオリジナルのデザインを実装することもできます。

cap6

デモ

デモページを用意しました。

実装方法

cssとjsを読み込みます。「selectordie.css」や「selectordie_theme_02.css」オリジナルデザインを用意することもできます。

<link rel="stylesheet" href="css/selectordie.css" type="text/css" />
<link rel="stylesheet" href="css/selectordie_theme_02.css" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/selectordie.js"></script>

selectOrDireを実行します。

<script>
$(function() {
 $("select").selectOrDie();
});
<script>

htmlはこんな感じです。

<select class="basic">
 <option value="one">One</option>
 <option value="two">Two</option>
 <option value="three">Three</option>
 <optgroup label="Option Group Label">
  <option value="group.one">Option Group.One</option>
  <option value="group.two">Option Group.Two</option>
 </optgroup>
 <option value="four">Four</option>
 <option value="five">Five</option>
</select>

ダウンロード・参考

人気の記事

2017年、人気の無料WordPressテーマ100選
2017年、人気の無料WordPressテーマ100選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ11選
アドセンス運用に最適なWordPressテーマ11選

フリーランスITエンジニアの案件・求人情報サイト

フリーランスWebクリエイター大募集!「ギークスジョブ」

コメント

  • Posted on
  • Updated on
  • Views 2,471