参考网站：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">

    		<a href="#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>

				<a href="#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。面板内的关闭按钮如下：

<a href="#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 ...

随机推荐

Android中图片的三级缓存策略
在开发过程中,经常会碰到进行请求大量的网络图片的样例.假设处理的不好.非常easy造成oom.对于避免oom的方法,无非就是进行图片的压缩.及时的回收不用的图片.这些看似简单可是处理起来事实上涉及的知 ...
swoole-1.7.18 版本已发布，支持 PHP7
swoole-1.7.18 版本已发布,支持 PHP7 matyhtf 发布于: 2015年07月23日 (22评) 分享到: 收藏 +16 3月19日,深圳源创会火热报名中,go>> ...
raw flash vs FTL
1. 区别 raw flash devices: NAND, NOR, OneNAND, etc,其被作为MTD设备处理(既不是字符设备,也不是块设备). FTL device:Flash Trans ...
Sublime 中 SFTP插件的使用
首先说明的是Sumblime Text 3,下载安装后,打开软件, 按下Ctrl+Shift+P调出命令面板, 按回车键后弹出下面的然后点击左上角的文件 >SFTP/FTP > Se ...
Linq源代码阅读
在 System.Core dotnet451\source\ndp\fx\src\core\system\linq\enumerable.cs Where 和 Select 内 ,把数组和List分 ...
unity 多选枚举
首先是自定义 using UnityEngine; using System.Collections; using UnityEditor; public class EnumFlagsAttribu ...
win10输入法设置
控制面板中: ok.
集合 Vector ArrayList 集合一
集合是存储对象的,与对象数组不同,集合可以自动的扩大自己的容量,像StringBuffer一样,存储的对象类型可以不一致,(object数组). 方法: add();remove();get();se ...
关于 JavaScript 学习 —— 好的博客或者网站推荐
作者:Tw93链接:https://www.zhihu.com/question/19651401/answer/46211739来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...

jQuery Mobile panel的相关属性