koastal的博客

学如逆水行舟,不进则退

jQuery Mobile 滑动显示面板
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">

    <div data-role="panel" id="myPanel">
        <h2>List Dividers</h2>
        <ul data-role="listview">
            <li data-role="list-divider">欧洲</li>
            <li data-icon="false"><a href="#">德国</a></li>
            <li data-icon="false"><a href="#">英国</a></li>
            <li data-role="list-divider">亚洲</li>
            <li data-icon="false"><a href="#">中国</a></li>
            <li data-icon="false"><a href="#">印度</a></li>
            <li data-role="list-divider">非洲</li>
            <li data-icon="false"><a href="#">埃及</a></li>
            <li data-icon="false"><a href="#">南非</a></li>
        </ul>
    </div>


    <div data-role="header">
        <h1>页面头部</h1>
    </div>

    <div data-role="main" class="ui-content">
        <p>点击下面按钮打开面板。</p>
        <a href="#myPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">打开面板</a>
    </div>

    <div data-role="footer">
        <h1>页面底部</h1>
    </div>
</div>
<script>
    $("#pageone").on("swiperight",function(){
        //向右滑动,显示面板
        $("#myPanel").panel("open");
    });
</script>
</body>
</html>

这里写图片描述

阅读更多
个人分类: jQuery
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

jQuery Mobile 滑动显示面板

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭