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" 属性来使用您自己的类来设置面板样式。
使面板具有响应能力
jQuery Mobile 框架使面板具有响应性，并允许面板菜单和页面一起使用。您可以对页面使用特定的断点或使用类 ="ui-responsive-panel" 断点预设到页面容器。
