jQueryでフォームのselect要素をスタイリッシュに! via:JQuery Narrative Select Plugin

selectってなんだか味気ないですよね。
そんな訳でJavaScriptライブラリのjQueryプラグインを使ったスタイリッシュにselectを変えてみましょう。
JQuery Narrative Select Plugin
jQueryでフォームのselect要素をスタイリッシュに! via:JQuery Narrative Select Pluginサンプル

使用方法
JQuery Narrative Select Pluginからファイル一式をダウロードします。
<link rel="stylesheet" href="jquery.narrativeselect.css" type="text/css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.narrativeselect.js"></script>
<script type="text/javascript">
$(document).ready( function(){
$("select").narrativeselect({
tooltip_opacity : 0.80, // ツールチップ透明度(デフォ0.90)
tooltip_max_height : 300, // ツールチップ高さ(デフォ 200px)
});
});
</script>

あとは通常通りselectを記述すればあっという間に完成です。
<select>
<option value="correct">Correct</option>
<option value="incorrect">Incorrect</option>
</select>

jQueryでフォームのselect要素をスタイリッシュに! via:JQuery Narrative Select Pluginサンプル

sponsors

「jQueryでフォームのselect要素をスタイリッシュに! via:JQuery Narrative Select Plugin」をシェアする

記事作成:
記事URL:

TOP > > > jQueryでフォームのselect要素をスタイリッシュに! via:JQuery Narrative Select Plugin