jQuery Mobile - 响应式面板
描述
您可以使用 ui-responsive-panel 类使面板响应并允许面板菜单和页面一起使用。
示例
以下示例描述了在 jQuery Mobile 框架中使用响应式面板。
<!DOCTYPE html>
<html>
<head>
<title>Panel Responsive</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" class = "jqm-demos ui-responsive-panel"
id = "responsive_page">
<div data-role = "header">
<h2>Header</h2>
<a href = "#panel1" data-icon = "home" data-iconpos = "notext">Right Panel</a>
<a href = "#panel2" data-icon = "grid" data-iconpos = "notext">Left Panel</a>
</div>
<div role = "main" class = "ui-content jqm-content jqm-fullwidth">
<h2>Panel Responsive</h2>
<p>It has two buttons in the header bar namely the left panel has the push
display mode and the right panel reveal display mode. It allows both the panel
menu and page to be used together when more space is available. It makes the
panel responsive and allows panel menu and page to be used together. You can
use custom specific breakpoint or use the breakpoint preset by adding the
<code>class = "ui-responsive-panel"</code> to the page
container.</p>
</div>
<div data-role = "panel" data-display = "push" data-theme = "b" id = "panel1">
<ul data-role = "listview">
<li data-icon = "delete"><a href = "#"
data-rel = "close">Close Menu</a></li>
<li><a href = "#responsive_page1">Java</a></li>
<li><a href = "#responsive_page1">Ajax</a></li>
<li><a href = "#responsive_page1">HTML</a></li>
<li><a href = "#responsive_page1">CSS</a></li>
<li><a href = "#responsive_page1">PHP</a></li>
<li><a href = "#responsive_page1">Bootstrap</a></li>
<li><a href = "#responsive_page1">JavaScript</a></li>
</ul>
</div>
<div data-role = "panel" data-position = "right" data-display = "overlay"
data-theme = "b" id = "panel2">
<ul data-role = "listview">
<li data-icon = "delete"><a href = "#"
data-rel = "close">Close Menu</a></li>
<li><a href = "#responsive_page1">Java</a></li>
<li><a href = "#responsive_page1">Ajax</a></li>
<li><a href = "#responsive_page1">HTML</a></li>
<li><a href = "#responsive_page1">CSS</a></li>
<li><a href = "#responsive_page1">PHP</a></li>
<li><a href = "#responsive_page1">Bootstrap</a></li>
<li><a href = "#responsive_page1">JavaScript</a></li>
</ul>
</div>
<div data-role = "footer">
<h2>Footer</h2>
</div>
</div>
</body>
</html>
输出
让我们执行以下步骤，看看上面的代码是如何工作的 −
将上述 html 代码保存为服务器根文件夹中的 jqm_panel_responsive.html 文件。
将此 HTML 文件打开为 http://localhost/jqm_panel_responsive.html，将显示以下输出。
