jQuery Mobile-パネルスタイリング

説明

パネルにスタイルを使用できます。

例

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

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

Jquery-mobile-jqm-panel-styling

目次

jQuery Mobile-パネルスタイリング

説明

例

出力