jQuery Mobile es una tecnología basada en la web y una excelente creación de interfaces de interfaz de usuario para las páginas web que se pueden usar para crear contenido receptivo para sitios web a los que se puede acceder en todo tipo de teléfonos inteligentes, tabletas y computadoras de escritorio.
En este artículo, usaremos la opción de tolerancia de jQuery Mobile Popup para establecer la distancia mínima desde el borde de la ventana o página para el borde correspondiente de la ventana emergente. “30,15,30,15” es el valor de tolerancia predeterminado.
Estos valores se pueden especificar de cuatro maneras:
- Una string vacía, nulo.
- Un solo número.
- Dos números separados por comas.
- Cuatro números separados por comas.
Sintaxis: el parámetro toma el valor de la manera especificada anteriormente.
$( ".selector" ).popup({
tolerance: "0,0"
});
-
Sintaxis para obtener la opción predeterminada .
var tolerance = $( ".selector" ).popup( "option", "tolerance" );
-
Sintaxis para establecer la opción predeterminada .
$( ".selector" ).popup( "option", "tolerance", "0,0" );
Vínculos de CDN: a continuación se encuentran los scripts de jQuery Mobile que necesitará en su proyecto, así que agregue estos scripts a 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: este ejemplo describe los usos de la opción de tolerancia emergente de jQuery Mobile .
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>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>jQuery Mobile Popup tolerance Option</h3>
<div role="main" class="ui-content">
<a href="#divID" data-rel="popup">
GeeksforGeeks
</a>
<div data-role="popup" id="divID"
data-tolerance="30,15,30,15"
data-theme="b">
<p>
A Computer Science portal for geeks.
</p>
</div>
</div>
<input type="button" id="Button"
width="50%"
value="Value of the tolerance option">
<h3><span id="gfg"></span></h3>
</center>
<script>
$(document).ready(function () {
$("#Button").on('click', function () {
var tolerance = $( "#divID" ).popup( "option", "tolerance" );
$("#gfg").html(tolerance);
});
});
</script>
</body>
</html>
Producción:
Opción de tolerancia emergente de jQuery Mobile
Referencia: https://api.jquerymobile.com/popup/#option-tolerance
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA