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

最新推荐文章于 2021-06-27 18:20:27 发布

iteye_6281

最新推荐文章于 2021-06-27 18:20:27 发布

阅读量365

点赞数

分类专栏： Javascript 文章标签：前端 javascript php ViewUI

本文链接：https://blog.csdn.net/iteye_6281/article/details/82575866

版权

Javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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

 
     001<!DOCTYPE html>
 
<html> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<meta name="author" content="pandao QQ:272383090" /> 
 
<title>仿iPhone开关式按钮(jQuery+CSS3)</title> 
 
<style type="text/css"> 
 
     008*{margin:0;padding:0;}
 
     009body{font-size:14px;color:#444;font-family:"微软雅黑",Arial;background:#fff;padding:50px;}
 
     010a{color:#444;text-decoration: none;}
 
     011a:hover{color:#065BC2;text-decoration: none;}
 
clear{clear:both;}
 
     013img{border:none;vertical-align: middle;}
 
     014ul{list-style: none;}
 
mwui-switch-btn{
 
    width:84px;  
 
    display:block; 
 
    padding:1px; 
 
    background:#3B75FD; 
 
    overflow:hidden; 
 
    margin-bottom:5px; 
 
    border:1px solid #2E58C1; 
 
    border-radius:18px; 
 
    cursor: pointer; 
 
     025}
 
mwui-switch-btn span{
 
    width:32px; 
 
    font-size:14px; 
 
    height:18px; 
 
    padding:4px 5px 2px 5px; 
 
    display:block; 
 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f6f6f6,endColorstr=#eeeeee,grandientType=1); 
 
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#f6f6f6), to(#eeeeee)); 
 
    background:-moz-linear-gradient(top, #f6f6f6, #eeeeee); 
 
    border-radius:18px; 
 
    float:left; 
 
    color:#3B75FD; 
 
    text-align:center; 
 
     039}
 
mwui-switch-btn:hover span{
 
    background:#fff; 
 
     042}
 
mwui-switch-btn span.off{float:right;}
 
     044input[type='submit']{padding:5px 10px;cursor: pointer;}
 
</style> 
 
</head> 
 
<body> 
 
<form method="post"> 
 
    显示图标1：<button class="mwui-switch-btn"><span change="开" class="off">关</span><inputtype="hidden" name="show_icon" value="0" /></button> 
 
    显示顶栏1：<button class="mwui-switch-btn"><span change="关">开</span><input type="hidden" name="open_topbar" value="1" /></button> 
 
    <br /> 
 
    显示图标2：<button class="mwui-switch-btn"><span change="OFF">ON</span><input type="hidden" name="show_icon2" value="1" /></button> 
 
    显示顶栏2：<button class="mwui-switch-btn"><span change="ON" class="off">OFF</span><input type="hidden" name="open_topbar2" value="0" /></button> 
 
    <br /> 
 
    <input type="submit" id="submit" value="提交" /> 
 
</form> 
 
<div id="debuger"></div> 
 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
 
<script type="text/javascript"> 
 
    $(function() { 
 
        $('.mwui-switch-btn').each(function() { 
 
            $(this).bind("click", function() { 
 
                var btn = $(this).find("span"); 
 
                var change = btn.attr("change"); 
 
                btn.toggleClass('off'); 
 
     066 
 
                if(btn.attr("class") == 'off') { 
 
                    $(this).find("input").val("0"); 
 
                    btn.attr("change", btn.html()); 
 
                    btn.html(change); 
 
                } else { 
 
                    $(this).find("input").val("1"); 
 
                    btn.attr("change", btn.html()); 
 
                    btn.html(change); 
 
                }  
 
     076 
 
                return false; 
 
            }); 
 
        }); 
 
     080 
 
        $("#submit").click(function() { 
 
            var form = $(this).parent()[0]; 
 
            var inputs = form.getElementsByTagName('input'); 
 
            var params = []; 
 
            $('#debuger').html(''); 
 
     086 
 
            for (var i=0; i < inputs.length; i++) { 
 
                params.push(inputs[i].name+"="+inputs[i].value); 
 
            } 
 
     090 
 
            $.post("post.php", params.join("&")+"&temp="+Math.random(), function(data) { 
 
                $('#debuger').html(data); 
 
            }); 
 
     094 
 
            return false;   
 
        }); 
 
    }); 
 
     098</script>
 
</body> 
 
</html>