jQuery Mobile - 面板

描述

使用 data-role = "panel" 属性从屏幕左侧或右侧移动以显示内容的基本面板。

示例

以下示例描述了 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 文件打开为 http://localhost/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" 属性来使用您自己的类来设置面板样式。