Home >Web Front-end >JS Tutorial >js implementation of iPhone interface style radio button and check box button examples_javascript skills
js implementation of iPhone interface style radio button and check box button examples_javascript skills
- WBOYOriginal
- 2016-05-16 15:44:271418browse
The example in this article describes the implementation of iPhone interface style radio button and checkbox buttons in js. Share it with everyone for your reference. The details are as follows:
Here we use JS to beautify the iPhone-style radio button and checkbox button effects, using jQuery code, with complete examples and usage methods. Now, the iPhone style is indeed popular, I hope everyone will like it too.
The screenshot of the running effect is as follows:
The online demo address is as follows:
http://demo.jb51.net/js/2015/js-iphone-radio-checkbox-button-codes/
The specific code is as follows:
<!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 class="brush:php;toolbar:false"><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>
Step 2 The Javascript
<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>
Step 3 The CSS
<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>
Compatability
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+