js實現(xiàn)iPhone界面風格的單選框和復選框按鈕實例

更新時間：2015年08月18日 10:34:28 作者：企鵝

這篇文章主要介紹了js實現(xiàn)iPhone界面風格的單選框和復選框按鈕,涉及javascript動態(tài)操作頁面元素樣式的相關(guān)技巧,非常美觀大方,需要的朋友可以參考下

本文實例講述了js實現(xiàn)iPhone界面風格的單選框和復選框按鈕。分享給大家供大家參考。具體如下：

這里使用JS美化仿iPhone風格的單選框和復選框按鈕效果，使用了jQuery代碼，附有完整實例及使用方法，現(xiàn)在，iPhone風格確實流行，希望大家也喜歡。

運行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-iphone-radio-checkbox-button-codes/

具體代碼如下：

<!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>&nbsp;</h3>
</body>
</html>

希望本文所述對大家的javascript程序設(shè)計有所幫助。

您可能感興趣的文章: