关闭

jQuery Mobile 滑动显示面板

1015人阅读 评论(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网站的观点或立场

jquery mobile panel 独立于content滚动问题

我用panel做一个右侧菜单,panel加了如下css: .ui-panel-inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: scroll; -we...
  • idlqy
  • idlqy
  • 2014-05-20 17:00
  • 590

【jQueryMobile】使用jQueryMobile实现滑动翻页的效果

滑动手势在移动设备是很流行的,在移动设备中滑动翻页中很常见 虽然这个功能可以在jQueryMobile中实现,但是个人与之前写的《【jQuery】论手机浏览器中拖拽动作的艰难性》(点击打开链接)中的观点一直,由于这是在手机浏览器中浏览,而不是安卓的一个独立APP,所以不要经常除点击以外的移动设备手势...
  • yongh701
  • yongh701
  • 2014-12-11 20:19
  • 3203

基于JS实现移动端左滑删除功能

HTML<div class="wrap pay-wrap" id="lists"> @foreach (var item in Model) { <div class="pay-list" s...
  • afcl0514
  • afcl0514
  • 2017-11-20 15:53
  • 573

利用jquery.mobile的swipeleft开发左右滑动功能

先看看效果:
  • ly7826
  • ly7826
  • 2014-07-11 15:51
  • 1969

15 款为jQuery Mobile定制的插件推荐

jQuery Mobile 1.0 已经发布了, 做为jQuery的移动设备类库, 并且依靠着jQuery这个极其受欢迎的类库,必将带给大家不一样的使用体验,基于jQuery Mobile的插件开发必定也会非常受欢迎,今天我们为大家推荐15款最新的jQuery Mobile上使用的jQuery插件,...
  • hmy1106
  • hmy1106
  • 2015-04-01 23:08
  • 846

jqeury mobile swiperight swiperight 左右滑动使用方法和遇到的问题

今天在使用jqeury mobile swiperight swiperight 左右滑动切换page页面时出现了问题,反应慢和被浏览器当成前进后退 后来百度无果,换了bing.com才找到解决方案 jQuery Mobile Swipe swipe 事件在用户...
  • q616804668
  • q616804668
  • 2015-02-08 22:01
  • 3938

jQuery Mobile 表单滑动条和开关

1、jQuery Mobile 滑动条控件 滑动条允许您从一个范围的数字中选择一个值: 滑块控件 进度:   使用以下属性来规定限制: (1)、max ...
  • qq_27626333
  • qq_27626333
  • 2016-07-20 21:46
  • 1893

Android+Jquery Mobile学习系列(6)-个人信息设置

转载:http://blessht.iteye.com/blog/2047980 Android+Jquery Mobile学习系列(6)-个人信息设置   本节开始,进行代码的实战练习。我的这个App是管理保险客户信息的,数据采用Sqlite存储...
  • feixiangdexin123087
  • feixiangdexin123087
  • 2015-01-12 18:37
  • 1866

基于jQuery的左滑出现删除按钮

最近在做项目的时候遇到了个需求,在网页上实现类似于QQ会话列表那样子的左滑出现删除按钮的效果,于是尝试着写了一个,写出来与大家交流分享,大神勿喷。基本要求由于我们是在做一个跨平台的APP,里面部分界面其实就是WebView加载的网页,因此需要使用网页实现这样的效果:往左滑动时,显示删除按钮,再往右滑...
  • smile_watermelon
  • smile_watermelon
  • 2015-06-05 19:15
  • 26350

jQuery Mobile样式加载问题

转自:http://m.blog.csdn.net/blog/killzero/17259391 RT。我是初步接触jQuery Mobile.刚开始使用,在进行页面跳转时,发生了问题。 问题描述:A.html为首页,点击导航之后进入B.html页面,在B.html页面,通过一个标签跳转回到首页...
  • zj23qq
  • zj23qq
  • 2015-11-06 15:15
  • 957
    个人资料
    • 访问:185532次
    • 积分:3623
    • 等级:
    • 排名:第10529名
    • 原创:186篇
    • 转载:5篇
    • 译文:0篇
    • 评论:34条
    最新评论