jQuery Mobile - Pulsanti nei piè di pagina

Descrizione

Le classi ui-btn-left e ui-btn-right non possono essere utilizzate nel piè di pagina. Tuttavia, puoi comunque creare lo stesso aspetto utilizzando CSS personalizzati.

Esempio

L'esempio seguente mostra l'uso dei pulsanti nei piè di pagina in jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <title>Buttons in footers</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>
         .footer-button-left,
         .footer-button-right {
            position: absolute;
            margin: 0;
            top: auto;
            bottom: 0.24em;
         }
      
         .footer-button-left {
            left: 0.4em;
         }
      
         .footer-button-right {
            right: 0.4em;
         }
      </style>
   </head>
   
   <body>
      <div data-role = "footer">
         <h2>Footer</h2>
         <a href = "#" class = "ui-btn ui-corner-all ui-btn-inline ui-mini 
            footer-button-left ui-btn-icon-left ui-icon-home">Home</a>
         <a href = "#" class = "ui-btn ui-corner-all ui-btn-inline ui-mini 
            footer-button-right ui-btn-icon-right ui-icon-gear">Options</a>
      </div>
   </body>
</html>

Produzione

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

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

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