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改变disabled的boolean状态的三种方法
Dec 13 Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 Javascript
jQuery操作表单常用控件方法小结
Mar 23 Javascript
JS实现为表格动态添加标题的方法
Mar 31 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
Jun 01 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
利用CDN加速react webpack打包后的文件详解
Feb 22 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
Aug 06 Javascript
Jquery $.map使用方法实例详解
Sep 01 jQuery
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中数组定义的几种方法
2013/09/01 PHP
php提取字符串中网站url地址的方法
2014/12/03 PHP
php字符集转换
2017/01/23 PHP
jquery 最简单易用的表单验证插件
2010/02/27 Javascript
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
详解vue axios中文文档
2017/09/12 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
vscode 配置 python3开发环境的方法
2019/09/19 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
Solaris操作系统的线程机制
2012/12/23 面试题
客服服务心得体会
2013/12/30 职场文书
运动会广播稿100字
2014/01/11 职场文书
大学军训感言1000字
2014/02/25 职场文书
图书馆标语
2014/06/19 职场文书
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
离职信范本
2015/06/23 职场文书
计算机教师工作总结
2015/08/13 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫