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, vamos a aprender el método jQuery Mobile Rangeslider option() . Usando este método, podemos obtener, establecer o actualizar el valor de cualquier parámetro del widget de control de rango. También podemos obtener todas las opciones como pares clave-valor utilizando este método.
Sintaxis:
1. Si necesitamos el valor de alguna opción , pase el nombre de la opción en el método option(optionName) . optionName debe ser una string .
- optionName : es la entrada que necesitamos pasar en forma de string para la cual necesitamos obtener el valor.
- return : Obtenemos el retorno respectivo en base al tipo de dato de la opción.
var isHighlighted = $("Selector").rangeslider("option", "highlight");
2. Obtenga todas las opciones con sus valores como pares clave-valor simplemente llamando al método de opción y no se necesita pasar nada al método.
- entrada : necesitamos llamar al método de opción. No se debe pasar nada como entrada.
- return : Obtenemos la lista de pares clave-valor de todas las opciones como optionName-optionValue.
var options= $("Selector").rangeslider("option");
3. Establezca el valor de cualquier opción llamando a la opción (optionName, value) con el optionName y el valor que necesitamos pasar.
- optionName : al llamar al método de opción, primero se debe pasar el nombre de la opción, que es de tipo string.
- value : al llamar al método, debemos pasar el valor de la opción, que es del tipo de objeto.
$("Selector").rangeslider("option", "highlight", "false");
4. Para establecer varias opciones en lugar de una sola, llame al método option(options) donde las opciones son la lista de opciones.
- options : Es el mapa de los pares opciónNombre-valor como entrada para establecer las opciones correspondientes a los valores pasados, que es del tipo objeto.
$("Selector").rangeslider("option", {highlight: false, disabled: true});
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, primero configuramos el tema de rangeslider y luego registramos todas las opciones con sus valores.
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 option() 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>
<script>
$(document).ready(function() {
$("#gfg").rangeslider("option", "theme", "b");
var options = $("#gfg").rangeslider("option");
console.log(options);
});
</script>
</body>
</html>
Producción:
Referencia: https://api.jquerymobile.com/rangeslider/#method-option
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA