js实现iPhone界面风格的单选框和复选框按钮实例_javascript技巧
程序员文章站
2022-04-24 20:18:19
...
本文实例讲述了js实现iPhone界面风格的单选框和复选框按钮。分享给大家供大家参考。具体如下:
这里使用JS美化仿iPhone风格的单选框和复选框按钮效果,使用了jQuery代码,附有完整实例及使用方法,现在,iPhone风格确实流行,希望大家也喜欢。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/js-iphone-radio-checkbox-button-codes/
具体代码如下:
iPhone风格的单选框和复选框jQuery代码 iPhone风格的单选框和复选框jQuery代码
From DevGrow, a blog about designing, developing and growing your website.
The Example:
enable disable
Checkbox
The Prerequisites
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.
Step 1 The HTML
Step 2 The 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); }); });
Step 3 The CSS
.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; }
Compatability
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+
希望本文所述对大家的javascript程序设计有所帮助。
下一篇: html和css的编码规范
推荐阅读
-
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)_javascript技巧
-
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例_javascript技巧
-
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例_javascript技巧
-
JS返回上一页实例代码通过图片和按钮分别实现_javascript技巧
-
js实现仿Windows风格选项卡和按钮效果实例_javascript技巧
-
js实现iPhone界面风格的单选框和复选框按钮实例_javascript技巧
-
js实现仿Windows风格选项卡和按钮效果实例_javascript技巧
-
JS返回上一页实例代码通过图片和按钮分别实现_javascript技巧
-
js全选实现和判断是否有复选框选中的方法_javascript技巧
-
js实现iPhone界面风格的单选框和复选框按钮实例_javascript技巧