jQuery UI consta de widgets GUI, efectos visuales y temas implementados mediante jQuery, CSS y HTML. jQuery UI es excelente para crear interfaces de interfaz de usuario para las páginas web. El widget giratorio jQuery UI nos ayuda a incrementar y disminuir los valores del elemento de entrada usando la flecha hacia arriba y hacia abajo. En este artículo, veremos cómo usar el método option() en el control deslizante jQuery UI. El método option() se usa para obtener un objeto para la opción de control deslizante actual en particular en el control giratorio jQuery UI.
Sintaxis:
var a = $(".selector").spinner("option");
var a = $(".selector").spinner("optionName","value");
var a = $(".selector").spinner("options");
Acercarse:
- Primero, agregue los scripts jQuery UI necesarios para su proyecto.
<enlace href = “https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css” rel=”hoja de estilo”>
<secuencia de comandos src = «https://code.jquery.com/jquery-1.10.2.js»></secuencia de comandos>
<secuencia de comandos src = «https://code.jquery.com/ui/1.10.4/jquery-ui.js»></secuencia de comandos>
Ejemplo 1: el siguiente código demuestra el método .spinner(opción) .
HTML
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<link href =
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src =
"https://code.jquery.com/jquery-1.10.2.js">
</script>
<script src =
"https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<style type = "text/css">
#gfg input {width: 100px}
</style>
<script>
$(function() {
$("#gfg").spinner();
$('button').button();
var a = $("#gfg").spinner("option");
console.log(a)
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI | spinner option method</h2>
<input id = "gfg" />
</body>
</html>
Producción:
Salida de la consola:
Ejemplo 2: el siguiente código muestra el método .spinner(optionName,value) .
HTML
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<link href =
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src =
"https://code.jquery.com/jquery-1.10.2.js">
</script>
<script src =
"https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<style type = "text/css">
#gfg input {width: 100px}
</style>
<script>
$(function() {
$("#gfg").spinner();
$('button').button();
var a = $("#gfg").spinner("option","disabled",true);
console.log(a)
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI | spinner option method</h2>
<input id = "gfg" />
</body>
</html>
Producción:
- Cuando la opción deshabilitada es falsa , da el siguiente resultado.
- Cuando la opción deshabilitada es verdadera, da el siguiente resultado.
Ejemplo 3: El siguiente código demuestra el método .spinner(options) . El siguiente código tiene 2 opciones como { disabled: false,step: 2 }.
HTML
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<link href =
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src =
"https://code.jquery.com/jquery-1.10.2.js">
</script>
<script src =
"https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<style type = "text/css">
#gfg input {width: 100px}
</style>
<script>
$(function() {
$("#gfg").spinner();
$('button').button();
var a = $("#gfg").spinner( "option", { disabled: false,step: 2 } );
console.log(a)
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI | spinner option method</h2>
<input id = "gfg" />
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/category/widgets/