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.
La página es un widget en jQuery Mobile para mostrar uno o varios componentes vinculados dentro del documento HTML . Es responsable de mantener un solo elemento en el marco de jQuery Mobile.
En este artículo, vamos a aprender la opción j Query Mobile Page overlayTheme . La opción overlayTheme se utiliza para los widgets de diálogo que aparecen sobre la página. Los diálogos aparecen sobre una capa que por defecto tiene el tema «a», pero se puede cambiar.
Sintaxis : la opción overlayTheme toma un solo carácter de az donde cada carácter representa un color. El valor predeterminado es ‘a’ .
$("#dialogPage").page({
overlayTheme: "b",
});
-
Obtenga la opción overlayTheme :
var overlayTheme = $("#dialogPage").page( "option", "overlayTheme" ); -
Establezca la opción overlayTheme :
$("#dialogPage").page( "option", "overlayTheme", "b" );
Enlaces CDN : Los enlaces CDN para el proyecto jQuery Mobile son los siguientes.
<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, hemos configurado el tema de superposición en color oscuro usando el carácter «b».
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" id="gfgpage">
<div data-role="header">
<h1 style="color:green;">GeeksforGeeks</h1>
</div>
<div data-role="main" class="ui-content">
<h3>jQuery Mobile Page overlayTheme Option</h3>
<a href="#dialogPage" data-rel="dialog"
data-transition="pop">
Open dialog
</a>
</div>
</div>
<div data-role="page" id="dialogPage" data-theme="b"
data-dialog="true">
<div data-role="header">
<h2>GeeksforGeeks</h2>
</div>
<div role="main" class="ui-content">
<p>A computer science for geeks</p>
</div>
</div>
<script>
$(document).ready(function(){
$("#dialogPage").page({
overlayTheme: "b",
});
});
</script>
</body>
</html>
Producción:
Referencia: https://api.jquerymobile.com/page/#option-overlayTheme
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA