Метод виджета jQuery UI Slider

Опубликовано: 22 Декабря, 2021

Пользовательский интерфейс jQuery состоит из виджетов графического интерфейса, визуальных эффектов и тем, реализованных с использованием jQuery, CSS и HTML. Пользовательский интерфейс jQuery отлично подходит для создания интерфейсов пользовательского интерфейса для веб-страниц. JQueryUI предоставляет нам управление ползунком через виджет ползунка. Ползунок помогает нам получить определенное значение, используя заданный диапазон. В этой статье мы увидим, как использовать метод виджета в слайдере jQuery UI. Виджет Метод используется для возвращает объект , содержащий JQuery слайдер.

Синтаксис:

 var a = $ (".selector") .slider ("виджет");

Параметры: этот метод не принимает никаких параметров.

Ссылка на CDN: сначала добавьте ссылку на CDN для скриптов пользовательского интерфейса jQuery, необходимую для вашей задачи.

<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>

Пример: в этом примере мы будем использовать метод виджета, который вернет объект jquery.

HTML

<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< link href =
rel = "stylesheet" />
< script src =
</ script >
< script src =
</ 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 >

Выход:

Ссылка: https://api.jqueryui.com/spinner/#method-widget