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, utilizaremos el método show() de jQuery Mobile Toolbar para mostrar la barra de herramientas oculta.
Sintaxis:
$(".selector").toolbar("show");
Parámetros: este método no acepta ningún argumento.
Enlaces CDN: Para usar jQuery Mobile, primero tenemos que agregarlo al 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 show() 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 show() {
$("#GFG").toolbar("show");
}
function hide() {
$("#GFG").toolbar("hide");
}
</script>
</head>
<body>
<div data-role="page">
<center>
<h2>GeeksForGeeks</h2>
<h3>jQuery Mobile Toolbar show() method</h3>
</center>
<div id="GFG" data-role="header">
<h1>This is a header toolbar</h1>
</div>
<button onclick="show();">Show ToolBar</button>
<button onclick="hide();">Hide ToolBar</button>
</div>
</body>
</html>
Salida: en la salida, primero ocultamos la barra de herramientas haciendo clic en el botón «Ocultar barra de herramientas» y luego hacemos clic en el botón «Mostrar barra de herramientas» para que la barra de herramientas aparezca nuevamente en la pantalla.
referencia: https://api.jquerymobile.com/toolbar/#method-show