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 jQueryUI 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 de widget en el control deslizante de jQuery UI. El método de widget devuelve el elemento de widget de control giratorio en el control giratorio de jQuery UI.
Sintaxis:
$(".selector").spinner("widget");
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:
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('widget');
console.log(a)
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI spinner widget method</h2>
<input id = "gfg" />
</body>
</html>
Producción:
