zoukankan      html  css  js  c++  java

  • 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">  
    		<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-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 {
 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 类网页包装器（不是面板）。
  • 相关阅读:
    你是怎么把字符串“2016-11-16” 变为 “16/11/2016” 的？
    js-------》(小效果)实现倒计时及时间对象
    Ruby方法
    JAVASCRIPT事件详解-------原生事件基础....
    html5的小知识点小集合
    原生js实现的效果
    IDEA 实用功能Auto Import：自动优化导包（自动删除、导入包）
    8.SpringBoot 模板引擎 Thymeleaf
    7.SpringBoot 之 Web
    6.日志的使用
  • 原文地址：https://www.cnblogs.com/Stephenchao/p/3930441.html
Copyright © 2011-2022 走看看