本文来源于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. 纯js实现div内图片自适应大小

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

  2. 新闻动态切换图片html(flash)

    效果图: 代码: <table id="table_zi"> <tr> <td class="width330"> < ...

  3. myeclipse中java文件头注释格式设置

    转载:http://www.blogjava.net/yxhxj2006/archive/2014/01/14/408940.html myeclipse中java文件头注释格式设置  windows ...

  4. 使用 Mockito 单元测试 – 教程

    tanyuanji@126.com 版本历史 - - - - 使用 Mockito 进行测试 该教程主要讲解 Mockito 框架在Eclipse IDE 中的使用   目录 tanyuanji@12 ...

  5. 自学Python的点滴

    1.第一天 注释 ——任何在#符号右面的内容都是注释. 注释主要作为提供给程序读者的笔记. 程序应该包含这两行 #!/user/bin/python #Filename:**.py 2.在程序中打开P ...

  6. Android中图片的目录

    图片放在hdpi及在mdpi中的效果是不一样的 http://blog.csdn.net/loongggdroid/article/details/9469935

  7. PHP CI框架下,如果配置NGINX(根目录和子目录两种模式)

    摸索了一会儿,先配置成功,再看看PATH_INFO之类的东东吧. A,根目录: location ~ \.php($|/) { root html; fastcgi_pass ; fastcgi_in ...

  8. ET 与RETI 基于51单片机中断跳出指令“RETI”浅议

    最近在基于51单片机编程的过程中出现了个很奇怪的问题“程序执行中在寄存器EA=1,ET0=1,TR0=1条件下,单TF0=1时并没有执行中断”.在有过单片机中断编程经历者都知道当EA=1,ET0=1的 ...

  9. 《Programming WPF》翻译 第3章 3.内嵌控件

    原文:<Programming WPF>翻译 第3章 3.内嵌控件 WPF提供了一系列内嵌控件.其中大多数符合标准的你已经熟悉的Windows控件类型.注意到没有一个是包装在旧的Win32 ...

  10. WPF笔记(2.9和2.10)——Layout

    原文:WPF笔记(2.9和2.10)--Layout 2.9讲的是,如果内部设定超过容器大小,怎么办?StackPanel会裁剪越界部分DockPanel和Grid会智能判断,从而决定换行. 2.10 ...