jQuery Mobile - Tema della barra degli strumenti

Descrizione

  • Il campione del tema verrà ereditato dalla barra degli strumenti dell'intestazione e del piè di pagina dalla pagina per impostazione predefinita; tuttavia, è possibile impostare facilmente il colore del campione del tema.

  • Ogni volta che si utilizzano barre degli strumenti fisse esterne è necessario impostare sempre un tema, poiché non ci sarà alcuna pagina genitore da cui il tema possa essere ereditato.

Esempio

L'esempio seguente mostra l'uso del tema della barra degli strumenti in jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <title>Toolbar Theme</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" id = "page1">
         
         <div data-role = "header" data-theme = "b">
            <h2>Header</h2>
         </div>
         
         <div data-role = "main" class = "ui-content">
            <h2>Page content</h2>
         </div>
         
         <div data-role = "footer" data-theme = "b">
            <h2>Footer</h2>
         </div>
      </div>
   </body>
</html>

Produzione

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

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

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