在一个 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./mobile/latest/jquery.mobile.min.css" />
<script src="http://code./jquery-1.9.1.min.js"> </script>
<script src="http://code./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 类网页包装器（不是面板）。
