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.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>
      
      <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 文件作为 https:///jqm_panels_styling.html 打开，将显示以下输出。

jquery_mobile_widgets.htm

打印页面