js实现iPhone界面风格的单选框和复选框按钮实例

 本文实例讲述了js实现iPhone界面风格的单选框和复选框按钮。分享给大家供大家参考。具体如下：

这里使用JS美化仿iPhone风格的单选框和复选框按钮效果，使用了jQuery代码，附有完整实例及使用方法，现在，iPhone风格确实流行，希望大家也喜欢。

运行效果截图如下：

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>iPhone风格的单选框和复选框jQuery代码</title>

<script type="text/javascript" src="jquery-1.6.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>

<style type="text/css">

body { font-family: Arial, Sans-serif; padding: 0 20px; }

.field { width: 100%; float: left; margin: 0 0 20px; }

.field input { margin: 0 0 0 20px; }

h3 span { background: #444; color: #fff; padding: 3px; }

pre { background: #f4f4f4; }

.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>

</head>

<body>

<h2>iPhone风格的单选框和复选框jQuery代码</h2>

<h4>From DevGrow, a blog about designing, developing and growing your website.</h4>

<h3>The Example:</h3>

<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>

<h3>The Prerequisites</h3>

<p>You need just two things for this to work correctly: JQuery 1.3.2+ and the images/switch.gif image file used for the backgrounds.</p>

<h3><span>Step 1</span> The HTML</h3>

<pre><code>

<p class="field switch">

<input type="radio" id="radio1" name="field" checked />

<input type="radio" id="radio2" name="field" />

<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" />

</p>

</code>

</pre>

<h3><span>Step 2</span> The Javascript</h3>

<pre><code>

$(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);

});

});</code>

</pre>

<h3><span>Step 3</span> The CSS</h3>

<pre><code>

.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; }

.switch input { display: none; }</code>

</pre>

<h3>Compatability</h3>

<p>While this should work in all major browsers, it has only been tested on: Firefox 3.5+, IE7+, Chrome 4.1+, Opera 9.6+, Safari 4+</p>

<h3> </h3>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。