jQueryでiPhoneライクなチェックボックス&ラジオボタン「jQuery LightSwitch Plugin」

iPhoneの素晴らしいUIをあなたのサイトでも。
そんな願いをチェックボックスとラジオボタンで叶えてくれるJavaScriptです。
via:jQuery LightSwitch Plugin
jQueryでiPhoneライクなチェックボックス&ラジオボタン「jQuery LightSwitch Plugin」サンプル

使用方法
jQuery LightSwitch Pluginからファイルをダウンロードします。
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.lightswitch.js"></script>
<script type="text/javascript">
$(function(){
$('input').lightSwitch();
});
</script>

※js内に画像パスを記述する場所があります。同ディレクトリにおかない場合は適宜変更ください。
あとは通常通りinputを書いていけば完成です。
<input type="checkbox" value="on" />
radioでもjs側は同じ記述で、対応可能です。
<input type="radio" value="1"/>1<br />
<input type="radio" value="2" />2<br />
<input type="radio" value="3" />3<br />

また、オプションを利用すると画像や切り替え速度を調整可能です。
<script type="text/javascript">
$(function(){
$('input').lightSwitch({
switchImg:'switch-1.png', //画像パス
animSpeed:250,//切替速度
hoverSpeed:500 //ホバーで動く速度調整
});
});
</script>

jQueryでiPhoneライクなチェックボックス&ラジオボタン「jQuery LightSwitch Plugin」サンプル

sponsors

「jQueryでiPhoneライクなチェックボックス&ラジオボタン「jQuery LightSwitch Plugin」」をシェアする

記事作成:
記事URL:

TOP > > > jQueryでiPhoneライクなチェックボックス&ラジオボタン「jQuery LightSwitch Plugin」