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 檔案作為 https:///jqm_panels_styling.html 開啟，將顯示以下輸出。

jquery_mobile_widgets.htm

列印頁面