jquery ajax_jQuery Mobile实现侧边栏滑动菜单效果代码

时间:2019-10-05  来源:jquery  阅读:

话说使用jQuery已经有好几年了,从最开始的1.4到现在的2.1,越用越觉得方便,jQuery有一个移动开发的插件,那就是jQuery Mobile,一直有没有使用过这个插件,今天兴致好就试着制作一个侧边栏滑动菜单,效果还不错,现在分享给大家。

准备工作

我们需要jQuery.min.js和jQuery.mobile.min.js文件,还有jQuery.mobile.min.css文件,将他们添加到我们的网页中。

jquery.mobile-1.0rc2.min.css" />
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0rc2.min.js"></script>


HTML代码

我们先添加菜单的HTML代码,默认状态下不显示在页面上。

   

Menu


   
       
  • Home
            About
            Portfolio
            Contact
       

    编写内容的HTML,我们需要一个按钮来让菜单显示。


       
        Menu
           

    FB Style Menu


       
       
           

    Note: You can swipe right/left to show/close menu.


       

    CSS代码

    body {
        -webkit-text-size-adjust: none;
        background: #5a5959 url(../images/menuBg.gif) top left repeat-y;
    }
    .pages h3 {
        font-size: 20px;
        margin: 0;
    }
    #menu {
        background-color: #5a5959;
        float: left;
        height: 100%;
        width: 165px;
    }
    #menu h3 {
        font-family: arial;
        font-size: 12px;
        color: #fff;
        margin: 0;
        padding: 4px 0 4px 10px;
        background: -webkit-gradient(linear,left top,left bottom,color-stop(5%,rgba(90,89,89,1)),color-stop(85%,rgba(66,65,65,1)));
        border-top: solid #6b6b6b 1px;
        border-bottom: solid #3d3d3d 1px;
        text-shadow: 0 -1px 1px #333;
    }
    #menu ul {
        margin: 0;
        padding: 0;
        width: inherit;
    }
    #menu ul li a:link,
    #menu ul li a:visited {
        border-bottom: solid #333 1px;
        box-shadow: 0 1px 0 #727272;
        color: #fff;
        display: block;
        font-family: arial;
        font-size: 14px;
        padding: 10px 0 10px 10px;
        text-decoration: none;
        text-shadow: 0 1px 1px #000;
        width: 165px;
    }
    #menu ul li a:hover,
    #menu ul li a:active {
        background-color: #716f6f;
    }
    .ui-body-c {
        background-color: #fff;
        line-height: 18px;
    }
    .active {
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(30,29,29,1)),color-stop(21%,rgba(56,55,55,1)));
        color: #fff;
        text-shadow: 0 1px 1px #000;
    }

    JavaScript代码

    $(document).bind("mobileinit", function () {
        $.mobile.pushStateEnabled = true;
    });
    $(function () {
        var menuStatus;
        var show = function() {
            if(menuStatus) {
                return;
            }
            $("#menu").show();
            $.mobile.activePage.animate({
                marginLeft: "165px",
            }, 300, function () {
                menuStatus = true
            });
        };
        var hide = function() {
            if(!menuStatus) {
                return;
            }
            $.mobile.activePage.animate({
                marginLeft: "0px",
            }, 300, function () {
                menuStatus = false
                $("#menu").hide();
            });
        };
        var toggle = function() {
            if (!menuStatus) {
                show();
            } else {
                hide();
            }
            return false;
        };
        // Show/hide the menu
        $("a.showMenu").click(toggle);
        $("#menu, .pages").live("swipeleft", hide);
        $(".pages").live("swiperight", show);
        $("div[data-role="page"]").live("pagebeforeshow", function (event, ui) {
            menuStatus = false;
            $(".pages").css("margin-left", "0");
        });
        // Menu behaviour
        $("#menu li a").click(function () {
            var p = $(this).parent();
            p.siblings().removeClass("active");
            p.addClass("active");
        });
    });

    好了,以上就是这个效果的全部代码。 

    jquery ajax_jQuery Mobile实现侧边栏滑动菜单效果代码

    http://m.bbyears.com/wangyezhizuo/71429.html

    推荐访问:jquery获取select选中的值
  • 相关阅读 猜你喜欢
    本类排行 本类最新