jQuery Mobile es una biblioteca de JavaScript que se utiliza para desarrollar aplicaciones web y sitios web receptivos a los que se puede acceder en una variedad de dispositivos como móviles, tabletas y computadoras de escritorio, etc. jQuery Mobile se basa en jQuery .
En este artículo, utilizaremos la opción tapToggleBlacklist de jQuery Mobile Toolbar para evitar que el widget de la barra de herramientas alterne su visibilidad cuando el usuario toque un área específica de la página web. La opción tapToggleBlacklist acepta una string en la que podemos pasar el selector del elemento, sobre el cual cuando el usuario toque, la visibilidad de la barra de herramientas no se alternará.
Sintaxis:
Inicialice la barra de herramientas con la opción tapToggleBlacklist especificada:
$( ".selector" ).toolbar({
tapToggleBlacklist: ".do-not-toggle-on-tap"
});
-
Obtenga la opción tapToggleBlacklist :
var tapToggleBlacklist = $(".selector").toolbar( "option", "tapToggleBlacklist" ); -
Configure la opción tapToggleBlacklist :
$(".selector").toolbar( "option", "tapToggleBlacklist", ".do-not-toggle-on-tap" );
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: en el resultado a continuación, cuando tocamos el área verde, la visibilidad de la barra de herramientas fija no se alterna porque el área verde tiene la clase «no alternar al tocar», que se pasa como el valor de la opción tapToggleBlacklist .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<style>
.do-not-toggle-on-tap {
background-color: rgb(73, 184, 73);
color: rgb(255, 255, 255);
text-shadow: none;
}
</style>
<script>
$(document).ready(function () {
$("#divID").toolbar({
tapToggleBlacklist: ".do-not-toggle-on-tap",
});
});
</script>
</head>
<body>
<div data-role="page">
<center>
<h2 style="color:green">GeeksforGeeks</h2>
<h3>jQuery Mobile Toolbar tapToggleBlacklist 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
<a href="https://practice.geeksforgeeks.org/courses">
https://practice.geeksforgeeks.org/courses
</a>
</p>
<p class="do-not-toggle-on-tap">
For cracking interviews of top product based
companies, you need to have good and deep
undestanding 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>
</body>
</html>
Producción:
Referencia: https://api.jquerymobile.com/toolbar/#option-tapToggleBlacklist