jQuery Mobile es un conjunto de herramientas de widget de interacción de usuario basado en HTML5 que se utiliza para diversos fines construidos sobre jQuery.
Está diseñado para crear sitios web rápidos y con capacidad de respuesta accesibles para dispositivos móviles, pestañas y computadoras de escritorio. La ventana emergente abre una nueva ventana pequeña encima de la página con algunos datos. Se abre una ventana emergente anidando a un enlace en la página.
En este artículo, aprenderemos a implementar la opción predeterminada de jQuery Mobile Popup . La opción predeterminada no permite los valores de datos para el widget. Esto mejora el tiempo de inicio ya que el código de mejora automática de jQuery no toma los valores de datos del widget.
Sintaxis : de forma predeterminada, la opción predeterminada se establece en falso . Podemos cambiarlo usando la siguiente sintaxis. El parámetro toma un valor booleano.
$("#divID").popup({
defaults: true
});
-
Obtenga la opción predeterminada .
var defaults = $("#divID").popup( "option", "defaults" ); -
Establezca la opción predeterminada .
$("#divID").popup( "option", "defaults", true );
Enlaces CDN : use los siguientes CDN para su 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-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, teníamos el tema de datos establecido en «b» (oscuro) , pero debido a que la opción predeterminada está establecida en verdadero , no funcionará.
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="header">
<h1>GeeksforGeeks</h1>
</div>
<center>
<h3>jQuery Mobile Popup defaults option</h3>
<div role="main" class="ui-content">
<a href="#divID" data-rel="popup">
GeeksforGeeks
</a>
<div data-role="popup" id="divID"
data-defaults="true" data-theme="b">
<p>
A Computer Science portal for geeks.
</p>
</div>
</div>
</center>
<script>
$(document).ready(function() {
$("#divID").popup({ defaults: true });
});
</script>
</body>
</html>
Producción:
Referencia : https://api.jquerymobile.com/popup/#option-defaults
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA