面板
灵活的设计，使面板可以用在导航、表单、验证以及更多的场景中。
面板示例
左侧 面板示例
覆盖式 显式 推式右侧 面板示例
覆盖式 显式 推式面板在屏幕的位置由data-position属性决定。默认值是左边，即面板会在屏幕的左侧边缘出现。设置data-position="right"则指定了面板从屏幕右侧边缘出现。
面板展示的模式由data-display属性决定。默认值是显式，意思是面板会停靠在页面底部，并随着页面的滑动而展现。设置data-display="overlay"使面板出现在页面内容的顶层。第三种模式，推式，同时激活面板和页面。
面板标签摆放在哪儿
在一个手机网页中，面板标签必须和header,content以及footer元素处于同一级别。你可以把面板标签添加在这些元素的前面或者后面，但不要在中间。一个面板标签不能被放置在页面的外面，但是这一限制在未来的版本中将会被去除。
这里有一关于面板置于头部，内容以及脚部之前的例子:
<div data-role="page">
<div data-role="panel" id="mypanel">
<!-- panel content goes here -->
</div><!-- /panel -->
<!-- header -->
<!-- content -->
<!-- footer -->
</div><!-- page -->
亦或者，在源文件中面板标签也可以跟在header,content以及footer的后面，在页面容器的最尾部。你在源文件中摆放面板标签的位置取决于你想让用户如何通过C级盘(纯HTML)或者屏幕读取器去体验页面内容。
页面外部的面板
如果你想在多个页面复用一个面板你可以将面板标签置于页面外部。详见外置面板
动态内容
当你想动态地往面板里添加内容，或者让隐藏的内容在面板打开时显示，你必须要触发面板上的updatelayout事件，如
$( "#mypanel" ).trigger( "updatelayout" );
框架会重新检测面板内容的高度，如果它超出屏幕的高度，它将会将页面的最低高度设为该面板的高度，并且通过设置data-position-fixed使面板的高度不固定，同样详见面板定位。
打开面板
要从一个链接去控制一个面板，将href属性设为你要切换的面板的ID(比方说示例中的mypanel)。这会致使框架将此链接和该面板绑定。这个链接将会轮换面板的可见性，因此点击它将会打开面板，再点一下将会关闭面板。
默认面板关闭面板
点击那个打开面板的连接，向左或向右滑出，或者点击Esc键将关闭面板。 敲击ESC键，关闭面板。取消此“关闭行为”，给面板加上data-swipe-close="false" 属性。
默认情况下，点击“page”之内，“panel”之外的内容部分，面板也可以关闭。为了防止这种行为，给面板加上data-dismissible="false" 属性。面板和页面也可能肩并肩地并排在屏幕上。为了防止误点击，只有应用编程的方式。详情参见以下相关章节。
通常情况下也可以在面板内部增加一个关闭按钮。要点击一个链接来关闭面板，增加data-rel="close"属性来告知系统，当点击按钮时关闭面板。重要的是，要确保这个链接在没有javascript脚本时也能正常运行，因为我们推荐在href标签内填写用户将要跳转的页面的ID。比方说，按钮要打开的面板在头部，并且ID为my-header，则关闭的链接 应该是：
<a href="#my-header" data-rel="close">Close panel</a>
面板动画
如果浏览器支持3D变换，面板将有动画，同一标准的CSS动画支持我们使用的页面转换。面板的动画使用translateX CSS 变换以确保他们的硬件加速和光滑。
T动画选项允许你关闭面板动画的所有设备。关闭动画通过给面板容器HTML标记，添加 data-animate="false" 属性。
面板定位
面板的显示位置是CSS属性的绝对定位,这意味着面板将随着页面滚动。当一个面板是打开的状态的时候，jquery mobile 框架检查面板内容的底部是否在视图内，如果没有，它将会滚动到页面的顶部。
你可以设置一个面板的位置：position:fixed，并给面板添加 data-position-fixed="true"属性，所以，无论你滚动页面多远，其内容都会显示。
在使用固定定位之前，该框架还将检查面板内容是否适合该视口的大小，因为这一属性将会使得面板内容在滚动时不可见。overflow当前还不被鼓励使用。如果面板内容过长而不适合于视口内，JQM框架将会仅仅会展现面板，而不去固定它的位置。参见一个关于的面板示例。
面板样式
默认情况下，面板有非常简单的方式让你定制自己的需要。面板基本上只是简单的块无 margin，坐在一边的网页内容。该框架将面板的内容包含在一个div容器内，其CSS为ui-pannel-inner类，padding是15像素。如果需要，您可以重写此自定义CSS或使用选项classes.panelinner为div设置不同的类名称。
当打开面板时，面板有一个固定的宽度17em（272px），足以显示一些页面内容，在较宽的平板电脑或桌面屏幕，看起来还是不错的。给面板设置样式宽度是相当复杂的，但根据需要这些可以被重写CSS。
除了主题背景，宽度和高度100%样式，面板有对自己很小的造型。面板的默认主题是“C”。你可以通过面板容器添加 data-theme 的面板上设置一个不同的主题，或设置data-theme="none"添加您自己的CSS类样式。
注意，直接给面板容器增加padding,borders,或者margins将会改变面板整体的尺寸，并且有可能导致定位和动画被影响。要避免这样，给面板内容外部加上(.ui-panel-inner).样式。
让面板变得可以交互
当使用推式或者覆盖式时，面板将在打开时将页面推向一边。由于页面的一些内容被推出屏幕，面板就是模态化的，并且将被关闭，继而和页面内容进行再次交互。在大一点的屏幕上，你可能希望面板起到可折叠列一样的效果，可以打开，并且在面板的一侧被使用，来更好地利用屏幕的真正资源。
使页面一起工作，打开面板，它需要再流到一个窄的宽度以适合旁边的面板。这可以通过纯CSS添加一个左或右边缘与面板的宽度（17em）对网页内容的再流力。第二，看不见的层放置在页面上点击了解雇行为是隐藏的CSS你可以点击页面而不是关闭菜单。
这里是这些规则的一个例子，包裹在一个媒体查询仅适用于本以上的行为35em（560px）：
@media ( min-width: 35em ) {
/* wrap on wide viewports once open */
.ui-panel-page-content-open.ui-panel-page-content-position-left {
margin-right: 17em;
}
.ui-panel-page-content-open.ui-panel-page-content-position-right {
margin-left: 17em;
}
.ui-panel-page-content-open {
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-page-content-open.ui-panel-page-content-position-left.ui-panel-page-content-display-push {
margin-right: 17em;
}
.ui-panel-page-content-open.ui-panel-page-content-position-right.ui-panel-page-content-display-push {
margin-left: 17em;
}
.ui-panel-page-content-open.ui-panel-page-content-display-push {
width: auto;
}
.ui-panel-dismiss-display-push {
display: none;
}
}
应用预设断点
包含在组件样式内的是这样一个预设的断点。这个断点在默认下不被应用，以便让你更写出自定义的断点，更好的为你的内容和设计服务。要应用预设断点，当你要给页面容器使用额外的面板，以及固定的工具栏时，给页面加上ui-responsive-panel类样式。参见一个响应式面板 的示例。