关闭

jQuery Mobile 滑动显示面板

723人阅读 评论(0) 收藏 举报
分类:
<!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>

这里写图片描述

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:96077次
    • 积分:2612
    • 等级:
    • 排名:第14024名
    • 原创:170篇
    • 转载:5篇
    • 译文:0篇
    • 评论:16条
    最新评论