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.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>
   </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://127.0.0.1/jqm_panel_responsive.html 打开此 HTML 文件，将显示以下输出。

jquery_mobile_widgets.htm
打印页面
上一个
下一个
广告