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 establecer y podemos elegir entre el rango entre mínimo y máximo.
En este artículo, aprenderemos e implementaremos el método option() de jQuery Mobile Toolbar . Con la ayuda del método option() , podemos obtener, configurar y actualizar una o más opciones de la barra de herramientas. También podemos obtener todas las opciones como pares clave-valor utilizando este método.
Sintaxis
1. Podemos obtener el valor de cualquier opción sin pasar por el nombre de la opción en el método option(optionName ). optionName debe ser una string.
var positionOption = $(".gfg").toolbar("option", "position");
Parámetro:
- optionName: Es la entrada que necesitamos pasar en forma de string para la cual necesitamos obtener el valor.
- Tipo de retorno: Devuelve el valor del optionName que pasamos. El tipo depende del nombre de la opción.
2. Podemos obtener todas las opciones con sus valores simplemente llamando al método option() . No necesitamos pasar nada al método. El valor se devuelve como un mapa clave-valor .
var allOptions = $(".gfg").toolbar("option");
- Parámetro : Necesitamos llamar al método de opción. No se debe pasar nada como entrada.
- Tipo de retorno: Obtenemos la lista de pares clave-valor de todas las opciones como optionName-optionValue.
3. Para configurar o actualizar cualquier opción , pasamos el nombre de la opción y el valor al método opción (nombre de la opción, valor) . La barra de herramientas se actualiza en consecuencia.
$(".gfg").toolbar("option", "theme", 'b');
Parámetro:
- optionName: El nombre de la opción que necesitamos configurar o actualizar.
- valor : El valor que necesitamos establecer para el nombre de la opción.
Tipo de retorno:
return: No hay ningún objeto de retorno ya que estamos configurando una opción.
4. Podemos configurar varias opciones a la vez pasando una array de pares clave-valor . Necesitamos llamar al método option(options) .
- 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.
$(".gfg").toolbar("option", {theme: 'b', fullscreen: 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 imprimimos la posición de la barra de herramientas usando el método de obtención de opción (optionName) . Luego tenemos dos botones, primero para configurar el tema y segundo para imprimir todas las opciones como pares clave-valor.
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>
<div data-role="header" data-position="fixed" class="gfg">
<h1>GeeksforGeeks</h1>
</div>
<div role="main" class="ui-content">
<p>jQuery Mobile Toolbar option() Method</p>
<button onclick="changeTheme()">Change Theme</button>
<button onclick="printAllOptions()">Print All Options</button>
</div>
<script>
$(document).ready(function() {
var positionOption = $(".gfg").toolbar("option", "position");
console.log("Theme Option: ",positionOption);
});
function changeTheme(){
$(document).ready(function() {
$(".gfg").toolbar("option", "theme", 'b');
});
}
function printAllOptions(){
$(document).ready(function() {
var allOptions = $(".gfg").toolbar("option");
console.log(allOptions);
});
}
</script>
</body>
</html>
Producción
Referencia: https://api.jquerymobile.com/toolbar/#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