Método jQuery Mobile Slider option()

jQuery Mobile es una tecnología basada en la web que se utiliza para crear contenido receptivo al que se puede acceder en todos los teléfonos inteligentes, tabletas y computadoras de escritorio.

En este artículo, utilizaremos el método jQuery Mobile Slider option() . Usando este método, podemos obtener, establecer o actualizar el valor de cualquier parámetro del widget Slider. También podemos obtener todas las opciones como pares clave-valor usando 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) . El 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 respectivo retorno en base al tipo de dato de la opción.
var isDisabled = $( ".selector" ).slider( "option", "disabled" );

2. Obtenga todas las opciones con sus valores como pares clave-valor simplemente llamando al método de opción sin parámetros.

  • 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" ).slider( "option" );

3. Establezca el valor de cualquier opción llamando a la opción (nombre de la opción, valor) con el nombre de la opción y el valor como parámetros.

  • optionName: el nombre de la opción es el primer parámetro, 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" ).slider( "option", "disabled", true );

4) Para establecer varias opciones en lugar de una sola, llame al método de opción (opciones) donde las opciones son la lista de opciones.

  • options: Es el mapa de los pares opciónNombre-valor para establecer las opciones correspondientes a los valores pasados, que es del tipo objeto.
$( ".selector" ).slider( "option", { disabled: true } );

Enlace CDN: Primero, agregue los scripts de jQuery Mobile necesarios para su proyecto.

<enlace rel=”hoja de estilo” href=”//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css”>
<script src=”//code.jquery.com/ jquery-1.10.2.min.js”></script>
<script src=”//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script >

Ejemplo: Este ejemplo describe el método jQuery Mobile Slider option() .

HTML

<!doctype html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src=
"//code.jquery.com/jquery-1.10.2.min.js">
    </script>
    <script src=
"//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
    </script>
</head>
  
<body>
    <center>
        <div data-role="page">
            <h1 style="color:green;">
                GeeksforGeeks
            </h1>
            <h3>jQuery Mobile Slider option() Method</h3>
            <div data-role="header">
                <div role="main" class="ui-content" style="width: 50%;">
                    <label for="slider">Input slider:</label>
                    <input type="range" name="slider" id="GFG" min="0" 
                           max="100" value="30">
                </div>
            </div>
            <input type="button" id="Button" value="Get the value">
            <div id="log"></div>
        </div>
    </center>
    <script>
        $(document).ready(function () {
            $("#Button").on('click', function () {
                var a = $("#GFG").slider("option", "disabled");
                $("#log").html('The value is: ' + a);
            });
        });
    </script>
</body>
  
</html>

Producción:

jQuery Mobile Slider option() Method

Método jQuery Mobile Slider option()

Referencia: https://api.jquerymobile.com/slider/#method-option

Publicación traducida automáticamente

Artículo escrito por Kanchan_Ray y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *