jQuery UI предоставляет набор готовых виджетов для построения пользовательского интерфейса.
ТвитнутьВиджет 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});
С помощью метода dialog Вы можете превратить выбранный элемент в диалоговое окно.
Диалоговое окно отображается поверх текста страницы и содержит заголовок и поле с содержимым.
Диалоговое окно можно перетаскивать, растягивать и закрывать с помощью иконки "х" в верхнем правом углу окна. Если содержимое превышает размеры диалогового окна, то полоса прокрутки будет автоматически отображена.
Синтаксис:
/* 1. Сгруппируем элементы: */
<div id="dialog" title="Заголовок диалогового окна">
<p>Содержимое окна.</p>
</div>
// 2. Превратим сгруппированные элементы в диалоговое окно:
$( "#dialog" ).dialog({опция1:значение1, опцияN:значениеN});
С помощью опции 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 Вы можете отобразить полосу загрузки, которая будет информировать пользователя о состоянии выполнения какого-либо процесса.
Синтаксис:
/* 1. Создадим элемент: */
<div id="progressbar" ></div>
// 2. Превратим созданный элемент в полосу загрузки:
$("#progressbar" ).progressbar();
С помощью опции value Вы можете установить процент заполнения виджета progressbar.
Пример
$(document).ready(function() {
$("#progressbar").progressbar({value:40});
});
С помощью виджета slider Вы можете превратить выбранный элемент в ползунок.
Синтаксис:
// 1. Создадим элемент:
<div id="slider" ></div>
// 2. Превратим созданный элемент в ползунок:
$("#slider").slider();
Обратите внимание: узнать больше о виджетах Вы можете в нашем jQuery UI справочнике.
Задание 1 выполните подпункты перечисленные ниже:
Пример
$(document).ready(function(){
$("sd1").slier();
$("pb1").progresbar({val=75%});
});