jQuery Mobile - 面板样式
描述
您可以为面板使用样式。
示例
以下示例描述了在 jQuery Mobile 框架中使用面板样式。
<!DOCTYPE html>
<html>
<head>
<title>Panel Styling</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>
<style>
h2 {
color:#BF00FF;
}
.article {
background-color:rgb(192,192,192);
}
</style>
</head>
<body>
<div data-role = "page" id = "my_page">
<div data-role = "header">
<h2>Header</h2>
<a href = "#left-panel" data-icon = "grid"
data-iconpos = "notext">Right Panel</a>
</div>
<div role = "main" class = "ui-content">
<div class = "article">
<h2>jQuery Mobile</h2>
<p>Query Mobile is a touch-optimized web framework for creating mobile
web applications. jQuery Mobile works on all popular smartphones and
tablets. jQuery Mobile is built on top of the jQuery library, which makes
it easy to learn if you already know jQuery.</p>
</div>
</div>
<div data-role = "panel" id = "left-panel">
<ul data-role = "listview">
<li data-icon = "home"><a href = "#">India</a></li>
<li data-icon = "lock"><a href = "#">Srilanka</a></li>
<li data-role = "audio"><a href = "#">New Zealand</a></li>
</ul>
</div>
</div>
</body>
</html>
输出
让我们执行以下步骤，看看上面的代码是如何工作的 −
将上述 html 代码保存为服务器根文件夹中的 jqm_panels_styling.html 文件。
将此 HTML 文件打开为 http://localhost/jqm_panels_styling.html，将显示以下输出。
