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


Posted in Javascript onAugust 18, 2015

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

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

运行效果截图如下:

js实现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程序设计有所帮助。

Javascript 相关文章推荐
Jquery加载时从后台读取数据绑定到dropdownList实例
Jun 09 Javascript
BootStrap实现树形目录组件代码详解
Jun 21 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
解决Vue不能检测数组或对象变动的问题
Feb 24 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
Echarts之悬浮框中的数据排序问题
Nov 08 Javascript
微信小程序实现的一键复制功能示例
Apr 24 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
Apr 13 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 #Javascript
js模拟淘宝网的多级选择菜单实现方法
Aug 18 #Javascript
js实现Select头像选择实时预览代码
Aug 17 #Javascript
基于jquery实现放大镜效果
Aug 17 #Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 #Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 #Javascript
js实现匹配时换色的输入提示特效代码
Aug 17 #Javascript
You might like
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
javascript整除实现代码
2010/11/23 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
checkbox选中与未选中判断示例
2014/08/04 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
Python中无限元素列表的实现方法
2014/08/18 Python
使用Python中的cookielib模拟登录网站
2015/04/09 Python
Python中的各种装饰器详解
2015/04/11 Python
python用装饰器自动注册Tornado路由详解
2017/02/14 Python
分享几道你可能遇到的python面试题
2017/07/24 Python
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
python 读取目录下csv文件并绘制曲线v111的方法
2018/07/06 Python
python 处理string到hex脚本的方法
2018/10/26 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
Docker部署Python爬虫项目的方法步骤
2020/01/19 Python
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
2020/03/02 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
运动会通讯稿100字
2014/01/31 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
中专生自荐信
2014/06/25 职场文书
杭白菊导游词
2015/02/10 职场文书
《山中访友》教学反思
2016/02/24 职场文书
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python