jQuery UI es una tecnología basada en la web y consta de varios widgets GUI, efectos visuales y temas. Estas funciones se pueden implementar mediante la biblioteca jQuery JavaScript. jQuery UI es la mejor herramienta para crear interfaces de interfaz de usuario para las páginas web. También se puede usar para crear aplicaciones web altamente interactivas o se puede usar para agregar widgets fácilmente.
En este artículo, usaremos el método jQuery Mobile Filterable option() para actualizar los elementos ordenables. Prepara la recarga de todos los elementos clasificables y permite que se reconozcan nuevos elementos.
Sintaxis:
1. Si el usuario quiere el valor de cualquier opción, el nombre de la opción debe pasarse en el método option(optionName) . El optionName debe ser un tipo de string.
var isEnhanced = $("Selector").filterable("option", "enhanced");
Parámetro:
- optionName: este parámetro es la entrada que necesitamos pasar en forma de string para la cual necesitamos obtener el valor.
- Tipo de retorno: Obtenemos el valor de retorno respectivo en función del tipo de datos de la opción.
2. Para obtener todas las opciones como pares clave-valor, solo necesita llamar al método option() sin pasar ningún parámetro al método.
var options= $("Selector").filterable("option");
Parámetro:
- Tipo de devolución: este método devuelve la lista de pares clave-valor de todas las opciones como conjunto de pares nombre-opción-valor-opción .
3. Para establecer el valor de cualquier opción, solo necesita llamar a la opción (nombre de la opción, valor) con el nombre de la opción y el valor como parámetros.
$("Selector").filterable("option", "enhanced", "false");
Parámetros:
- optionName: el método de la opción requería el nombre de la opción como primer parámetro y este parámetro es de tipo string.
- valor: el método de opción requería el nombre de la opción como segundo parámetro y este parámetro es de tipo string.
4. También podemos configurar múltiples opciones en lugar de solo una, solo necesita llamar al método de opción (opciones) donde las opciones son la lista de opciones.
$("Selector").filterable("option", {enhanced: false, disabled: true});
Parámetro:
- opción: 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.
- Valor devuelto: este método devuelve un valor de objeto.
Enlace CDN: a continuación se muestran algunos scripts de jQuery Mobile que se necesitarán para su proyecto, así que agréguelos a su proyecto.
<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: Este ejemplo describe los usos del método jQuery Mobile Filterable 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=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src=
"http://code.jquery.com/jquery-1.11.0.min.js">
</script>
<script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
<script>
$(document).ready(function () {
$(".items").filterable({});
// Bind the click event for the button
$(".btnclass").bind("click", function () {
var options = $(".items").filterable("option");
$("#gfg").html("<b>"
+ "No of key/value pair present : "
+ Object.keys(options).length + "<b>");
});
});
</script>
</head>
<body>
<center>
<div data-role="page" id="page1">
<div>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
jQuery Mobile Filterable option() Method
</h3>
</div>
<div role="main" class="ui-content">
<div>
<ul class="items"
style="list-style-type:none;">
<li>
<a href=
"https://www.geeksforgeeks.org/data-structures"
target="_blank">
Data Structures
</a>
</li>
<li>
<a href=
"https://practice.geeksforgeeks.org/courses/complete-interview-preparation"
target="_blank">
Interview preparation
</a>
</li>
<li>
<a href=
"https://www.geeksforgeeks.org/java"
target="_blank">
Java Programming
</a>
</li>
</ul>
</div>
</div>
<input type="button" Value="Button"
class="btnclass" />
<div id="gfg"></div>
</div>
</center>
</body>
</html>
Producción:
Método jQuery Mobile Filterable option()
Referencia: https://api.jquerymobile.com/filterable/#method-option
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA