js实现iPhone界面风格的单选框和复选框按钮实例
发布时间:2020-12-14 23:11:13 所属栏目:资源 来源:网络整理
导读:本篇章节讲解js实现iPhone界面风格的单选框和复选框按钮。供大家参考研究。具体如下: 这里使用JS美化仿iPhone风格的单选框和复选框按钮效果,使用了jQuery代码,附有完整实例及使用方法,现在,iPhone风格确实流行,希望大家也喜欢。 运行效果截图
本篇章节讲解js实现iPhone界面风格的单选框和复选框按钮。分享给大家供大家参考。具体如下: 这里使用JS美化仿iPhone风格的单选框和复选框按钮效果,使用了jQuery代码,附有完整实例及使用方法,现在,iPhone风格确实流行,希望大家也喜欢。 运行效果截图如下: 在线演示地址如下: http://demo.aspzz.cn/js/2015/js-iphone-radio-checkbox-button-codes/ 具体代码如下: <!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',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',true); }); $(".cb-disable").click(function(){ var parent = $(this).parents('.switch'); $('.cb-enable',false); }); });</code> </pre> <h3><span>Step 3</span> The CSS</h3> <pre><code> .cb-enable,.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程序设计有所帮助。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |