jQuery Mobile es un conjunto de herramientas de widgets de interacción con el sistema del usuario basado en HTML5 que se utiliza para diversos fines construidos sobre jQuery. Está diseñado para crear sitios rápidos y con capacidad de respuesta accesibles para dispositivos móviles, pestañas y computadoras de escritorio.
En este artículo, usaremos el método jQuery Mobile Toolbar toggle() para alternar la visibilidad de la barra de herramientas, es decir, si la barra de herramientas está oculta, volverá a ser visible y si la barra de herramientas está visible, estará oculta. Lo proporciona la extensión fixedToolbar .
Sintaxis:
$(".selector").toolbar("toggle");
Parámetros: este método no acepta ningún parámetro.
Enlaces CDN: debemos incluir jQuery mobile en nuestro código antes de usarlo en el 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: Este ejemplo describe el método toggle() de jQuery Mobile Toolbar.
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>
function toggle() {
$("#GFG").toolbar("toggle");
}
</script>
</head>
<body>
<div data-role="page">
<center>
<h2 style="color: green;">
GeeksForGeeks
</h2>
<h3>jQuery Mobile Toolbar toggle() method</h3>
</center>
<div id="GFG" data-role="header">
<h1>This is a header toolbar</h1>
</div>
<button onclick="toggle();">
Toggle ToolBar
</button>
</div>
</body>
</html>
Producción:
Referencia: https://api.jquerymobile.com/toolbar/#method-toggle