La interfaz de usuario de jQuery consta de widgets de 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. jQueryUI 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 de widget en el control deslizante de jQuery UI. El método widget se usa para devolver un objeto jQuery que contiene el control deslizante.
Sintaxis:
var a = $( ".selector" ).slider("widget");
Parámetros: Este método no acepta ningún parámetro.
Enlace CDN:
<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: En este ejemplo, usaremos el método widget que devolverá un objeto jquery.
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("value");
});
function gfgg(){
var a = $( "#gfg" ).slider("widget");
console.log(a)
}
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI | slider widget method</h2>
<div id = "gfg" onclick="gfgg()"></div>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/spinner/#method-widget