Виджеты jQuery UI

jQuery UI предоставляет набор готовых виджетов предназначенных для создания пользовательского интерфейса веб-приложений.

Поведение виджетов может настраиваться с помощью передаваемых им опций.

Внешний вид виджетов может быть настроен:

С помощью выбора одной из стандартных тем доступных при скачивании библиотеки;
С помощью themeroller'a;
Вручную путем редактирования файла jquery-ui-1.8.12.custom.css.

Общий вид создания виджетов jQuery UI выглядит примерно следующим образом:

Группировка элементов на странице особым образом (индивидуально для каждого виджета);
Применение к сгруппированным элементам специального метода, который превращает их в виджет.

Виджет accordion

Виджет accordion представляет собой группу объединенных выпадающих меню из которых только одно может быть отрыто одновременно.

Данный виджет используется для группировки информации на странице с целью экономии места.

Синтаксис:

/* 1. Группируем элементы: */ 
<div id="accordion">
// 1.1. Определяем заголовок элемента
<h2><a href="#head1">Заголовок 1</a></h2>
/* 1.2. Определяем содержимое элемента (значение атрибута id содержимого должно 
совпадать со значением href заголовка) */
<div id="head1">Содержимое 1</div>
</div>
// 2. Применяем метод к сгруппированным элементам: 
$("#accordion").accordion({опция1:значение1,опцияN:значениеN});

Обратите внимание: с помощью опций, передающихся методу, Вы можете настраивать дополнительные аспекты поведения виджетов. Виджетам может быть передано сразу несколько опций.

Пример

$(document).ready(function() {
   $("#accordion").accordion();
});

Виджет autocomplete

Виджет autocomplete позволяет ускорить ввод данных в поле, отображая по мере введения определенные предположения. Выбрав одно из предположений пользователь может автоматически завершить ввод.

Предположения выводится в случае, если данные введенные пользователем совпадают со значением одного из элементов из списка данных.

Вы можете подключать к виджету как локальные (т.е. определенные в скрипте на этой же странице) так и удаленные списки (т.е. находящиеся на удаленном сервере).

Локальные списки удобны для хранения небольших наборов данных (например список улиц города), а удаленные списки подходят для хранения больших наборов данных (например база данных всех городов мира).

Синтаксис:

/* 1. Определяем элемент input, в который будет производиться ввод информации */
<input id='auto' />
/* 2. Превращаем input в виджет autocomplete */
$('#auto').autocomplete({опция1:значение1,опцияN:значениеN})

Подключить к виджету список данных можно с помощью опции source.

С помощью опции minLength Вы можете указать минимальное количество символов, которое должно содержать поле ввода прежде, чем поиск совпадений начнет выполнятся.

Пример

$(document).ready(function() {
   $("#auto1").autocomplete({source:["Дмитрий","Мария","Владимир","Алексей","Екатерина","Олег","Ольга"]});
});

Виджет datepicker

Виджет datepicker привязывает к текстовому полю интерактивный календарь, который отображается когда поле становится активным.

Если пользователь щелкнет на какую-либо дату в календаре она будет автоматически введена в текстовое поле как будто он ввел ее вручную.

Синтаксис:

// 1. Создадим текстовое поле
<input type='text' id='datepicker' />
// 2. Привяжем к нему виджет datepicker 
$('#datepicker').datepicker({опция1:значение1, опцияN:значениеN});

Пример

$(document).ready(function() {
   $("#datepicker").datepicker();
   $("#datepicker1").datepicker({
      monthNames:["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"],
      dayNamesMin:["Вс","Пн","Вт","Ср","Чт","Пт","Сб"],
      firstDay:1,
      dateFormat:"dd.mm.yy"
   });
});

Оформление кнопок

С помощью метода button Вы можете стилизовать:

обычные кнопки (определяемые тэгами button и input type='button')
кнопки отправления форм
радио кнопки
флажки
ссылки

Синтаксис:

/* Если Вы хотите оформить только один элемент, необходимо выбрать его с помощью 
селектора и вызвать метод button: */
$("селектор").button({опция1:значение1, опцияN:значениеN});
/* Если Вы оформляете группу элементов, необходимо вначале сгруппировать элементы 
следующим образом: */
<div id="groupradio">
<input type="radio" name="radio" id="value1" />
<label for="value1">Радио кнопка 1</label>
<input type="radio" name="radio" id="value2" />
<label for="value2">Радио кнопка 2</label>
<input type="radio" name="radio" id="value3" />
<label for="value3">Радио кнопка 3</label>
</div> 
// И затем вызвать метод buttonset:
$("#groupradio").buttonset({опция1:значение1, опцияN:значениеN});

Пример

$(document).ready(function() {
   $("#but1,#but2,#but3,#but4").button();
   $("#group1,#group2").buttonset();
});

Виджет tabs

Виджет tabs как и виджет accordion используется для группировки информации на странице с целью экономии места.

Синтаксис:

// 1. Создаем шаблон: 
<div id="tabs">
// 1.1. Определяем заголовки вкладок
<ul>
<li><a href="#tabs-1">Вкладка 1</a></li>
<li><a href="#tabs-2">Вкладка 2</a></li>
<li><a href="#tabs-3">Вкладка 3</a></li>
</ul>
/* 1.2. Определяем содержимое вкладок (значение атрибута href заголовков
и значение атрибута id содержимого должно совпадать) */ 
<div id="tabs-1">
<p>Содержимое вкладки 1</p>
</div>
<div id="tabs-2">
<p>Содержимое вкладки 2.</p>
</div>
<div id="tabs-3">
<p>Содержимое вкладки 3.</p>
</div>
</div>
// 2. Превращаем шаблон в группу вкладок:
$("#tabs").tabs({опция1:значение1, опцияN:значениеN});

Пример

$(document).ready(function() {
   $("#tabs").tabs();
});

Диалоговые окна

С помощью метода dialog Вы можете превратить выбранный элемент в диалоговое окно.

Диалоговое окно отображается поверх текста страницы и содержит заголовок и поле с содержимым.

Диалоговое окно можно перетаскивать, растягивать и закрывать с помощью иконки "х" в верхнем правом углу окна. Если содержимое превышает размеры диалогового окна, то полоса прокрутки будет автоматически отображена.

Синтаксис:

/* 1. Сгруппируем элементы: */ 
<div id="dialog" title="Заголовок диалогового окна">
<p>Содержимое окна.</p>
</div>
// 2. Превратим сгруппированные элементы в диалоговое окно:
$( "#dialog" ).dialog({опция1:значение1, опцияN:значениеN});

Пример

$(document).ready(function() {
   $("#dialog1").dialog();
});

С помощью опции width и height Вы можете устанавливать высоту и ширину диалоговых окон.

Пример

$(document).ready(function() {
   $("#dialog1").dialog({width:400,height:300});
});

Опция modal позволяет сделать диалоговое окно модальным.

Модальные окна используются для привлечения дополнительного внимания со стороны пользователей. Пока открыто модальное окно пользователь не может взаимодействовать с другими элементами страницы.

Пример

$(document).ready(function() {
   $("#dialog1").dialog({modal:true,height:200,width:330});
});

Опция autoOpen устанавливает должно ли окно быть открыто автоматически после создания (значение true) или нет (значение false).

С помощью метода open Вы можете открыть, а с помощью метода close закрыть модальное диалоговое окно.

С помощью опции buttons Вы можете добавлять кнопки в диалоговые окна. Кнопки определяются в следующем формате: {Название_Кнопки : function(){Код который выполниться после нажатия на кнопку}}.

Обратите внимание: в одно диалоговое окно может быть добавлено несколько кнопок.

Пример

$(document).ready(function() {
   $("#dialog1").dialog({autoOpen:false,buttons:{
      OK:function(){
         $(this).dialog("close");
         alert("Вы нажали ОК");}}
   });
   $("#dialog2").dialog({autoOpen:false,buttons:{
      OK:function(){
         $(this).dialog("close");
         alert("Вы нажали ОК");},
      Отмена:function(){
         $(this).dialog("close");
         alert("Вы нажали Отмена");}}
   });
   $("#but1").click(function(){
      $("#dialog1").dialog("open");
   });
   $("#but2").click(function(){
      $("#dialog2").dialog("open"); 
   });
});

Виджет progressbar

С помощью виджета progressbar Вы можете отобразить полосу загрузки, которая будет информировать пользователя о состоянии выполнения какого-либо процесса.

Синтаксис:

/* 1. Создадим элемент: */ 
<div id="progressbar" ></div>
// 2. Превратим созданный элемент в полосу загрузки:
$("#progressbar" ).progressbar();

С помощью опции value Вы можете установить процент заполнения виджета progressbar.

Пример

$(document).ready(function() {
   $("#progressbar").progressbar({value:40});
});

Виджет slider

С помощью виджета slider Вы можете превратить выбранный элемент в ползунок.

Синтаксис:

// 1. Создадим элемент:
<div id="slider" ></div>
// 2. Превратим созданный элемент в ползунок:
$("#slider").slider();

Пример

$(document).ready(function() {
   $("#slider").slider();
});

Следующая лекция