jQuery UI consta de widgets GUI, efectos visuales y temas implementados mediante HTML, CSS y jQuery. jQuery UI es excelente para crear una interfaz de usuario para las páginas web. Nos proporciona un control deslizante a través del widget deslizante. El control deslizante nos ayuda a obtener un cierto valor usando un rango dado. 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.
Sintaxis:
option(optionName) Method $( ".selector" ).slider( "option", "disabled" );
o
option() Method
$( ".selector" ).slider("option");
o
option(optionName, value) Method $( ".selector" ).slider( "option", "disabled", true );
o
option(options) Method
$( ".selector" ).slider( "option", { disabled: true } );
Enfoque: 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: Este ejemplo describe la implementación del método option().
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>
<script>
$(function() {
$("#gfg").slider();
var a = $("#gfg").slider("option");
console.log(a)
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI slider option() method</h2>
<div id="gfg"></div>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo describe la implementación del método option(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>
<script>
$(function() {
$("#gfg").slider();
$("#gfg").slider("option", "disabled", true);
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI slider option(optionName, value) Method</h2>
<div id="gfg"></div>
</body>
</html>
Producción:
Ejemplo 3: Este ejemplo describe la implementación del método option(options).
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>
<script>
$(function() {
$("#gfg").slider();
$("#gfg").slider("option", {
disabled: true
});
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI slider option(options) Method</h2>
<div id="gfg"></div>
</body>
</html>
Producción:
Ejemplo 4: Este ejemplo describe la implementación del método option(optionName).
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>
<script>
$(function() {
$("#gfg").slider();
var a = $("#gfg").slider("option", "disabled");
console.log(a)
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI slider option(optionName) Method</h2>
<div id="gfg"></div>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/category/widgets/