jQuery Mobile panel的相關屬性

時間  2019-11-16
標籤 jquery mobile panel 相關 屬性 欄目 JQuery 简体版
原文   原文鏈接

參考網站：http://www.lampweb.org/jquerymobile/19/64.html

面板 data-role="panel"

在一個 jQuery Mobile 「page」中，面板與「header」、「footer」、「content」，必須是兄弟元素。能夠在它們以前或以後添加面板的標記，但不在它們中間添加。注：此約束將在將來的版本中刪除。css

<div data-role="page"> 	
<div data-role="panel" id="mypanel"> 
<!-- panel content goes here --> 
</div> <!-- /panel --> 
<!-- header --> 
<!-- content --> 
<!-- footer --> 
</div> <!-- page -->

另外，添加面板的標記在頁眉、內容、頁腳的後面，也可能正好是「page」容器結束符以前。在代碼順序中的放置面板標記的位置，將取決於，在C等級（僅HTML）或屏幕閱讀器，你想要的如何給讀者展現內容。html

一個包含「panel」（面板）的「page」(頁面)，若是這個框架包含的標題，內容和頁腳節在一個div，當以顯示的模式"reveal"或"push"打開這個面板的時候，轉場被應用於此容器。固定的頁眉和頁腳是個例外。那些不包括在此容器內的，但將與它的轉場是同步的。注意你的全部可見的網頁內容應該生活在這些頁面部分。jquery

爲了不打開面板時閃爍，咱們迫使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 事件。web

$( "#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">  
    		 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> 
				 href="#demo-links" data-rel="close" data-role="button" data-theme="c" data-icon="delete" data-inline="true" Close panel  
			</div> <!-- /content wrapper for padding --> 
            				
		</div> <!-- /defaultpanel --> 
	</div> 
</body> 
</html>  
<a><a></a>

 

關閉面板

  • 點擊面板連接，打開面板，向左或向右滑出。敲擊ESC鍵，關閉面板。取消此「關閉行爲」，給面板加上 data-swipe-close="false" 屬性。
  • 默認狀況下，點擊「page」以內，「panel」以外的內容部分，面板也能夠關閉。爲了防止這種行爲，給面板加上 data-dismissible="false" 屬性。
  • 面板和頁面也可能肩並肩地並排在屏幕上。爲了防止誤點擊，只有應用編程的方式。
  • 在面板內的添加關閉按鈕也很常見。添加連接，將關閉面板，添加 data-rel="close" 屬性。單擊時，jqm框架關閉面板。爲了確保這一環節正常運行，防止若是JavaScript不可用，是很重要的，所以超連接指向的頁面的ID，這樣當點擊按鈕的時候，將會跳回。
//使用面板的關閉方法來關閉面板 
$( "#idofpanel" ).panel( "close" );
 
//點擊頭部欄中的按鈕打開面板，頭部欄ID值my-header。面板內的關閉按鈕以下： 
 href="#my-header" data-rel="close"Close panel 
<a></a>

面板動畫

若是瀏覽器支持3D變換，面板將有動畫，同一標準的CSS動畫支持咱們使用的頁面轉換。面板的動畫使用translateX CSS 變換以確保他們的硬件加速和光滑。app

jQuery Mobile 框架有一個功能，試驗檢測所需的CSS屬性支持，若是不可用，將回落到一個簡單的隱藏/顯示。通過完全的測試，非動畫面板的能力較差，由於沒有起伏平臺動畫一個比一個簡單的隱藏/顯示更好的體驗。框架

動畫選項容許你關閉面板動畫的全部設備。關閉動畫經過給面板容器HTML標記，添加 data-animate="false" 屬性。ide

打開面板時，使用硬件加速觸發頁面初始化期間來防止眨眼。由於這增長了內存的使用，若是你使用長的列表或腳本動態注入頁面上的內容與動畫面板，你必須意識到效率問題。工具

面板定位

面板的顯示位置是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 類網頁包裝器（不是面板）。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程