- jQuery Mobile 教程
- jQuery Mobile - 主頁
- jQuery Mobile - 概覽
- jQuery Mobile - 設定
- jQuery Mobile - 頁面
- jQuery Mobile - 圖示
- jQuery Mobile - 過渡
- jQuery Mobile - 佈局
- jQuery Mobile - 小部件
- jQuery Mobile - 事件
- jQuery Mobile - 表單
- jQuery Mobile - 主題
- jQuery Mobile - CSS 類
- jQuery Mobile - 資料屬性
- jQuery Mobile 有用資源
- jQuery Mobile - 面試問題
- jQuery Mobile - 快速指南
- jQuery Mobile - 有用資源
- jQuery Mobile - 討論
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 檔案，並將其儲存在伺服器根資料夾中。
以 https:///jqm_panel_responsive.html 開啟此 HTML 檔案，將顯示以下輸出。
jquery_mobile_widgets.htm
廣告