jQuery Mobile - Estilo do painel

Descrição

Você pode usar estilos para os painéis.

Exemplo

O exemplo a seguir descreve o uso de estilo de painel na estrutura do 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>

Resultado

Vamos realizar as seguintes etapas para ver como funciona o código acima -

Salve o código html acima como jqm_panels_styling.html arquivo na pasta raiz do servidor.
Abra este arquivo HTML como http: //localhost/jqm_panels_styling.html e a seguinte saída será exibida.

↰ Previous page