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 基础学习笔记之文档处理
May 29 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
May 03 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
Jan 13 Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
vue实现条件叠加搜索的解决方法
May 28 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
浅析js实现网页截图的两种方式
Nov 01 Javascript
Vue实现简易购物车页面
Dec 30 Vue.js
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使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
用原生JS获取CLASS对象(很简单实用)
2014/10/15 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
[54:27]TNC vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
Python聚类算法之DBSACN实例分析
2015/11/20 Python
浅析Python四种数据类型
2018/09/26 Python
python画图常规设置方式
2020/03/05 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
工作中个人的自我评价
2013/12/31 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
英文推荐信格式范文
2014/05/09 职场文书
2014年助理工程师工作总结
2014/11/14 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
《分数的意义》教学反思
2016/02/20 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python