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

仿iPhone开关按钮

最新推荐文章于 2021-06-05 07:56:29 发布

原创最新推荐文章于 2021-06-05 07:56:29 发布 · 443 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #php #ViewUI

Javascript 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个使用jQuery和CSS3实现的仿iPhone风格开关按钮组件。该组件具备良好的交互体验，可通过点击切换开关状态，并更新隐藏表单字段的值。文章提供了完整的HTML、CSS和JavaScript代码。

仿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>