jQuery Mobile - 面板

描述

基本面板，從螢幕的左側或右側移動以顯示內容，使用data-role = "panel" 屬性。

示例

以下示例描述了在 jQuery Mobile 框架中使用面板。

<!DOCTYPE html>
<html>
   <head>
      <title>Panel</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <div data-role = "page" id = "page1">
         <div data-role = "panel" id = "panel1">
            <h2>This is Panel Header</h2>
            <p>You can close this panel by pressing the Esc key or by swiping.</p>
         </div>
         
         <div data-role  =  "header">
            <h2>Header</h2>
         </div>
         
         <div data-role  =  "main" class  =  "ui-content">
            <p>Click on the button to open Panel.</p>
            <a href = "#panel1" class = "ui-btn ui-btn-inline">Open Panel</a>
         </div>
         
         <div data-role = "footer">
            <h2>Footer</h2>
         </div>
      </div>
   </body>
</html>

輸出

讓我們執行以下步驟來檢視上述程式碼是如何工作的：

將上述 html 程式碼儲存為jqm_panels.html 檔案，放在伺服器根目錄下。
開啟此 HTML 檔案，地址為 https:///jqm_panels.html，將會顯示以下輸出。

面板標記

您可以在頁面內編寫面板內容，它與標題、內容和頁尾元素是同級元素。您不能在頁面外部編寫面板標記。它將具有以下格式。

<div data-role = "page">
   <div data-role = "panel" id = "panel1">
      <!-- panel content -->
   </div><!-- end of panel -->
   
   <!-- header -->
   <!-- content -->
   <!-- footer -->
</div><!-- end of page -->

動態內容

您可以動態地向面板新增內容，或者在面板開啟時隱藏內容，方法是在面板上使用updatelayout 事件，如下所示。

$( "#panel1" ).trigger( "updatelayout" );

它將檢查面板內容的高度，如果面板的高度超過了，則它將使用min-height 屬性設定內容的高度，並使用data-position-fixed = "true" 屬性設定面板的位置。

打開面板

您可以透過將href 屬性設定為面板的 id 來打開面板，這將連結與面板關聯起來。單擊連結時，它將打開面板，再次單擊時將關閉面板。

關閉面板

您可以透過單擊面板外部、向左或向右滑動或按 Esc 鍵來關閉面板。可以使用data-swipe-close = "false" 屬性關閉滑動效果。有時，您可以透過單擊面板外部來關閉面板；因此，您可以透過向面板新增data-dismissible = "false" 來避免此操作。還可以透過向面板新增data-rel = "close" 屬性來關閉面板。

面板動畫

如果您的瀏覽器支援 3D 變換，則可以在面板上使用動畫。使用translate3d(x,y,z) CSS 變換來為面板設定動畫。如果您不想使用動畫，則可以使用data-animate = "false" 屬性到面板容器。

面板定位

它指定了頁面中面板的位置，並使用position:absolute CSS 屬性顯示面板。在面板中使用position:fixed 屬性來顯示內容，並且無論您使用dataposition-fixed = "true" 屬性滾動頁面多少次，它都不會受到影響。如果內容過多，無法容納在頁面區域內，則框架將以非固定定位的方式顯示內容。

面板樣式

jQuery Mobile 框架為面板提供了樣式。預設情況下，面板將採用簡單的樣式，但您可以根據使用者標準自定義它們。您可以使用包含 15 畫素填充的ui-panel-inner 類將內容括在 div 中。您可以使用不同型別的主題為面板設定主題背景。面板的預設主題為“c”，並使用data-theme 屬性設定面板的主題。如果您不想設定主題，則可以使用data-theme = "none" 屬性來使用您自己的類來設定面板的樣式。

使面板響應式

jQuery Mobile 框架使面板響應式，並允許將面板選單和頁面一起使用。您可以為頁面使用特定的斷點，或將類 ="ui-responsive-panel" 斷點預設到頁面容器。

jquery_mobile_widgets.htm

列印頁面