本文来源于www.ifyao.com禁止转载!www.ifyao.com

我就简短的总结一下:

Panel位置:data-position属性控制:值:left,right,

显示方式:data-display属性   值:reveal默认在页面之下,overlay页面上,push和页面统一,将页面推开。

Panel应该放在header,content,footer之前或者之后,但是不能再page外面。

比如这样

Source code    
<div data-role="page">
 
<div data-role="panel" id="mypanel">
    <!-- panel content goes here -->
</div><!-- /panel -->
 
<!-- header -->
<!-- content -->
<!-- footer -->
 
</div><!-- page -->

当想要动态添加content或者是隐藏的内容可见是,应该触发事件:

$( "#mypanel" ).trigger( "updatelayout" );
框架会检查panel的高度,当content的高度超过了屏幕的高度时,它将会被设置成min-height,同时,panel会滚动。
data-swipe-close="false"可以设置Panel打开后不能通过点击页面关闭Panel
data-dismissible="false"

panel里面添加一个按钮, 加上data-rel="close"可以关闭Panel
data-animate="false"关闭panel动画

data-position-fixed="true"会防止panel滚动和无法访问。
overflow有可能只显示没有被绝对定位的Panel。
当Panel内的菜单内容太长以至于超出屏幕宽度时,fixed状态会被取消,使得Panel可以滚动。

框架,panel用DIV包含,class="ui-panel-inner" 默认有15个像素padding

Panel有一个固定宽度17em
可以在Panel框架上添加data-theme或者设置data-theme="none"并设置自己的样式。注意加Padding。

以上内容取自官方demo,本人翻译,未经允许禁止转载!

本文来源于www.ifyao.com禁止转载!www.ifyao.com

jQuery Moblile Demos学习记录Panel的更多相关文章

  1. jQuery Moblile Demos学习记录Theming、Button、Icons图标,脑子真的不好使。

    jQuery Moblile Demos学习记录Theming.Button.Icons图标,脑子真的不好使. 06. 二 / Jquery Mobile 前端 / 没有评论   本文来源于www.i ...

  2. 【jQuery】精细学习记录

    [jQuery]精细学习记录 基础 基本语法: $(选择器).action(回调函数); $/jQuery //jQuery核心函数 $(选择器) //获得的jQuery对象 jQuery核心 - j ...

  3. 关于jquery.noConflict()的学习记录

    今天无意中看到了jquery.noConfict()的实现方法 代码如下: var // Map over jQuery in case of overwrite _jQuery = window.j ...

  4. 20170811 JQuery基础知识学习记录(一)

    基本写法 $(selector).action() $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有 <p> 元素 $(&quo ...

  5. Jquery基础教程第二版学习记录

    本文仅为个人jquery基础的学习,简单的记录以备忘. 在线手册:http://www.php100.com/manual/jquery/第一章:jquery入门基础jquery知识:jquery能做 ...

  6. 【Bootstrap5】精细学习记录

    [Bootstrap5]精细学习记录 Bootstrap模板 <!DOCTYPE html> <html> <head> <title>Bootstra ...

  7. D3.js学习记录【转】【新】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. Echarts学习记录——如何去掉网格线及网格区域颜色

    关键属性 splitLine和splitArea,可以设置相关的属性 示例代码 <!DOCTYPE html> <html lang="en"> <h ...

  9. Echarts学习记录——如何给x轴文字标签添加事件

    Echarts学习记录——如何给x轴文字标签添加事件 关键属性 axisLabel下属性clickable:true 并给图表添加单击事件 根据返回值判断点击的是哪里 感觉自己的方法有点变扭,有更好办 ...

随机推荐

  1. [转载]移动终端浏览器初始设置apple-mobile-web-app-capable

    这两句话的确很有用,有了它,手机访问的时候像样了. 原文地址:移动终端浏览器初始设置apple-mobile-web-app-capable作者:素水凌心 移动终端浏览器默认设置视口的宽度和初始规模. ...

  2. Jasper_sheetName_defined by parameter or hard coding or filed name

    1.根据传递的参数定义sheet name (jasper sheet name defined by parameter) (1) 获取后台参数 <parameter name="P ...

  3. 百度地图api实例

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm11.aspx ...

  4. nginx的url重写[rewrite规则和参考]

    本日志内容来自互联网和平日使用经验,整理一下方便日后参考. Nginx Rewrite 相关指令有 if.rewrite.set.return 等. if 的语法 应用于 server 和 locat ...

  5. POJ 2152 Fire(树形DP)

    题意: 思路:令F[i][j]表示 的最小费用.Best[i]表示以i为根节点的子树多有节点都找到负责消防站的最小费用. 好难的题... #include<algorithm> #incl ...

  6. HDU 4035 Maze(树形概率DP)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4035 题意:一棵树,从结点1出发,在每个结点 i 都有3种可能:(1)回到结点1 , 概率 Ki:(2 ...

  7. KEIL 程序定位

    用Keil做51的开发也4年多了,代码量基本上维持在5~10K左右,说大不大,说小也不小,也就是个中等货色.这段期间工作上难得有稍许的空间,潜心研究了一下keil中如何在 CODE中定位C程序的方法. ...

  8. 统计的基本操作语法 <第五篇>

    1.创建统计语法: CREATE STATISTICS statistics_name ON { table_or_indexed_view_name } ( column [ ,...n ] ) [ ...

  9. 《Programming WPF》翻译 第5章 7.控件模板

    原文:<Programming WPF>翻译 第5章 7.控件模板 如果仔细的看我们当前的TTT游戏,会发现Button对象并没有完全为我们工作.哪些TTT面板有内圆角? 图5-14 这里 ...

  10. paip.输入法编程---智能动态上屏码儿长调整--.txt

    paip.输入法编程---智能动态上屏码儿长调整--.txt 作者Attilax ,  EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csd ...