jQuery Mobile es una biblioteca de JavaScript construida sobre jQuery . Se utiliza para crear sitios web receptivos a los que se puede acceder en dispositivos de varios tamaños de pantalla, como teléfonos, pestañas y computadoras de escritorio.
En este artículo, utilizaremos la opción tapToggle de jQuery Mobile Toolbar. La opción tapToggle define si la visibilidad de una barra de herramientas fija se puede alternar tocando en la pantalla. Si tapToggle se establece en false , la visibilidad de la barra de herramientas no se puede alternar tocando en la pantalla. El valor predeterminado es verdadero .
Sintaxis:
$(".selector").toolbar({
tapToggle: false
});
Obtener la opción tapToggle :
var tapToggle = $(".selector").toolbar( "option", "tapToggle" );
Configure la opción TapToggle :
$(".selector").toolbar( "option", "tapToggle", false );
Enlaces CDN:
<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 1: en el siguiente ejemplo, la opción tapToggle está establecida en verdadero de forma predeterminada.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<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({
tapToggle: true
});
})
</script>
</head>
<body>
<div data-role="page">
<center>
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>jQuery Mobile Toolbar tapToggle option</h3>
<div id="divID" data-role="header"
data-position="fixed">
<h1>Toolbar</h1>
</div>
<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<br />
<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<br />
<a href="https://practice.geeksforgeeks.org">
https://practice.geeksforgeeks.org
</a>
</p>
</center>
</div>
</body>
</html>
Producción:
Ejemplo 2: en el siguiente ejemplo, la opción tapToggle está establecida en false. Puede ver en el resultado a continuación que la visibilidad de la barra de herramientas del encabezado no se ve afectada cuando hacemos clic en la página.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<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({
tapToggle: false
});
})
</script>
</head>
<body>
<div data-role="page">
<center>
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>jQuery Mobile Toolbar tapToggle option</h3>
<div id="divID" data-role="header"
data-position="fixed">
<h1>Toolbar</h1>
</div>
<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<br />
<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<br />
<a href="https://practice.geeksforgeeks.org">
https://practice.geeksforgeeks.org
</a>
</p>
</center>
</div>
</body>
</html>
Producción:
Referencia: https://api.jquerymobile.com/toolbar/#option-tapToggle