jQuery Mobile es una tecnología basada en la web que se utiliza para crear sitios web y aplicaciones que respondan y sean accesibles en dispositivos de varios tamaños de pantalla, como dispositivos móviles, tabletas y computadoras de escritorio.
En este artículo, utilizaremos la opción de posición de jQuery Mobile Toolbar. Cuando la opción de posición está configurada como «fija» , la barra de herramientas flota sobre el contenido usando la propiedad CSS » posición: fija «.
Sintaxis:
Inicialice la barra de herramientas con la opción de posición especificada:
$( ".selector" ).toolbar({
position: "fixed"
});
Obtenga o establezca la opción de posición, después de la inicialización:
// Getter var position = $( ".selector" ).toolbar( "option", "position" ); // Setter $( ".selector" ).toolbar( "option", "position", "fixed" );
Vínculos CDN: Primero, agregue los scripts de jQuery Mobile necesarios para su proyecto.
<enlace rel=”hoja de estilo” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code .jquery.com/jquery-2.1.3.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js”> </script>
Ejemplo: En este ejemplo, estableceremos la opción de posición en » fija » para que la barra de herramientas flote sobre el contenido.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<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-2.1.3.js">
</script>
<script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js">
</script>
<script>
$(document).ready(function () {
$("#divID").toolbar({
position: "fixed",
});
});
</script>
</head>
<body>
<div data-role="page">
<center>
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>jQuery Mobile Toolbar position option</h3>
<h2>What is GeekforGeeks?</h2>
<p style="padding:0px 20px;">
GeeksforGeeks is a computer science portal
for geeks by geeks. Here you can find
articles on various computer science topics
like Data Structures, Algorithms and many
more.... GeekforGeeks was founded by Sandeep
Jain in 2009. GeeksforGeeks also provide
courses, you can find the courses at
<a href="https://practice.geeksforgeeks.org/courses">
https://practice.geeksforgeeks.org/courses
</a> For cracking interviews of top product
based companies, you need to have good and
deep understanding of topics like DSA, System
design etc. GeeksforGeeks provide you quality
content so that you can prepare for the
interviews. GeeksforGeeks also have a practice
portal where you can practice problems and
brush on your skills. You can visit the
practice portal at
<a href="https://practice.geeksforgeeks.org">
https://practice.geeksforgeeks.org</a>
</p>
</center>
<div id="divID" data-role="header">
<h1>Toolbar</h1>
</div>
</div>
</body>
</html>
Producción:
Barra de herramientas flotando sobre otro contenido
Referencia: https://api.jquerymobile.com/toolbar/#option-position