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验证表单中的单选与多选实例
Aug 18 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
浅析js预加载/延迟加载
Sep 25 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
May 30 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
使用JavaScript根据图片获取条形码的方法
Jul 04 Javascript
浅谈Vue数据响应
Nov 05 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
详解vue-router导航守卫
Jan 19 Javascript
vue中格式化时间过滤器代码实例
Apr 17 Javascript
vue2.0自定义指令示例代码详解
Apr 25 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 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
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
2010/08/01 Javascript
JS target与currentTarget区别说明
2011/08/28 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
给文字加上着重号的JS代码
2013/11/12 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
详解Angular操作cookies方法
2018/06/01 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
elementUI select组件value值注意事项详解
2019/05/29 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2020/03/02 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
python实现微信自动回复功能
2018/04/11 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
iPython pylab模式启动方式
2020/04/24 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
CSS3中的opacity属性使用教程
2015/08/19 HTML / CSS
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
C#和SQL Server的面试题
2016/08/12 面试题
美发店5.1活动方案
2014/01/24 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
2016教师学习党章心得体会
2016/01/15 职场文书