jQuery Mobile 滑动显示面板

原创 2016年08月29日 19:27:15
<!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.swipe.js非常经典的啊!

移动开发中的上下左右滑动插件jquery.swipe.js 移动(手机+平板)开发中经常会用到手指滑动时调用某些方法,成熟的框架如jQuery mobile,zepto等都有相关的封装,但是...

jQuery效果之滑动面板

无标题文档 $(document).ready(function(){               $('.box a').click(function(){  ...

jQuery Mobile 面板

1、jQuery Mobile 面板   jQuery Mobile 中的面板会在屏幕的左侧向右侧划出。通过向指定 id 的 元素添加 data-role="panel" 属性来创建面板。在 中...

jQuery mobile 学习08 内容区域的列表显示 data-role="listview"

jQuery mobile 学习08 内容区域的列表显示 data-role="listview"

Jquery Mobile 實現登錄,資料顯示 ,有源碼

1.Jquery Mobile 實現簡單登錄 2.用cookie記住密碼有效期7天,下次自動自動登錄 3.未登錄的進入主頁,自動跳轉登錄畫面 4.實現簡單的數據顯示 5.採用了Sqlite數據庫測試

jQuery mobile 学习11 listview 列表显示 带图

jQuery mobile 学习11 listview 列表显示 带图

jQuery Mobile(jqm)按钮的隐藏和显示,包括a标签,圆角和非圆角按钮

在移动互联网时代,HTML5开发越来越收到
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)