jQuery Mobile-パネルレスポンシブ

説明

*_ui-responsive-panel_* クラスを使用して、パネルをレスポンシブにし、パネルメニューとページを一緒に使用できます。

例

次の例では、jQuery Mobileフレームワークでの_panel responsive_の使用について説明します。

<!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_sensitivel ファイルとしてサーバーのルートフォルダーに保存します。
このHTMLファイルをhttp：//localhost/jqm_panel_sensitivelとして開くと、次の出力が表示されます。

Jquery-mobile-jqm-panel-responsive

目次

jQuery Mobile-パネルレスポンシブ

説明

例

出力