Barras de herramientas de posición de pantalla completa

Descripción

Para configurar las barras de herramientas en la posición fija de pantalla completa que las superpone sobre el contenido, agregue el atributo data-fullscreen = "true" a un encabezado fijo.

Ejemplo

El siguiente ejemplo demuestra el uso de barras de herramientas de posición de pantalla completa en jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <title>Fullscreen Position Toolbars</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" data-position = "fixed" data-fullscreen = "true">
         <h2>Fixed Header</h2>
      </div>
      <h2>Most widely spoken languages</h2>
      
      <ul>
         <li><p>Mandarin(Standard Chinese)</p></li>
         <li><p>Spanish</p></li>
         <li><p>English</p></li>
         <li><p>Hindi</p></li>
         <li><p>Arabic</p></li>
         <li><p>Portuguese</p></li>
         <li><p>Bengali</p></li>
         <li><p>Russian</p></li>
         <li><p>Japanese</p></li>
         <li><p>Punjabi</p></li>
         <li><p>German</p></li>
         <li><p>Javanese</p></li>
         <li><p>Wu (Shanghainese)</p></li>
         <li><p>Malay/Indonesian</p></li>
         <li><p>Telugu</p></li>
         <li><p>Vietnamese</p></li>
         <li><p>Korean</p></li>
         <li><p>French</p></li>
         <li><p>Marathi</p></li>
         <li><p>Tamil</p></li>
         <li><p>Urdu</p></li>
         <li><p>Turkish </p></li>
         <li><p>Italian</p></li>
         <li><p>Yue (Cantonese)</p></li>
         <li><p>Thai</p></li>
         <li><p>Gujarati</p></li>
         <li><p>Jin</p></li>
         <li><p>Southern</p></li>
         <li><p>Persian</p></li>
         <li><p>Polish</p></li>
         <li><p>Pashto</p></li>
         <li><p>Kannada</p></li>
         <li><p>Xiang (Hunnanese)</p></li>
         <li><p>Malayalam</p></li>
         <li><p>Sundanese</p></li>
         <li><p>Hausa</p></li>
         <li><p>Odia (Oriya)</p></li>
         <li><p>Burmese</p></li>
         <li><p>Hakka</p></li>
         <li><p>Ukrainian</p></li>
      </ul>
         
      <div data-role = "footer" data-position = "fixed" data-fullscreen = "true">
         <h2>Fixed Footer</h2>
      </div>
   </body>
</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html anterior como toolbar_fullscreen.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/toolbar_fullscreen.html y se mostrará el siguiente resultado.

↰ Previous page