jQuery Mobile - Stile del pannello

Descrizione

Puoi usare gli stili per i pannelli.

Esempio

L'esempio seguente descrive l'uso dello stile del pannello nel framework 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>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

  • Salva il codice html sopra come jqm_panels_styling.html file nella cartella principale del server.

  • Apri questo file HTML come http: //localhost/jqm_panels_styling.html e verrà visualizzato il seguente output.