JavaScriptでiPhoneライクなフォームを作成 via「iPhone Style Radio and Checkbox Switches using JQuery and CSS」

世の中にiPhoneが溢れ返る時代だから、PCのフォームもiPhoneライクにしてみませんか。
iPhone Style Radio and Checkbox Switches using JQuery & CSS | DevGrowで紹介されているチュートリアルでラジオとチェックボックスをiPhoneぽくしてみましょう。
JavaScriptでiPhoneライクなフォームを作成 via「iPhone Style Radio and Checkbox Switches using JQuery and CSS」サンプル

使用方法
iPhone Style Radio and Checkbox Switches using JQuery & CSS | DevGrowからファイルをダウンロードします。
使うのはjQueryとswitch.gifです。
まずはhtmlを以下のように記述します。
<p class="field switch">
<input type="radio" id="radio1" name="field" checked />enable
<input type="radio" id="radio2" name="field" />disable
<label for="radio1" class="cb-enable selected"><span>Enable</span></label>
<label for="radio2" class="cb-disable"><span>Disable</span></label> </p>
<p class="field switch">
<label class="cb-enable"><span>On</span></label>
<label class="cb-disable selected"><span>Off</span></label>
<input type="checkbox" id="checkbox" class="checkbox" name="field2" /> Checkbox </p>

次に、JavaScriptを記述します。
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready( function(){
$(".cb-enable").click(function(){
var parent = $(this).parents('.switch');
$('.cb-disable',parent).removeClass('selected');
$(this).addClass('selected');
$('.checkbox',parent).attr('checked', true);
});
$(".cb-disable").click(function(){
var parent = $(this).parents('.switch');
$('.cb-enable',parent).removeClass('selected');
$(this).addClass('selected');
$('.checkbox',parent).attr('checked', false);
});
});
</script>

クリックされた要素のclassを取ったり、つけたりしています。

最後にCSSでスイッチをiPhoneぽくします。
<style>
.cb-enable, .cb-disable, .cb-enable span, .cb-disable span { background: url(switch.gif) repeat-x; display: block; float: left; }
.cb-enable span, .cb-disable span { line-height: 30px; display: block; background-repeat: no-repeat; font-weight: bold; }
.cb-enable span { background-position: left -90px; padding: 0 10px; }
.cb-disable span { background-position: right -180px;padding: 0 10px; }
.cb-disable.selected { background-position: 0 -30px; }
.cb-disable.selected span { background-position: right -210px; color: #fff; }
.cb-enable.selected { background-position: 0 -60px; }
.cb-enable.selected span { background-position: left -150px; color: #fff; }
.switch label { cursor: pointer; }
</style>

※backgroundに画像おいて都度ずらす(CSSspriteする)感じです。

JavaScriptでiPhoneライクなフォームを作成 via「iPhone Style Radio and Checkbox Switches using JQuery and CSS」サンプル

sponsors

「JavaScriptでiPhoneライクなフォームを作成 via「iPhone Style Radio and Checkbox Switches using JQuery and CSS」」をシェアする

記事作成:
記事URL:

TOP > JavaScriptでiPhoneライクなフォームを作成 via「iPhone Style Radio and Checkbox Switches using JQuery and CSS」

前の記事:
次の記事:[メモ]ソーシャルバー5個

あなたにはこちもお勧め!

jQuery プラグインまとめ!