面板 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 类网页包装器(不是面板)。