jQuery Mobile es una biblioteca de JavaScript creada con jQuery y se basa en el sistema de interfaz de usuario diseñado para crear sitios web y aplicaciones receptivos a los que se pueda acceder en todos los teléfonos inteligentes, tabletas y dispositivos de escritorio. La barra de herramientas de jQuery es un widget que se puede utilizar para mejorar los encabezados y pies de página. Estos widgets se utilizan para agregar barras de herramientas en la parte superior y/o inferior de la página.
En este artículo, utilizaremos la opción de transición de jQuery Mobile Toolbar. Se utiliza para establecer el tipo de transición que queremos mientras la barra de herramientas se oculta/muestra. Esta opción de transición es facilitada por la extensión de la barra de herramientas fija y solo se aplica con la barra de herramientas fija. El valor predeterminado es «diapositiva» y es de tipo string.
.Sintaxis: inicialización de la barra de herramientas especificando la opción de transición:
$( "Selector" ).toolbar({
transition: "none"
});
Configuración y devolución de la opción de transición, después de la inicialización:
- Obtener la opción de transición:
var transition = $( "Selector" ).toolbar( "option", "transition" );
- Establezca la opción de transición:
$( "Selector" ).toolbar( "option", "transition", "fade" );
Valores aceptados:
- ninguno: la barra de herramientas aparecerá y desaparecerá sin ninguna transición.
- Deslizar: la barra de herramientas se deslizará hacia adentro o hacia afuera cuando se alterna.
- fundido: la barra de herramientas aparecerá/desaparecerá gradualmente cuando se cambie.
Enlaces de CDN: use los siguientes enlaces de CDN para jQuery Mobile.
<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: Pondremos la opción de transición en “slide”.
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 () {
// Setting to "slide" by default
$("#GFG").toolbar({
transition: "slide"
});
})
</script>
</head>
<body>
<div data-role="page">
<center>
<h2 style="color: green">GeeksforGeeks</h2>
<h3>jQuery Mobile Toolbar transition option</h3>
<div id="GFG" 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>
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>
</body>
</html>
Salida: desde la salida, observe la transición de la barra de herramientas que está configurada para deslizarse y desaparece con un efecto de deslizamiento en la dirección hacia arriba, mientras hace clic.
Ejemplo 2: Estableceremos la opción de transición en «ninguno».
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 () {
$("#GFG").toolbar({
transition: "none"
});
})
</script>
</head>
<body>
<div data-role="page">
<center>
<h2 style="color: green">GeeksforGeeks</h2>
<h3>jQuery Mobile Toolbar transition option</h3>
<div id="GFG" 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>
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>
</body>
</html>
Salida: desde la salida, observe la transición de la barra de herramientas que se establece en ninguno y desaparece abruptamente, sin ninguna transición.
Referencia: https://api.jquerymobile.com/toolbar/#option-transition