jQuery Mobile panel的相关属性
参考网站：http://www.lampweb.org/jquerymobile/19/64.html
面板 data-role="panel"
在一个 jQuery Mobile “page”中，面板与“header”、“footer”、“content”，必须是兄弟元素。可以在它们之前或之后添加面板的标记，但不在它们中间添加。注：此约束将在未来的版本中删除。
<div data-role="page">
<div data-role="panel" id="mypanel">
<!-- panel content goes here -->
</div><!-- /panel -->
<!-- header -->
<!-- content -->
<!-- footer -->
</div> <!-- page -->
另外，添加面板的标记在页眉、内容、页脚的后面，也可能正好是“page”容器结束符之前。在代码顺序中的放置面板标记的位置，将取决于，在C等级（仅HTML）或屏幕阅读器，你想要的如何给读者展示内容。
一个包含“panel”（面板）的“page”(页面)，如果这个框架包含的标题，内容和页脚节在一个div，当以显示的模式"reveal"或"push"打开这个面板的时候，转场被应用于此容器。固定的页眉和页脚是个例外。那些不包括在此容器内的，但将与它的转场是同步的。注意你的所有可见的网页内容应该生活在这些页面部分。
为了避免打开面板时闪烁，我们迫使WebKit浏览器的硬件加速。如果容器有一个CSS多栏布局（列数），页面上的按钮表单元素，在CSS能引起的问题。要解决这个，必须在元素或其容器上，设置以下规则：
-webkit-transform: translate3d(0,0,0);
面板标记公约
面板的容器有个 data-role="panel" 属性 和 唯一的ID。此ID是链接或者按钮打开关闭面板的标识。
<div data-role="panel" id="mypanel">
<!-- panel content goes here -->
</div>
屏幕上的面板的位置设置使用 data-position 属性
- data-position=“left”，是默认值，意味着它将在屏幕的左边缘出现。
- data-position="right"，它出现的右边缘。
面板的显示模式设置使用 data-display 属性
- data-display=“reveal” ，默认值，将页面像幻灯片一样从屏幕划出，将面板显示出来
- data-display="overlay"，面板出现在页面内容顶部上层。
- data-display="push"，是同时“推动”的面板和页面。
<div data-role="panel" id="mypanel" data-position="right" data-display="push">
<!-- panel content goes here -->
</div>
动态内容
当面板打开在打开状态时，给面板动态地将内容或使面板隐藏内容可见，你必须在面板上触发 updatelayout 事件。
$( "#mypanel" ).trigger( "updatelayout" );
jquery mobile框架将检查面板内容的新高度，如果超过屏幕高度，设置页面为 min-height 能在屏幕高度下显示出来，并且新定位面板 data-position-fixed="true"。
打开面板
- 点击网页某个地方上的一个指向面板的链接。href 属性值是面板的 ID 值。点击它，打开面板，再次点击，关闭面板。
- 通过调用面板的 open方法直接切换。
- 默认在左侧显示面板。
<a href="#mypanel"> Open panel</a>
$( "#idofpanel" ).panel( "open" , optionsHash );
当使用标记来控制面板，一次只能打开一个单一的面板。点击下一个面板链接，上一个已经打开面板将自动关闭。这样做是为了保持标记只配置简单。
<!DOCTYPE html>
<html>
<head>
<title> Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"> </script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"> </script>
<style>
html, body { padding: 0; margin: 0; }
html, .ui-mobile, .ui-mobile body {
height: 435px;
}
.ui-mobile, .ui-mobile .ui-page {
min-height: 435px;
}
.ui-content{
padding:10px 15px 0px 15px;
}
.panel-content { padding:15px; }
</style>
</head>
<body>
<div data-role="page" style="max-height:440px; min-height:440px;">
<div data-role="header">
<h1> Panel Demo</h1>
</div>
<div data-role="content">
<ahref="#defaultpanel" data-role="button" data-inline="true" data-icon="bars">Default panel</a>
</div>
<!-- defaultpanel -->
<div data-role="panel" id="defaultpanel" data-theme="b"> <div class="panel-content">
<h3> Default panel options</h3>
<p> This panel has all the default options: positioned on the left with the reveal display mode. The panel markup is <em> before</em> the header, content and footer in the source order.</p>
<p> To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
<ahref="#demo-links" data-rel="close" data-role="button" data-theme="c" data-icon="delete" data-inline="true">Close panel</a>
</div> <!-- /content wrapper for padding --> </div><!-- /defaultpanel -->
</div>
</body>
</html>
关闭面板
- 点击面板链接，打开面板，向左或向右滑出。敲击ESC键，关闭面板。取消此“关闭行为”，给面板加上 data-swipe-close="false" 属性。
- 默认情况下，点击“page”之内，“panel”之外的内容部分，面板也可以关闭。为了防止这种行为，给面板加上 data-dismissible="false" 属性。
- 面板和页面也可能肩并肩地并排在屏幕上。为了防止误点击，只有应用编程的方式。
- 在面板内的添加关闭按钮也很常见。添加链接，将关闭面板，添加 data-rel="close" 属性。单击时，jqm框架关闭面板。为了确保这一环节正常运行，防止如果JavaScript不可用，是很重要的，因此超链接指向的页面的ID，这样当点击按钮的时候，将会跳回。
//使用面板的关闭方法来关闭面板
$( "#idofpanel" ).panel( "close" );//点击头部栏中的按钮打开面板，头部栏ID值my-header。面板内的关闭按钮如下：
<ahref="#my-header" data-rel="close">Close panel</a>
面板动画
如果浏览器支持3D变换，面板将有动画，同一标准的CSS动画支持我们使用的页面转换。面板的动画使用translateX CSS 变换以确保他们的硬件加速和光滑。
jQuery Mobile 框架有一个功能，试验检测所需的CSS属性支持，如果不可用，将回落到一个简单的隐藏/显示。经过彻底的测试，非动画面板的能力较差，因为没有起伏平台动画一个比一个简单的隐藏/显示更好的体验。
动画选项允许你关闭面板动画的所有设备。关闭动画通过给面板容器HTML标记，添加 data-animate="false" 属性。
打开面板时，使用硬件加速触发页面初始化期间来防止眨眼。因为这增加了内存的使用，如果你使用长的列表或脚本动态注入页面上的内容与动画面板，你必须意识到效率问题。
面板定位
面板的显示位置是CSS属性的绝对定位：position:absolute。这意味着面板将随着页面滚动。当一个面板是打开的状态的时候，jquery mobile 框架检查面板内容的底部是否在视图内，如果没有，面板滚动到页面顶部的。
你可以设置一个面板的位置：position:fixed，并给面板添加 data-position-fixed="true"属性，所以，无论你滚动页面多远，其内容都会显示。在固定定位前，jquery mobile 框架还检查是否面板的内容是否在视窗内。因为此属性将防止面板的内容从滚动和使用溢出不支持足够使用，在这个时候。如果面板内容太长，在视口内，框架将根本没有固定的定位显示面板。
在一般情况下，我们建议你把打开面板的按钮，放置在顶部。这将避免需要滚动，也使得过渡顺畅一点。
请注意，有固定的定位在Android WebView应用问题（而不是浏览器）会导致布局问题，尤其是当没有启用硬件加速。我们建议不如果部署到一个Android应用程序使用固定位置面板选项。同时，如果有一个固定在一个固定的网页的工具栏，工具栏可能不是过渡与页面内容。
面板的样式
默认情况下，面板有非常简单的方式让你定制自己的需要。面板基本上只是简单的块无 margin，坐在一边的网页内容。该框架将面板的内容包含在一个div容器内，其CSS为ui-pannel-inner类，padding是15像素。如果需要，您可以重写此自定义CSS或使用选项classes.panelinner为div设置不同的类名称。
当打开面板时，面板有一个固定的宽度17em（272px），足以显示一些页面内容，在较宽的平板电脑或桌面屏幕，看起来还是不错的。给面板设置样式宽度是相当复杂的，但根据需要这些可以被重写CSS。
注意：直接给面板容器添加 padding, borders, or margins 将改变整体尺寸，也可能导致的定位和动画的影响。为了避免这种情况，给面板内容容器应用样式（.ui-pannel-inner）。
除了主题背景，宽度和高度100%样式，面板有对自己很小的造型。面板的默认主题是“C”。你可以通过面板容器添加 data-theme 的面板上设置一个不同的主题，或设置data-theme="none"添加您自己的CSS类样式。
这个框架使用用于网页内容容器的主题。打开一个面板，显示模式reveal 或者 push，网页的主题将被设置为所使用的面板相同的主题。这样做是为了掩盖大部分移动浏览器还没有完成的画面板背景动画，打开它已经开始了时。如果你使用一个背景图像的网页，你必须将它设置为ui-body-* CSS类的主题，给你使用的页面，它将被用来作为背景的内容容器。
设置面板的响应
当推或揭示显示用面板，将页面一边打开时。因为有些页面是推画外，面板是模态的，必须关闭，再次与页面内容的互动。在更大的屏幕，可能有你想要的工作更像是一个可折叠的塔板，可以打开和一起使用的页面更好地利用屏幕房地产。
使页面一起工作，打开面板，它需要再流到一个窄的宽度以适合旁边的面板。这可以通过纯CSS添加一个左或右边缘与面板的宽度（17em）对网页内容的再流力。第二，看不见的层放置在页面上点击了解雇行为是隐藏的CSS你可以点击页面而不是关闭菜单。
这里是这些规则的一个例子，包裹在一个媒体查询仅适用于本以上的行为35em（560px）：
@media (min-width:35em) {
/* wrap on wide viewports once open */
.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-left,
.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-left,
.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-left,
.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-left {
margin-right: 17em;
}
.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-right,
.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-right,
.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right,
.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
margin-left: 17em;
}
.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push,
.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal {
width: auto;
}
/* disable "dismiss" on wide viewports */
.ui-panel-dismiss {
display: none;
}
/* same as the above but for panels with display mode "push" only */
.ui-panel-dismiss-display-push {
display: none;
}
}
应用预设断点
中包含的控件类型是一个断点，这种行为预设，踢在55em（880px）。此断点不是默认应用于使你编写自定义的断点，最适合你的内容和设计更容易。应用断点的预设，添加 ui-responsive-panel 类网页包装器（不是面板）。
jQuery Mobile panel的相关属性的更多相关文章
- 使用JQuery Mobile实现手机新闻浏览器
jQuery Mobile项目是jQuery项目下的在移动开发方面的又一力作,在本文中,笔者将带你一步步更深入学习使用jQuery Mobile框架去实现一个能在android手机上运行的新闻浏览器, ...
- JQuery Mobile页面的载入方式
1.JQM页面结构 jQuery Mobile是通过data-role属性来区分渲染界面样式的,JQM里面提供的data-role如下表: 参数 说明 page 页面容器,其内部的mobile元素将会 ...
- jQuery Mobile Data 属性
按钮 带有 data-role="button" 的超链接.button 元素.工具栏中的链接以及 input 字段都会自动渲染成按钮样式,不需要添加 data-role=&quo ...
- Jquery mobile div常用属性
组件 页面 jQuery Mobile 应用了 HTML5 标准的特性,在结构化的页面中完整的页面结构分为 header. content.footer 这三个主要区域. 在 body 中插入内容块: ...
- jQuery Mobile学习笔记
1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...
- jQuery Mobile 列表内容
jQuery Mobile 列表缩略图 对于大于 16x16px 的图像,请在链接中添加 <img> 元素. jQuery Mobile 将自动把图像调整至 80x80px: 实例: &l ...
- Jquery Mobile 小结
第一次做一个移动站点,当时纠结选Jquery Mobile还是Zepto,Zepto相对于JM更加轻巧,语法上面也很相似,但考虑到时间问题和JM自带了很多组件(Bootstrap惯出来的),还是选择了 ...
- 【初探移动前端开发05】jQuery Mobile (下)
前言 继续我们移动端的学习,今天到了List相关了. 本文例子请使用手机查看 List列表 在移动设备平台下,由于移动设备屏幕比较小,我们又是用手在上面点击的触屏方式,传统的列表模式在手机上就不太友好 ...
- 经典收藏 50个jQuery Mobile开发技巧集萃
http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 1.Backbone移动实例 这是在Safari中运行的一款Ba ...
随机推荐
- <LeetCode OJ> 26 / 264 / 313 Ugly Number （I / II / III）
Write a program to check whether a given number is an ugly number. Ugly numbers are positive numbers ...
- C语言中fgetc函数返回值为什么是int?
学习C语言的,文件操作,大都会用到它. 它的函数原型: 这个函数的返回值,是返回读取的一个字节.如果读到文件末尾返回EOF.EOF其实就是一个宏#define EOF (-1)表示-1.既然返回的是一 ...
- python学习之函数返回值
python中函数返回值的方式有2种: 1.return语句 说明:return语句执行完后,函数后续的代码将不会被执行 2.yield语句 说明:yield语句返回的是一个迭代器对象,可以通过nex ...
- springboot开启事务管理
spring中开启事务管理需要在xml配置文件中配置,springboot中采取java config的配置方式. 核心是@EnableTransactionManager注解,该注解即为开启事务管理 ...
- CentOS卸载系统自带的OpenJDK
查看目前系统的jdk: rpm -qa | grep jdk 得到的结果: $ rpm -qa | grep jdk java-1.6.0-openjdk-1.6.0.0-1.45.1.11.1.el ...
- 八款开源 Android 游戏引擎[转]
记录一下,以备不时之需~~~~~ 虽然android学了点点,然后现在又没学了(我为啥这么没有恒心呢大哭).以后有时间还是要继续学android的,一定要啊!虽然现在没学android游戏编程,不过还 ...
- LeetCode543. Diameter of Binary Tree
Description Given a binary tree, you need to compute the length of the diameter of the tree. The dia ...
- Eclipse 浏览(Navigate)菜单
浏览 Eclipse 工作空间 浏览(Navigate)菜单提供了多个菜单可以让你快速定位到指定资源. 上图中 Open Type, Open Type in Hierarchy 和 Open Res ...
- dm8148 开发之---sii9022a hdmi传输器
SiI9022A -HDMI 发送器 照相机.摄影机和便携式媒体播放器的高清解决方案 SiI9022a是一款超低功耗的HDMI发送器,集成度更高, 电源管理特性也更强,适用于手提式消费电子设 ...
- java字符编码详解
引用自:http://blog.csdn.net/jerry_bj/article/details/5714745 GBK.GB2312.iso-8859-1之间的区别 GB2312,由中华人民共和国 ...