`
garyli
  • 浏览: 172221 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

仿iPhone开关式按钮(jQuery+CSS3)

阅读更多

仿iPhone开关式按钮(jQuery+CSS3)

 

001 <!DOCTYPE html>
002 <html>
003 <head>
004 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
005 <meta name="author" content="pandao QQ:272383090" />
006 <title>仿iPhone开关式按钮(jQuery+CSS3)</title>
007 <style type="text/css">
008 *{margin:0;padding:0;}
009 body{font-size:14px;color:#444;font-family:"微软雅黑",Arial;background:#fff;padding:50px;}
010 a{color:#444;text-decoration: none;}
011 a:hover{color:#065BC2;text-decoration: none;}
012 .clear{clear:both;}
013 img{border:none;vertical-align: middle;}
014 ul{list-style: none;}
015 .mwui-switch-btn{
016     width:84px; 
017     display:block;
018     padding:1px;
019     background:#3B75FD;
020     overflow:hidden;
021     margin-bottom:5px;
022     border:1px solid #2E58C1;
023     border-radius:18px;
024     cursor: pointer;
025 }
026 .mwui-switch-btn span{
027     width:32px;
028     font-size:14px;
029     height:18px;
030     padding:4px 5px 2px 5px;
031     display:block;
032     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f6f6f6,endColorstr=#eeeeee,grandientType=1);
033     background:-webkit-gradient(linear, 0 0, 0 100%, from(#f6f6f6), to(#eeeeee));
034     background:-moz-linear-gradient(top, #f6f6f6, #eeeeee);
035     border-radius:18px;
036     float:left;
037     color:#3B75FD;
038     text-align:center;
039 }
040 .mwui-switch-btn:hover span{
041     background:#fff;
042 }
043 .mwui-switch-btn span.off{float:right;}
044 input[type='submit']{padding:5px 10px;cursor: pointer;}
045 </style>
046 </head>
047 <body>
048 <form method="post">
049     显示图标1:<button class="mwui-switch-btn"><span change="开" class="off">关</span><inputtype="hidden" name="show_icon" value="0" /></button>
050     显示顶栏1:<button class="mwui-switch-btn"><span change="关">开</span><input type="hidden" name="open_topbar" value="1" /></button>
051     <br />
052     显示图标2:<button class="mwui-switch-btn"><span change="OFF">ON</span><input type="hidden" name="show_icon2" value="1" /></button>
053     显示顶栏2:<button class="mwui-switch-btn"><span change="ON" class="off">OFF</span><input type="hidden" name="open_topbar2" value="0" /></button>
054     <br />
055     <input type="submit" id="submit" value="提交" />
056 </form>
057 <div id="debuger"></div>
058 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
059 <script type="text/javascript">
060     $(function() {
061         $('.mwui-switch-btn').each(function() {
062             $(this).bind("click", function() {
063                 var btn = $(this).find("span");
064                 var change = btn.attr("change");
065                 btn.toggleClass('off');
066  
067                 if(btn.attr("class") == 'off') {
068                     $(this).find("input").val("0");
069                     btn.attr("change", btn.html());
070                     btn.html(change);
071                 } else {
072                     $(this).find("input").val("1");
073                     btn.attr("change", btn.html());
074                     btn.html(change);
075                 
076  
077                 return false;
078             });
079         });
080  
081         $("#submit").click(function() {
082             var form = $(this).parent()[0];
083             var inputs = form.getElementsByTagName('input');
084             var params = [];
085             $('#debuger').html('');
086  
087             for (var i=0; i < inputs.length; i++) {
088                 params.push(inputs[i].name+"="+inputs[i].value);
089             }
090  
091             $.post("post.php", params.join("&")+"&temp="+Math.random(), function(data) {
092                 $('#debuger').html(data);
093             });
094  
095             return false;  
096         });
097     });
098 </script>
099 </body>
100 </html>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics