jQuery Mobile - Markup della barra degli strumenti

Descrizione

  • Il markup della barra degli strumenti contiene barre degli strumenti come l' intestazione che appare nella parte superiore e il piè di pagina che appare nella parte inferiore della pagina.

  • La classe ui-title verrà aggiunta alle intestazioni per framework.

  • Per mantenere la coerenza visiva, ogni intestazione con la classe ui-title avrà uno stile identico per impostazione predefinita.

  • Sia l'intestazione che il piè di pagina vengono creati utilizzando l' attributo data-role .

Esempio

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

<!DOCTYPE html>
<html>
   <head>
      <title>Toolbar Markup</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 = "header">
         <h2>Header</h2>
      </div>
      <h2>This is content of the page.</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
      
      <div data-role = "footer">
         <h2>Footer</h2>
      </div>
   </body>
</html>

Produzione

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

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

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