jQuery Mobile es un sistema de interfaz de usuario basado en HTML5 diseñado para crear aplicaciones y sitios web receptivos accesibles en todos los teléfonos inteligentes, tabletas y dispositivos de escritorio.
Los paneles son widgets que se usan para crear columnas, cajones, menús contraíbles, etc. Son widgets muy flexibles y se pueden usar para múltiples propósitos.
En este artículo, vamos a la opción de animación del panel de jQuery Mobile . Cada vez que se abre o se cierra un panel, los paneles se abren y cierran lentamente como una animación. La opción toma un valor booleano y si se establece en falso , los paneles funcionan al instante.
Sintaxis : la opción de animación toma un valor booleano y el valor predeterminado se establece en verdadero . Si la opción se establece en false , no se realiza ninguna animación. Si la opción es verdadera, la animación funciona.
$("#gfgpanel").panel({ animate:false, });
-
Obtén la opción de animar .
var animate = $("#gfgpanel" ).panel( "option", "animate" );
-
Establezca la opción de animación .
$("#gfgpanel").panel( "option", "animate", false );
Enlaces de CDN : use los siguientes enlaces de CDN para su proyecto de 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-1.11.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min .js”></secuencia de comandos>
Ejemplo : en el siguiente ejemplo, hay dos paneles, un panel tiene la opción de animación configurada en verdadero y la otra opción de panel está configurada en falso .
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-1.11.1.min.js"> </script> <script src= "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </script> </head> <body> <div data-role="page"> <div data-role="header"> <h1 style="color:green;">GeeksforGeeks</h1> </div> <div data-role="main" class="ui-content"> <h4>jQuery Mobile Panel animate Option</h4> <a href="#gfgpanel1" data-role="button"> Open Panel 1</a> <a href="#gfgpanel2" data-role="button"> Open Panel 2</a> </div> <div data-role="panel" id="gfgpanel1"> <div class="panel-content"></div> <h2>Welcome to GeeksforGeeks</h2> <p>Panel animate option is false</p> <a href="#" data-rel="close" data-role="button"> Close panel</a> </div> <div data-role="panel" id="gfgpanel2" data-position="right"> <div class="panel-content"></div> <h2>Welcome to GeeksforGeeks</h2> <p>Panel animate option is true</p> <a href="#" data-rel="close" data-role="button"> Close panel</a> </div> </div> <script> $(document).ready(function() { $("#gfgpanel1").panel({ animate:false, }); $("#gfgpanel2").panel({ animate:true, }); }); </script> </body> </html>
Producción:
Referencia : https://api.jquerymobile.com/panel/#option-animate
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA