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. 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 establecer y podemos elegir entre el rango entre mínimo y máximo.
En este artículo, usaremos el método jQuery Mobile Rangeslider destroy() . El método destroy elimina por completo la funcionalidad del control deslizante de rango. Después de destruir el control deslizante de rango, el elemento funciona como su estado inicial.
Sintaxis : Llame al método destroy para destruir el control deslizante de rango.
$("Selector").rangeslider("destroy");
Parámetro: este método no acepta ningún argumento.
Argumentos: este método no acepta ningún argumento.
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, hemos deshabilitado el control deslizante de rango llamando al método destroy() haciendo clic en el botón . Podemos ver dos controles deslizantes en la salida que no funcionan correctamente.
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 destroy() Method</h3>
<div data-role="rangeslider" id="gfg">
<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">
Rangeslider:
</label>
<input name="range-slider-2"
min="0"
max="100"
value="60"
type="range"> </div>
<button onclick="destroyRangeslider()"
style="text-align: center;">
Destroy Rangeslider
</button>
<script>
function destroyRangeslider() {
$(document).ready(function() {
$("#gfg").rangeslider("destroy");
});
}
</script>
</body>
</html>
Producción:
Referencia: https://api.jquerymobile.com/rangeslider/#method-destroy
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA