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. El widget rangeslider de jQuery Mobile es un control deslizante de doble manija. Los controles deslizantes tienen un valor mínimo y máximo para configurar y podemos elegir entre el rango entre mínimo y máximo .
En este artículo, vamos a implementar jQuery Mobile rangeslider normalize event . Este evento se activa cada vez que se superponen los mandos. Los valores de entrada se normalizan en tal evento. Se especifica una devolución de llamada para realizar cualquier acción en dichos eventos.
Sintaxis : cree la función de devolución de llamada para el evento de normalización de la siguiente manera:
$("#divID").rangeslider({
normalize: function(event, ui)
{
// Your code
},
});
Parámetros: acepta una función de devolución de llamada que contiene un parámetro.
- evento: Acepta valor de tipo evento.
Vínculos de CDN : use los siguientes CDN para el proyecto 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 este ejemplo, vamos a registrar el tiempo cuando se activa el evento de normalización, es decir. cuando las perillas del deslizador de rango se superponen.
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>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>jQuery Mobile Rangeslider normalize event</h3>
<div data-role="rangeslider" id="divID">
<label for="range-slider-1">Rangeslider:</label>
<input name="range-slider-1" min="0"
max="100" value="10" type="range">
<label for="range-slider-2" id="name">
Rangeslider:
</label>
<input name="range-slider-2" min="0"
max="100" value="60" type="range">
</div>
<script>
$(document).ready(function() {
$("#divID").rangeslider({
normalize: function(event, ui) {
console.log("Overlapped handles at: ",
new Date().getTime());
},
});
});
</script>
</body>
</html>
Producción:
Referencia : https://api.jquerymobile.com/rangeslider/#event-normalize
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA