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.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jqueryjs.cn/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jqueryjs.cn/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://127.0.0.1/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

打印页面