• Геннадий Самков
• jQuery. Сборник рецептов (+ CD-ROM)
• Издательство: БХВ-Петербург, 2011 г.
• Мягкая обложка, 416 стр.
• ISBN 978-5-9775-0732-5
• Тираж: 1500 экз.
• Формат: 70×100/16

Аннотация:
Книга является сборником решений наиболее часто встречающихся задач при веб-программировании пользовательских интерфейсов с использованием библиотеки jQuery. Рассмотрены практически все методы и вспомогательные функции jQuery, в том числе обеспечивающие взаимодействие jQuery и AJAX. Подробно рассказано о надстройке UI jQuery. Приведено большое количество примеров использования плагинов для jQuery – создание графиков и диаграмм, фотогалерей, меню, работа с таймерами и cookies, обработка табличных данных и др. Во втором издании в примерах используется библиотека jQuery версий 1.4.4 и 1.5.2, а также надстройка UI jQuery 1.8.9.
Компакт-диск содержит примеры из книги, файлы библиотеки jQuery 1.4.4 и 1.5.2, файлы надстройки UI jQuery 1.8.9, а также файлы расширений сторонних разработчиков.

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

Отрывок книги в PDF

Полное содержание:

Виджет Autocomplete помогает организовать список подходящих значений при заполнении пользователем поля ввода.

Для начала посетим страницу настраиваемой закачки на сайте jQuery UI, чтобы получить необходимые нам файлы. Щелкаем на ссылке Deselect all component, чтобы не закачивать лишнее, а затем выбираем только то, что нам потребуется – отмечаем чекбокс Autocomplete и видим, что вместе с ним отметились чекбоксы Core, Widget и Position. Работа виджета Autocomplete зависит от этих файлов.

Кроме этого, справа есть выпадающий список, где можно выбрать понравившуюся тему оформления. Если все готово, кликаем кнопку Download и получаем архив. Возможности виджета можно оценить в демо-галерее на сайте разработчика. Я лишь постараюсь по-русски и как можно более простым языком объяснить, как заставить все это работать.

Итак, сначала в разделе HEAD потребуется подключить несколько файлов, которые есть в архиве.

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.9.custom.css" rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>

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

Виджет Autocomplete не требует сложной HTML-разметки. Достаточно всего лишь поля для ввода текста, т.е. обычного элемента input, который имеет значение text в атрибуте type. Дополнительную разметку можно добавить, чтобы использовать стили в соответствии с выбранной темой оформления.

<div class="ui-widget">
	<label for="tags">Tags: </label>
	<input id="tags" type="text" />
</div>

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

<script type="text/javascript">
$(function(){
  var availableTags = ["ActionScript","AppleScript","Asp","BASIC",
  "C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran",
  "Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP",
  "Python","Ruby","Scala","Scheme"];

  $("#tags").autocomplete({
    source: availableTags
  });
});
</script>

В переменной availableTags приготовили массив с подсказками. Затем выбрали элемент input по его идентификатору и применили метод autocomplete, которому сразу передали объект с настройками. Пока этот объект с единственным свойством source, которое определяет источник данных. В нашем случае указан массив availableTags.

На самом деле мы можем немного поднастроить виджет, используя другие свойства объекта настроек. Вот список этих свойств:

source – опция не имеет значения по умолчанию и должна быть обязательно определена. Значением опции может являться строка, массив или функция. В любом случае в этой опции должен быть указан источник данных.
minLength – значение по умолчанию 1. В этой опции указывается количество символов, которое должно быть введено в поле ввода прежде, чем активизируются подсказки. Значение 0 полезно при использовании локальных данных при списках из нескольких позиций. Это значение должно быть увеличено при использовании запросов к серверу для получения данных и при использовании больших списков, где одному введенному символу может соответствовать несколько тысяч наименований.
delay – значение по умолчанию 300. В этой опции указывается количество миллисекунд, которое должно пройти после нажатия очередной клавиши, чтобы активизировался запрос на получение данных. Нулевое значение имеет смысл при использовании локальных данных. При использовании запросов к серверу нулевое значение в этой опции может породить серьезную нагрузку
appendTo – значение по умолчанию ‘body’. В качестве значения этой опции может быть использован селектор jQuery. Определяет, к какому элементу должен быть добавлен выпадающий список подсказок.
disabled – значение по умолчанию false. Если установить значение true, то при инициализации функциональность виджета Autocomplete будет недоступна, однако может быть включена впоследствии, например, при выполнении какого-либо условия.

Дальше посмотрим, как виджет может реагировать на события.

<script type="text/javascript">
$(function(){
  var availableTags = ["ActionScript","AppleScript","Asp","BASIC",
  "C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran",
  "Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP",
  "Python","Ruby","Scala","Scheme"];
  $("#tags").autocomplete({
    source: availableTags,
    select: function(event, ui) {
      alert('Событие: ' + event.type +
            ',\nзначение: ' + ui.item.value);
    }
  });
});
</script>

Здесь мы добавили свойство select, где определили функцию, которая будет вызываться в тот момент, когда пользователь выберет какое-либо значение из списка подсказок. функция принимает два аргумента: первый — объект event, второй — специальный объект ui. Организовав доступ к свойствам этих объектов, можно получить полезную информацию (мы выводим ее в окне предупреждения).

Это не единственное событие на которое умеет реагировать виджет – вот полный их список, где указано название свойства в объекте с настройками, название события в event.type и описание события:

create – Событие autocompletecreate наступает в момент инициализации.
search – событие autocompletesearch наступает перед выполнением запроса. Если функция, определенная в этой опции вернет false, запрос не будет отправлен.
open – событие autocompleteopen наступает в момент, когда открывается выпадающий список подсказок.
focus – событие autocompletefocus наступает всякий раз, когда один из пунктов списка подсказок получает фокус.
select – событие autocompleteselect наступает, когда выбран один из пунктов списка подсказок.
close – событие autocompleteclose наступает, когда список подсказок закры-вается. Событие наступает независимо от того, был выбран один из пунктов или нет.
change – событие autocompletechange наступает после того, как выбран один из пунктов списка. Событие всегда наступает после close.

Есть у виджета и некоторые методы, с помощью которых можно еще более расширить его функциональность.

Для примера добавьте в HTML-разметку пару кнопок:

<button id="search">Искать "as"</button>
<button id="close">Закрыть</button>
<div class="ui-widget">
	<label for="tags">Tags: </label>
	<input id="tags" type="text" />
</div>

И вот такой JS-код:

<script type="text/javascript">
$(function(){
  var availableTags = ["ActionScript","AppleScript","Asp","BASIC",
  "C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran",
  "Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP",
  "Python","Ruby","Scala","Scheme"];
  $("#tags").autocomplete({
    source: availableTags,
    minLength: 0
  });
  $("#search").click(function(){
    $("#tags").autocomplete("search", "as");
  });
  $("#close").click(function(){
    $("#tags").autocomplete("close");
  });
});
</script>

Теперь, щелкая по кнопке Искать «as» мы можем имитировать действия пользователя, как если бы он ввел символы «as» в элементе input. Щелкнув по кнопке Закрыть – закрываем список подсказок, если он был открыт ранее.

Ниже приведены описания всех доступных методов:

destroy – .autocomplete( ‘destroy’ ) полностью удаляет всю функциональность виджета Autocomplete. Возвращает элементы в состояние, предшествующее инициализации.
disable – .autocomplete(‘disable’) временно запрещает использование всей функциональности виджета. Вновь разрешить ее можно с помощью метода enable.
enable – .autocomplete(‘enable’) разрешает использование всей функциональности виджета, если ранее она была запрещена методом disable.
option – .autocomplete(‘option’, optionName, [value]) с помощью этого метода можно установить значение любой опции виджета после инициализации.
option – .autocomplete(‘option’, optionName) с помощью этого метода можно получить значение любой опции виджета после инициализации.
widget – .autocomplete(‘widget’) с помощью этого метода можно получить доступ к объекту, который представляет собой элемент с функциональностью Autocomplete.
search – .autocomplete(’search, [value]‘) с помощью этого метода без передачи второго па-раметра можно открыть весь список. Если передать во втором параметре строку символов, то будет открыт список с подходящими подсказками.
close – .autocomplete(‘close’) закрывает список подсказок, если он был открыт ранее.

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

Опция source, которая, напомню, является обязательной и определяет источник данных, может принимать также строку, где содержится url, к которому следует отправлять запрос. А еще в source можно определить свою функцию, которая будет делать, то что надо именно Вам. Вот этот, пожалуй самый гибкий способ мы и разберем. Попробуем получить в виде списка подсказок какие-либо данные с сервера geonames.org

Я приведу полностью рабочий код и попробую разъяснить, как и что работает.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-17-8-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.9.custom.css" rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<style type="text/css">
.ui-autocomplete-loading {
  background: #FFF url('css/ui-lightness/images/ui-anim_basic_16x16.gif') right center no-repeat;
}
#city { width: 25em; }
#log { height: 200px; width: 600px; overflow: auto; }
</style>
<script type="text/javascript">
$(function() {
  $("#city").autocomplete({
    source: function(request,response) {
      $.ajax({
        url: "http://ws.geonames.org/searchJSON",
        dataType: "jsonp",
        data: {
          featureClass: "P",
          style: "full",
          maxRows: 12,
          name_startsWith: request.term
        },
        success: function(data) {
          response($.map(data.geonames, function(item) {
            return {
              label: item.name + ", " + item.countryName,
              value: item.name + " (" + item.countryName + ")" + " [" + item.lat + ", " + item.lng + "]"
            }
          }));
        }
      });
    },
    minLength: 3,
    select: function(event,ui) {
      $("<p/>").text(ui.item ? ui.item.value : "Ничего не выбрано!").prependTo("#log");
      $("#log").attr("scrollTop", 0);
    }
  });
});
</script>
</head>
<body>
<div class="ui-widget">
  <label for="city">Город: </label><input id="city" /><br />
  <span style="font-size:.8em;">Поддерживается <a href="http://geonames.org">geonames.org</a></span>
</div>
<div id="log" class="ui-widget ui-widget-content"></div>
</body>
</html>

Сначала смотрим на HTML-разметку. В первом элементе div нас интересует только элемент input с идентификатором city. Сюда будем вводить начальные буквы (на латинице) населенного пункта, информацию о котором мы хотели бы получить. Элемент div с идентификатором log используем для занесения в него полученной информации.

Если смотреть JavaScript-код, то увидим, что объект с настройками содержит три свойства — обязательное свойство source, а также свойства minLength и select.
Мы займемся рассмотрением только свойства source, где можно написать свою функцию. Эта функция принимает два аргумента. Первый аргумент — request — объект, содержащий единственное свойство term, в котором хранится строка, введенная пользователем в поле ввода. Второй аргумент — response — функция, с помощью которой будет обрабатываться полученный ответ.

Внутри функции, определенной в свойстве source мы имеем практически неограниченную свободу действий. А поэтому, не мудрствуя, пишем там ajax-запрос к url http://ws.geonames.org/searchJSON, в опции dataType указываем, что в ответе ожидаем получить данные в формате JSON. В опции data определяем объект с параметрами запроса, который будет отправляться на указанный url (почему параметры именно такие – надо смотреть документацию по API на сервере geonames.org). В последнем параметре передаем request.term – то, что ввел пользователь.

В следующей опции ajax-запроса – опции success, вызываем функцию обработки ответа response. В аргументе, который мы передаем этой функции, мы можем обрабатывать данные, полученные в ответе сервера так, как нам будет угодно. Мы используем метод $.map чтобы применить некоторую функцию к каждому элементу объекта, переданному в первом аргументе. Внутри функции мы можем обращаться к свойствам объекта — item.countryName, item.lng, item.lat (почему свойства именно такие – см. документацию по API, которую предоставляет веб-сервис). Функция, которую мы написали, для каждого элемента возвращает объект, содержащий два свойствами, которые мы определили самостоятельно, используя полученные данные. Из получившегося массива таких объектов и строится список подсказок.

В общем, вот так как-то… В заключение, большая человеческая просьба – в комментариях пожалуйста, можете похвалить или поругать в принципе. Если же Вы хотите задать технический вопрос, то задавайте его на форуме jQuery.

Для начала посетим страницу настраиваемой закачки на сайте jQuery UI, чтобы получить необходимые нам файлы. Щелкаем на ссылке Deselect all component, чтобы не закачивать лишнее, а затем выбираем только то, что нам потребуется – отмечаем чекбокс Sortable и видим, что вместе с ним отметились чекбоксы UI Core и Draggable. Работа плагина Sortable зависит от них, поэтому они необходимы.
Кроме этого, справа есть выпадающий список, где можно выбрать понравившуюся тему оформления. Если все готово, кликаем кнопку Download и получаем архив.

Сначала в разделе HEAD подключаем несколько файлов, которые есть в архиве:

<link type="text/css" href="css/sunny/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

Здесь мы подключили файл стилей css/sunny/jquery-ui-1.7.2.custom.css одной из многочисленных тем оформления. Хотите использовать Ваше собственное оформление – пожалуйста, но в примере мы используем готовое. Кроме этого мы подключили файл библиотеки – js/jquery-1.3.2.min.js и файл js/jquery-ui-1.7.2.custom.min.js, в котором объединена функциональность ядра UI и плагинов Sortable и Draggable.

Смотрим HTML-разметку. Пусть у нас она будет выглядеть так:

<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
  <li class="ui-state-default">Item 6</li>
  <li class="ui-state-default">Item 7</li>
</ul>

и следующий javascript-код, который применит к выбранному элементу функциональность плагина Sortable.

$(function(){
  $("#sortable").sortable();
});

Открыть пример в новом окне

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

$(function(){
  $("#sortable").sortable({
  	placeholder: "ui-state-highlight",
  	opacity: 0.6
  });
});

Открыть пример в новом окне

Опция placeholder передает плагину имя css-класса, который будет применен к той позиции, откуда элемент начал перемещение (или куда он может быть помещен), а опция opacity устанавливает прозрачность элемента во время перемещения. Значения остальных опций передаются плагину подобным образом.

appendTo – по умолчанию эта опция имеет значение ‘parent’. В ней можно передать селектор jQuery или элемент, который будет использован в качестве контейнера для объекта, представляющего сортируемый элемент во время его перемещения.
axis – в качестве значения используется строка. Доступные значения ‘x’ или ‘y’. По умолчанию установлено false. Если определить эту опцию, сортируемые элементы смогут перемещаться только по вертикали или горизонтали.
cancel – в качестве значения используется селектор jQuery. Предотвращает сортировку, если она начинается на элементе, указанном в это опции. По умолчанию используется значение ‘:input,button’.
connectWith – в качестве значения принимает селектор jQuery, где можно указать другой сортируемый список, в который можно будет перемещать сортируемые элементы, таким образом, что они станут частью другого сортируемого списка.
containment – ограничивает перемещение внутри определенного элемента или области. В качестве значения может принимать селектор jQuery, элемент или строку. Примеры возможных значений: ‘parent’, ‘document’, ‘window’. По умолчанию – false.
cursor – строка, определяющая вид курсора в процессе перемещения элемента. По умолчанию установлено значение ‘auto’.
cursorAt – объект, который определяет положение указателя мыши во время перемещения элемента. Для задания координат используется комбинация одного или двух свойств из четырех возможных – ‘top’, ‘right’, ‘bottom’ и ‘left’. Например: {top: 10, left: 20} или {bottom: 5}. По умолчанию – false.
delay – число, указанное в этой опции, определяет отсрочку начала перемещения элемента. Указывается в миллисекундах. Опция помогает предотвратить нежелательное перемещение элемента во время случайного щелчка мышью. По умолчанию используется значение 0.
distance – число в пикселах, определяющее расстояние, которое должен пройти указатель мыши (с одновременно нажатой левой клавишей), чтобы начался процесс перемещения элемента. Опция помогает предотвратить нежелательное перемещение элемента во время случайного щелчка мышью. По умолчанию используется значение 1.
dropOnEmpty – по умолчанию используется значение true. В этом случае, если один из связанных списков пустой, в него можно перемещать элементы из другого списка. Если установить значение false, эта возможность будет запрещена.
grid – по умолчанию – false. Значением может быть массив из двух чисел, определяющий шаг сетки, по которой будет перемещаться сортируемый элемент. Например: grid: [20,20]
handle – по умолчанию установлено значение false. В качестве значения можно указать селектор jQuery или элемент. В этом случае процесс сортировки можно будет начать только в том случае, если левая клавиша мыши нажата в момент нахождения указателя мыши над элементом, определенным в этой опции.
helper – по умолчанию используется значение ‘original’. В этом случае, при сортировке, перемещаемый элемент представлен самим элементом. Другое возможное значение ‘clone’. В этом случае элемент при перемещении представлен своей копией.
items – в качестве значения используется селектор jQuery. По умолчанию установлено значение ‘> *’. Опция определяет, какие элементы, являющиеся элементами-потомками того элемента, с которым связана функциональность плагина, могут быть сортируемыми.
opacity – значение опции может изменяться от 0.01 до 1 и определяет прозрачность перемещаемого элемента. По умолчанию – false.
placeholder – имя css-класса, который будет применен к той позиции, откуда элемент начал перемещение. Если значение опции не определено «пустая» позиция никак не оформляется.
revert – по умолчанию используется значение false. Если использовать значение true, то при перемещении элемента, после того, как будет отпущена клавиша мыши, элемент переместится на свою новую позицию с использованием плавного анимационного эффекта.
scroll – по умолчанию установлено значение true – при перемещении элемента к краю области просмотра, она автоматически прокручивается бесконечно. Если установить значение false, эта возможность будет запрещена.
scrollSensitivity – число, определяющее расстояние в пикселах от края области просмотра, после которого она начинает прокручиваться. Расстояние определяется относительно указателя мыши, а не перемещаемого элемента. По умолчанию установлено значение 20.
scrollSpeed – число, определяющее скорость, с которой прокручивается область просмотра при приближении указателя мыши к ее краю на расстояние определенное в опции scrollSensitivity. По умолчанию установлено значение 20.
tolerance – по умолчанию эта опция имеет значение ‘intersect’. При этом элемент, перемещаемый во время сортировки должен перекрыть любой другой сортируемый элемент как минимум на 50%, чтобы тот «освободил» занимаемое место. Другое возможное значение – ‘pointer’. При этом над сортируемым элементом должен оказаться только указатель мыши.
zIndex – число, которое определяет значение css-свойства z-index для элемента в момент его сортировки.

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

$(function(){
  $("#sortable").sortable({
  	placeholder: "ui-state-highlight",
  	opacity: 0.6,
  	stop: function(event, ui) {
  	  alert(event.type);
  	}
  });
});

Открыть пример в новом окне

Здесь мы использовали только опцию stop, в которой определили функцию, которая будет вызвана в момент окончания сортировки. Функция может принимать два аргумента. Первый аргумент – объект события, второй – специальный объект ui, в свойствах которого можно обнаружить разнообразную полезную информацию. Но в приведенном примере мы используем только свойство type объекта события, чтобы вывести в окне предупреждения название события, вызвавшего нашу функцию.

А вот пример того, как можно использовать специальный объект ui:

$(function(){
  $("#sortable").sortable({
    placeholder: "ui-state-highlight",
    opacity: 0.6,
    helper: "clone",
    change: function(event, ui) {
      ui.helper.css("color","#f00");
    }
  });
});

Открыть пример в новом окне

Мы использовали опцию change, чтобы вызвать функцию в момент изменения положения сортируемого элемента. Внутри функции мы обращаемся к одному из свойств объекта ui – к свойству helper. Это свойство является объектом, который представляет перемещаемый элемент во время сортировки. Используя метод css(name,value) мы устанавливаем красный цвет шрифта на перемещаемом элементе. Но, как только этот элемент займет свое новое место в списке, цвет шрифта вернется к исходному значению. Догадались почему? Если нет, то обратите внимание на опцию helper. Установив значение clone в этой опции, мы использовали во время перемещения не сам исходный объект, а его копию.
Кстати, helper – это не единственное полезное свойство объекта ui, есть и другие:

ui.helper – объект, характеризующий элемент, находящийся в процессе перемещения;
ui.position – объект, в свойствах top и left которого содержится информация о положении перемещаемого элемента относительно родительского элемента;
ui.offset – объект, в свойствах top и left которого содержится информация об абсолютном положении перемещаемого элемента;
ui.item – объект, представляющий сортируемый элемент;
ui.placeholder – объект, представляющий место, откуда был перемещен сортируемый элемент (или куда он будет перемещен);
ui.sender – объект, который представляет элемент-контейнер для сортируемых элементов, откуда сортируемый элемент был перемещен (при использовании связанных списков);

Ниже перечислены опции, связанные с событиями плагина Sortable, их довольно много:
Опция start – событие sortstart наступает в момент начала сортировки.
Опция sort – событие sort наступает постоянно в течение сортировки.
Опция change – событие sortchange наступает во время сортировки, но только в том случае, если изменилось положение сортируемого элемента в объектной модели документа.
Опция beforeStop – событие sortbeforeStop наступает в момент сортировки, перед ее окончанием (когда отпущена левая клавиша мыши).
Опция stop – событие sortstop наступает в момент окончания сортировки.
Опция update – событие sortupdate наступает в момент окончания сортировки, но только в том случае, если порядок сортируемых элементов был изменен.
Опция receive – событие sortreceive наступает, когда связанный сортируемый список принимает элемент из другого списка.
Опция remove – событие sortremove наступает, когда элемент покидает один связанный список, и перемещается в другой.
Опция over – событие sortover наступает, когда сортируемый элемент перемещен в связанный список.
Опция out – событие sortout наступает, когда сортируемый элемент перемещен из связанного списка.
Опция activate – событие sortactivate наступает при использовании связанных списков, для каждого связанного списка при начале процесса сортировки.
Опция deactivate – событие sortdeactivate наступает при использовании связанных списков, для каждого связанного списка при окончании процесса сортировки.

А теперь – методы плагина. С помощью методов можно управлять плагином после инициализации. Сначала добавим кнопочку в HTML-разметку:

<button id="cancelSort">Cancel Sort</button>

и небольшой пример:

$(function(){
  $("#sortable").sortable({
  	placeholder: "ui-state-highlight",
  	opacity: 0.6
  });
  $("#cancelSort").click(function(){
  	$("#sortable").sortable("cancel");
  });
});

Открыть пример в новом окне

Метод .sortable(«cancel») использованный в примере, один из самых полезных методов плагина. Он позволяет отменить результат последней операции сортировки и вернуть элементы к предшествующему состоянию.
Обратите внимание на элемент button с идентификатором #cancelSort. С кнопкой связан обработчик события click, по которому и вызывается метод соответствующий метод.
Если Вы попробуете переместить один из элементов с писка на новое место, а затем нажать на кнопку cancelSort, список вернется в предыдущее состояние.

Но конечно, этот метод не единственный. Вот другие:
destroy – .sortable(‘destroy’) полностью удаляет всю функциональность плагина Sortable. Возвращает элементы в состояние, предшествующее инициализации.
disable – .sortable(‘disable’) временно запрещает использование всей функциональности плагина. Вновь разрешить ее использование можно с помощью метода enable.
enable – .sortable(‘enable’) разрешает использование всей функциональности плагина, если ранее она была запрещена с использованием метода disable.
option – .sortable(‘option’, optionName, [value]) с помощью этого метода можно получить или установить значение любой опции плагина после инициализации.
serialize – .sortable(’serialize’, [option]) упорядочивает значение атрибутов id элементов сортируемого списка в строку, которую можно передать на сервер с помощью ajax-запроса. Предъявляет требования к формату записи значения атрибута id. Допустимые форматы: id=’name_number’ или id=’name-number’. В этом случае вид строки получается ‘name[]=number& name[]=number’. Вторым, необязательным параметром, можно передать объект. Возможные значения: ‘key’ – заменит часть ‘name[]‘ на необходимую Вам, ‘attribute’ – попробует получить значения из атрибута, отличного от id, ‘expression’ – можно использовать свое регулярное выражение.
toArray – .sortable(‘toArray’) упорядочивает значение атрибутов id элементов сортируемого списка в массив.
cancel – .sortable(‘cancel’) отменяет результат последней операции сортировки и возвращает элемент в состояние, предшествующее этой операции. Метод полезен при использовании в callback-функциях, связанных с событиями stop или receive.

Ну, и «на сладкое» – конечно обязательно надо дать пример использования связанных списков.

$(function(){
  $("#sortable1, #sortable2").sortable({
  	connectWith: ".connectedSortable",
  	tolerance: "pointer"
  });
});

Открыть пример в новом окне

Я привел пример только javascript-кода, поскольку в HTML-коде страницы ничего особенного нет – просто два ненумерованных списка #sortable1 и #sortable2. С помощью javascript-кода мы сделаем их сортируемыми, указав их идентификаторы в селекторе jQuery и связав с ними функциональность Sortable. Самое главное заключается в использовании опции connectWith. Здесь мы указываем имя класса для того списка, который хотим сделать связанным с другим списком.
Обратите внимание, что атрибут class со значением connectedSortable мы присвоили обоим спискам и добились того, что элементы могут перемещаться не только из первого списка во второй, но и наоборот. Если бы мы захотели организовать только «одностороннее движение», скажем из первого списка во второй, мы бы присвоили класс connectedSortable только второму списку.

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

Все примеры, использованные в статье, можно совершенно запросто получить в этом архиве.

Идем на страницу настраиваемой закачки на сайте jQuery UI, чтобы получить необходимые нам файлы. Щелкаем на ссылке Deselect all component, чтобы не закачивать лишнее, а затем выбираем только то, что нам потребуется – отмечаем чекбокс Selectable и видим, что вместе с ним отметился чекбокс UI Core. Работа плагина Selectable зависит от него, поэтому он необходим.
Кроме этого, справа есть выпадающий список, где можно выбрать понравившуюся тему оформления. Если все готово, кликаем кнопку Download и получаем архив.

Сначала в разделе HEAD подключаем несколько файлов, которые есть в архиве.

<link type="text/css" href="css/le-frog/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

Подключили файл стилей css/le-frog/jquery-ui-1.7.2.custom.css одной из многочисленных тем оформления. Конечно, свое собственное оформление лучше, но для изучения примеров воспользуемся готовым оформлением. Кроме этого мы подключили файл библиотеки – js/jquery-1.3.2.min.js и файл js/jquery-ui-1.7.2.custom.min.js, в котором объединена функциональность ядра UI и плагина Selectable.

Опыты будем ставить над списком ol, пункты которого нам предстоит сделать выделяемыми. Вот пример HTML-разметки:

<ol id="selectable">
  <li class="ui-widget-content">Item 1</li>
  <li class="ui-widget-content">Item 2</li>
  <li class="ui-widget-content">Item 3</li>
  <li class="ui-widget-content">Item 4</li>
  <li class="ui-widget-content">Item 5</li>
  <li class="ui-widget-content">Item 6</li>
  <li class="ui-widget-content">Item 7</li>
</ol>

и пример javascript-кода, который связывает с подопытным списком функциональность плагина:

$(function(){
  $("#selectable").selectable();
});

Открыть пример в новом окне

Это был пример, где все возможные настройки устанавливались по умолчанию. Не будем с этим мириться и попробуем передать какие-нибудь настройки самостоятельно.

$(function(){
  $("#selectable").selectable({
    distance: 30
  });
});

Открыть пример в новом окне

В примере мы передали плагину значение 30 в опции distance, и этим определили расстояние в пикселах, которое должен пройти указатель мыши (с одновременно нажатой левой клавишей), прежде, чем начнется выделение указанных элементов. Значения для остальных опций можно передать плагину подобным образом. Опций у этого плагина немного, всего шесть:

autoRefresh – по умолчанию установлено значение true, что определяет пересчет положения и размеров области выделения при попадании туда очередного элемента. Если таких элементов очень много, может понадобиться отключить пересчет. Для этого следует установить значение false. При необходимости можно будет использовать для пересчета метод .selectable(‘refresh’).
cancel – опция принимает в качестве значения селектор jQuery. Предотвращает начало выбора элементов, если при начале выбор указатель мыши находится над указанными элементами. По умолчанию установлено значение ‘:input,option’.
delay – в опции указывается число, устанавливающее время в миллисекундах, определяющее задержку начала выбора элементов. По умолчанию – 0.
distance – в опции указывается число, устанавливающее расстояние в пикселах, которое должен пройти указатель мыши до начала выбора элементов. По умолчанию – 0.
filter – в качестве значения опции указывается селектор jQuery. По умолчанию используется значение ‘*’. В этой опции можно указывать элементы-потомки, которые будут сделаны выбранными (при условии, если они могут быть таковыми).
tolerance – опция принимает в качестве значения строку. По умолчанию используется значение ‘touch’. Возможные значения ‘touch’ и ‘fit’. При использовании значения ‘touch’ выбор элемента производится, когда область выбора перекрывает элемент какой-либо частью. При использовании значения ‘fit’ выбор элемента производится, только когда область выбора перекрывает элемент полностью.

Посмотрим теперь, на какие события может реагировать плагин Selectable. Таких событий всего шесть. Для начала разберем простенький пример:

$(function(){
  $("#selectable").selectable({
    stop: function(event, ui) {
      alert(event.type);
    }
  });
});

Открыть пример в новом окне

Callback-функция, которую мы определили в опции stop, может принимать два аргумента. Первый аргумент – объект события. Мы используем его внутри функции, обращаясь к свойству type, чтобы вывести в окне предупреждения название события, вызвавшего функцию.

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

$(function(){
 $("#selectable").selectable({
  start: function(event) {
   $("#result").empty().append("Событие: " +
   event.type);
  },
  selected: function(event, ui) {
   $("#result").append("Событие: " + event.type +
   " для " + ui.selected.innerHTML);
  },
  stop: function(event) {
   $("#result").append("Событие: " +
    event.type);
   }
 });
});

Открыть пример в новом окне

В этом примере мы использовали опции start, selected и stop. В опциях start и stop определяются callback-функции, которые вызываются при начале и окончании выбора элементов. В опции selected можно определить callback-функцию, которая вызывается для каждого выбранного элемента по окончании выбора.

selected – событие selected наступает по окончании выбора для каждого выбранного элемента.
selecting – событие selecting наступает в процессе выбора для каждого выбранного элемента.
start – событие selectablestart наступает при начале процесса выбора.
stop – событие selectablestop наступает при окончании процесса выбора.
unselected – событие unselected наступает по окончании выбора для каждого элемента не попавшего в выбор по сравнению с предыдущим состоянием.
unselecting – событие unselecting происходит в процессе выбора, когда какой-либо элемент, присутствовавший в выборе, удаляется из него.

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

<button id="disable">Disable</button>
<button id="enable">Enable</button>
<button id="destroy">Destroy</button>

и используем вот такой javascript-код:

$(function(){
  $("#selectable").selectable();
  $("#disable").click(function(){
  	$("#selectable").selectable("disable");
  });
  $("#enable").click(function(){
  	$("#selectable").selectable("enable");
  });
  $("#destroy").click(function(){
  	$("#selectable").selectable("destroy");
  });
});

Открыть пример в новом окне

Мы используем три кнопки с идентификаторами #disable, #enable и #destroy, связывая с ними события click. При нажатии на кнопки вызываем соответствующий метод плагина Sortable, временно запрещая использование функциональности плагина, вновь восстанавливая эту функциональность, и удаляя ее окончательно, возвращая элементы в состояние, предшествующее инициализации.

destroy – .selectable(‘destroy’) полностью удаляет всю функциональность плагина Selectable. Возвращает элементы в состояние, предшествующее инициализации.
disable – .selectable(‘disable’) временно запрещает использование всей функциональности плагина. Вновь разрешить ее использование можно с помощью метода enable.
enable – .selectable(‘enable’) разрешает использование всей функциональности плагина, если ранее она была запрещена с использованием метода disable.
option – .selectable(‘option’, optionName, [value]) с помощью этого метода можно получить или установить значение любой опции плагина после инициализации.
refresh – .selectable(‘refresh’) этот метод обычно используется, если для опции autoRefresh установлено значение false. С помощью него можно пересчитать положение и размеры области выделения.

Все примеры, использованные в статье, можно совершенно запросто получить в этом архиве.

Для начала посетим страницу настраиваемой закачки на сайте jQuery UI, чтобы получить необходимые нам файлы. Щелкаем на ссылке Deselect all component, чтобы не закачивать лишнее, а затем выбираем только то, что нам потребуется – отмечаем чекбокс Resizable и видим, что вместе с ним отметился чекбокс UI Core. Работа плагина Resizable зависит от него, поэтому он необходим.
Кроме этого, справа есть выпадающий список, где можно выбрать понравившуюся тему оформления. Если все готово, кликаем кнопку Download и получаем архив.

В разделе HEAD веб-страницы необходимо подключить несколько файлов, которые есть в архиве:

<link type="text/css" href="css/start/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

Сначала подключаем файл стилей css/start/jquery-ui-1.7.2.custom.css одной из многочисленных тем оформления. Вероятно, Вы будете использовать свое собственное оформление, но для изучения примеров лучше воспользоваться готовым оформлением. Кроме этого мы подключили файл библиотеки – js/jquery-1.3.2.min.js и файл js/jquery-ui-1.7.2.custom.min.js, в котором объединена функциональность ядра UI и плагина Resizable.

Для примера возьмем следующую HTML-разметку:

<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>

И javascript-код, который «привяжет» возможности плагина Resizable к выбранному элементу:

$(function(){
  $("#resizable").resizable();
});

Открыть пример в новом окне

И больше ничего! По крайней мере для того, чтобы использовать все настройки по умолчанию этого вполне хватит. Но мы попробуем передать плагину несколько опций:

$(function(){
  $("#resizable").resizable({
  	animate: true,
  	ghost: true
  });
});

Открыть пример в новом окне

Мы передали плагину две опции – animate и ghost. В обоих случаях передали логическое значение true. Но, что же мы этим смогли добиться?
Передав значение true в опции animate, мы добились того, что теперь при изменении размеров элемента будет использоваться анимационный эффект.
В случае с ghost: true при изменении размеров элемента будут отображаться его полупрозрачные контуры.
Остальные опции, как Вы понимаете, используются таким же образом – главное знать, за что какая отвечает…

alsoResize – по умолчанию имеет значение false. Может принимать селектор jQuery, объект jQuery или элемент. Элементы, определенные в этой опции также меняют свои размеры.
animate – по умолчанию установлено значение false. Если установить значение true, при изменении размера будет использоваться анимация.
animateDuration – в качестве значения опция принимает строку с предопределенными значениями – ’slow’, ‘normal’, ‘fast’ или число в миллисекундах, определяющее длительность анимационного эффекта при изменении размера элемента.
animateEasing – опция принимает строку с названием анимационного эффекта. Большое количество разнообразных эффектов можно использовать при условии подключения дополнительного плагина jQuery Easing. По умолчанию имеет значение ’swing’.
aspectRatio – по умолчанию имеет значение false. Если установить true, при изменении размеров элемента будет сохраняться пропорция в соотношении сторон. Возможно также, передавать значения в виде 16/9 или 0.75. В этом случае пропорции в соотношении сторон будут установлены в соответствии с указанным значением.
cancel – в качестве значения указывается селектор jQuery. Предотвращает изменение размеров для элементов, указанных в этой опции. По умолчанию имеет значение ‘:input,option’.
containment – ограничивает изменение размеров внутри элемента определенного в этой опции. Значением может быть строка (например ‘parent’, ‘document’), элемент DOM или селектор jQuery. По умолчанию установлено значение false.
delay – в этой опции можно указать число в миллисекундах, определив задержку старта изменения размеров элемента. По умолчанию установлено значение 0. Эта опция помогает предотвратить случайное изменение размеров элемента при щелчке мышью.
distance – по умолчанию установлено значение 1. Опция определяет количество пикселей, на которое переместиться указатель мыши, прежде, чем начнется изменение размеров элемента. Эта опция помогает предотвратить случайное изменение размеров элемента при щелчке мышью.
ghost – по умолчанию установлено значение false. Если установить true, при изменении размеров элемента будут видны его полупрозрачные контуры.
grid – в качестве значения принимает массив элементов [x, y], где x и y – числа, определяющие шаг сетки. Изменение размеров будет происходить дискретно, в соответствии с заданными значениями. По умолчанию установлено значение false.
handles – принимает строку в качестве значения. По умолчанию установлено значение ‘e, s, se’. Можно использовать любые из следующих обозначений ‘n, e, s, w, ne, se, sw, nw, all’ или их комбинации.
helper – по умолчанию опция имеет значение false. Принимает строку с названием css-класса, который добавляется к области, демонстрирующей во время перемещения размеры, в которые установится элемент.
maxHeight – число, определяющее максимальную высоту, до которой можно изменять размеры элемента. По умолчанию – null.
maxWidth – число, определяющее максимальную ширину, до которой можно изменять размеры элемента. По умолчанию – null.
minHeight – число, определяющее минимальную высоту, до которой можно изменять размеры элемента. По умолчанию – 10.
minWidth – число, определяющее минимальную ширину, до которой можно изменять размеры элемента. По умолчанию – 10.

Плагин Resizable, как и остальные плагины из UI jQuery, может реагировать на события. Он имеет три опции, в которых можно определить callback-функции, вызываемые при наступлении соответствующего события.

Опция start – событие resizestart наступает при начале изменения размеров элемента.
Опция resize – событие resize наступает постоянно во время изменения размеров элемента.
Опция stop – событие resizestop наступает при окончании изменения размеров элемента.

Однако на примере все равно лучше:

$(function(){
  $("#resizable").resizable({
    ghost: true,
    stop:  function(event, ui) {
      alert("Событие " + event.type);
    }
  });
});

Открыть пример в новом окне

В этом примере мы определили в опции stop callback-функцию, которая будет вызвана в момент окончания изменения размеров элемента. Функция может принимать два аргумента. Первый аргумент – это объект события, к свойству type которого можно легко обратиться. Теперь, при окончании изменения размеров выбранного элемента мы получим окно предупреждения, в котором будет выведено название события, вызвавшего эту функцию.
Что касается второго аргумента, то это объект, в свойствах которого содержится весьма полезная информация. Как можно обратиться к некоторым свойствам этого объекта показано в следующем примере:

$(function(){
 $("#resizable").resizable({
  ghost: true,
  stop:  function(event, ui) {
   alert("Начальные размеры: " + ui.originalSize.width +
      "x" + ui.originalSize.height +
      "px\nКонечные размеры: " + ui.size.width +
      "x" + ui.size.height + "px");
  }
 });
});

Открыть пример в новом окне

Здесь мы обращаемся к свойствам объекта ui originalSize и size. Оба свойства также представляют собой объекты, в свойствах width и height которых сохраняются значения ширины и высоты начальных размеров элемента (originalSize) и его конечных размеров (size).

Перечислим основные свойства специального объекта ui:
ui.helper – объект, представляющий изменяемый элемент;
ui.size – объект, в свойствах width и height которого сохраняются текущие ширина и высота элемента;
ui.originalSize – объект, в свойствах width и height которого сохраняются ширина и высота элемента до изменения его размеров;
ui.position – объект, в свойствах top и left которого сохраняется текущее положение элемента;
ui.originalPosition – объект, в свойствах top и left которого сохраняется положение элемента до изменения его размеров;

Кроме перечисленных выше возможностей, плагин имеет несколько методов, с помощью которых можно управлять им уже после инициализации. Добавим в HTML-разметку пару кнопок:

<button id="getter">Get Option</button>
<button id="setter">Set Option>/button>

и попробуем использовать метод .resizable(‘option’, optionName, [value]):

$(function(){
  $("#resizable").resizable({
    animate: true,
    ghost: true,
    animateDuration: 500
  });
  $("#getter").click(function(){
    alert($("#resizable").resizable("option", "animateDuration"));
  });
  $("#setter").click(function(){
    $("#resizable").resizable("option", "animateDuration", 3000);
  });
});

Открыть пример в новом окне

Используем кнопки с идентификаторами #getter и #setter с которыми свяжем событие click. При щелчке мышью на кнопке #getter будем вызывать метод .resizable(‘option’, optionName, [value]) с двумя аргументами, получая, таким образом, текущее значение опции animateDuration. А при щелчке мышью на кнопке #setter вызовем тот же самый метод .resizable(‘option’, optionName, [value]), но уже с тремя аргументами. В качестве третьего аргумента передадим значение, которое мы хотим установить для опции animateDuration.

Все доступные методы плагина Resizable:
destroy – .resizable(‘destroy’) полностью удаляет всю функциональность плагина Resizable. Возвращает элементы в состояние, предшествующее инициализации.
disable – .resizable(‘disable’) временно запрещает использование всей функциональности плагина. Вновь разрешить ее использование можно с помощью метода enable.
enable – .resizable(‘enable’) разрешает использование всей функциональности плагина, если ранее она была запрещена с использованием метода disable.
option – .resizable(‘option’, optionName, [value]) с помощью этого метода можно получить или установить значение любой опции плагина после инициализации.

Все примеры, использованные в статье, можно совершенно запросто получить в этом архиве.

Для начала посетим страницу настраиваемой закачки на сайте jQuery UI, чтобы получить необходимые нам файлы. Щелкаем на ссылке Deselect all component, чтобы не закачивать лишнее, а затем выбираем только то, что нам потребуется – отмечаем чекбокс Droppable и видим, что вместе с ним отметились чекбоксы UI Core и Draggable. Работа плагина Droppable зависит от них, поэтому они необходимы.
Кроме этого, справа есть выпадающий список, где можно выбрать понравившуюся тему оформления. Если все готово, кликаем кнопку Download и получаем архив.

В разделе HEAD подключаем несколько файлов, которые есть в архиве.

<link type="text/css" href="css/trontastic/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

Сначала мы подключили файл стилей css/trontastic/jquery-ui-1.7.2.custom.css одной из многочисленных тем оформления. Кроме этого мы подключили файл библиотеки – js/jquery-1.3.2.min.js и файл js/jquery-ui-1.7.2.custom.min.js, в котором объединена функциональность ядра UI и плагинов Droppable и Draggable (ведь прежде, чем «сбросить» элемент, его надо переместить).

Пример HTML-разметки:

<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
<div id="result"></div>

Элемент с идентификатором #draggable будет у нас перемещаемым, элемент с идентификатором #droppable – целевым, в него можно будет «сбросить» перемещаемый элемент. Наконец, элемент с идентификатором #result будет служить для придания наглядности примеру.

Теперь смотрим javascript-код:

$(function(){
  $("#draggable").draggable();
  $("#droppable").droppable({
    drop: function(){
      $("#result").append("Dropped!");
    }
  });
});

Открыть пример в новом окне

Мы сразу же определили callback-функцию в опции drop. Это сделано в первую очередь для наглядности. Как только перемещаемый блок div будет «сброшен» в целевой блок div, в элемент с идентификатором #result будет добавлен соответствующий текст.

Но попробуем передать плагину еще пару каких-либо опций.

$(function(){
  $("#draggable").draggable();
  $("#droppable").droppable({
    activeClass: "active",
    hoverClass: "hover",
    drop: function(){
      $("#result").append("Dropped!");
    }
  });
});

Открыть пример в новом окне

Передав плагину Droppable опции activeClass и hoverClass, в которых указали имена классов, мы добились того, чтобы все время в процессе движения перемещаемого элемента, у элемента целевого присутствовала красная рамка, а в тот момент, когда перемещаемый элемент оказывается над целевым, рамка поменяет свой цвет на синий.

Плагин Droppable может принимать семь опций:
accept – в опции может быть указан селектор или функция. Все перемещаемые элементы, которые будут выбраны этим селектором, получат возможность быть «сброшенными» в элемент, к которому применена функциональность плагина Droppable. Если в этой опции определена функция, то она будет вызываться для каждого перемещаемого элемента на странице (передаваемого в функцию как первый аргумент), с целью применения пользовательского фильтра. Функция должна будет возвратить true, если элемент должен получить возможность быть «сброшенным». По умолчанию – *.
activeClass – если в этой опции определить имя класса, то он будет добавлен к целевому элементу в момент начала перемещения элемента, который должен быть «сброшен». По умолчанию – false.
addClasses – по умолчанию опция имеет значение true. Если установить false, то это предотвратит добавление класса с именем ui-droppable. Это может потребоваться в целях оптимизации при вызове .droppable() для нескольких сотен элементов.
greedy – если для этой опции установлено значение true, это предотвращает всплывание события, т.е. если «сброс» был выполнен во внутренний элемент, в то время как его родитель тоже может принимать «сбрасываемый» элемент, события drop для элемента-родителя не произойдет. По умолчанию опция имеет значение false.
hoverClass – если в этой опции определить имя класса, то он будет добавлен к целевому элементу в тот момент, когда перемещаемый элемент окажется над целевым элементом. По умолчанию – false.
scope – по умолчанию эта опция имеет значение ‘default’ и применяется в дополнение к опции accept. В опции может быть определено любое значение в виде строки и все перемещаемые элементы, с таким же значение соответствующей опции, будут иметь возможность «сброса» в целевой элемент.
tolerance – опция определяет, в какой момент необходимо произвести «сброс» элемента, при нахождении его над целевым элементом. По умолчанию имеет значение ‘intersect’, что определит «сброс» в тот момент, когда перемещаемый элемент перекрыл целевой как минимум на 50%. Другие возможные значения: fit – перемещаемый элемент должен полностью войти в целевой элемент; pointer – указатель мыши должен войти в целевой элемент; touch – перемещаемый элемент должен перекрыть целевой элемент на любую самую малую величину;

Как и другие плагины, входящие в состав UI jQuery, плагин Droppable умеет реагировать на некоторые события. Опций, в которых можно определить callback-функции, вызываемые при наступлении соответствующего события, всего пять. В самом первом примере мы уже использовали опцию drop, но если вы откроете этот пример, увидите в действии и остальные.

Опция activate – событие dropactivate происходит в момент начала движения перемещаемого элемента.
Опция deactivate – событие dropdeactivate происходит в момент окончания движения перемещаемого элемента, независимо от того, был ли он «сброшен» в целевой элемент или нет.
Опция over – событие dropover происходит в момент входа перемещаемого элемента в пределы целевого элемента.
Опция out – событие dropout происходит в момент выхода перемещаемого элемента за пределы целевого элемента.
Опция drop – событие drop происходит в момент «сброса» перемещаемого элемента в целевой элемент.

Надо отметить, что любая callback-функция, вызываемая при наступлении какого-либо события может принимать два аргумента. Первый аргумент – объект события, второй – специальный объект ui, в свойствах которого содержится следующая информация:
ui.helper – объект, характеризующий перемещаемый элемент;
ui.position – объект, в свойствах top и left которого содержится информация о положении перемещаемого элемента относительно родительского элемента;
ui.offset – объект, в свойствах top и left которого содержится информация об абсолютном положении перемещаемого элемента;

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

<button id="disable">Disable</button>
<button id="enable">Enable</button>
<button id="destroy">Destroy</button>

И теперь познакомимся с некоторыми из методов на примере:

$(function(){
  $("#draggable").draggable();
  $("#droppable").droppable({
    drop: function(event, ui){
      $("#result").append(event.type);
    }
  });
  $("#disable").click(function(){
    $("#droppable").droppable("disable");
  });
  $("#enable").click(function(){
    $("#droppable").droppable("enable");
  });
  $("#destroy").click(function(){
    $("#droppable").droppable("destroy");
  });
});

Открыть пример в новом окне

С кнопками, имеющими идентификаторы #disable, #enable и #destroy связаны обработчики события click, которые вызывают одноименные методы плагина.
Используя .droppable(«disable») можно временно удалить функциональность плагина из выбранного элемента, а с помощью .droppable(«enable») – восстановить ее. Использование .droppable(«destroy») приведет к окончательному удалению функциональности. Восстановить ее можно будет только перезагрузкой страницы.

destroy – .droppable(‘destroy’) полностью удаляет всю функциональность плагина Droppable. Возвращает элементы в состояние, предшествующее инициализации.
disable – .droppable(‘disable’) временно запрещает использование всей функциональности плагина. Вновь разрешить ее использование можно с помощью метода enable.
enable – .droppable(‘enable’)разрешает использование всей функциональности плагина, если ранее она была запрещена с использованием метода disable.
option – .droppable(‘option’, optionName, [value]) с помощью этого метода можно получить или установить значение любой опции плагина после инициализации.

Все примеры, использованные в статье, можно совершенно запросто получить в этом архиве.

Сначала в разделе HEAD подключаем несколько файлов, которые есть в архиве.

<link type="text/css" href="css/le-frog/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

Итак, сначала мы подключили файл стилей css/le-frog/jquery-ui-1.7.2.custom.css одной из многочисленных тем оформления. Кроме этого мы подключили файл библиотеки – js/jquery-1.3.2.min.js и файл js/jquery-ui-1.7.2.custom.min.js, в котором объединена функциональность ядра UI и плагина Draggable (на самом деле для использования в примерах этой статьи там содержится еще и функциональность плагинов Droppable и Sortable).

Смотрим HTML-разметку. Пусть у нас она будет выглядеть так:

<div id="draggable" class="ui-widget-content">
  <p>Drag me</p>
</div>

Связываем функциональность плагина Draggable с выбранным элементом:

$(function(){
  $("#draggable").draggable();
});

Открыть пример в новом окне

Пока мы использовали плагин Draggable с настройками по умолчанию. Но он может принимать более 20 различных опций, которые помогают очень гибко настроить его под конкретные условия использования.
Попробуем передать плагину несколько настроек:

$(function(){
  $("#draggable").draggable({
    cursor: "move",
    revert: true,
    revertDuration: 3000
  });
});

Открыть пример в новом окне

Здесь мы изменили вид курсора во время перемещения элемента, и добились того, что по окончании перемещения элемент самостоятельно вернется в свое начальное положение в течение 3 секунд.
Остальные опции используются аналогичным образом, самое главное – знать их название и понимать какая за что отвечает.

addClasses – по умолчанию эта опция имеет значение true. Если установить значение false, то это предотвратит добавление класса ui-draggable к перемещаемым элементам. Это может потребоваться из соображений оптимизации при вызове .draggable() например, для нескольких сотен элементов.
appendTo – по умолчанию эта опция имеет значение ‘parent’. В ней можно передать селектор jQuery или элемент, который будет использован в качестве контейнера для объекта, представляющего перемещаемый элемент во все время его перемещения.
axis – вынуждает перетаскиваемый элемент перемещаться только по оси x или только по оси y. Значение по умолчанию false, что позволяет элементу перемещаться свободно.
cancel – по умолчанию эта опция имеет значение ‘input, option’. Если эти элементы находятся внутри перемещаемого элемента, то перемещаемый элемент нельзя захватить, при нахождении указателя мыши над определенными в этой опции элементами. Для выбора элементов используется селектор jQuery.
connectToSortable – разрешает «сброс» перемещаемых элементов в сортируемый (sortable) список. При этом «сброшенный» элемент становится частью списка. В качестве значения указывается селектор jQuery. По умолчанию имеет значение false. Для корректной работы необходимо дополнительно использовать опцию helper со значением ‘clone’.
containment – ограничивает перемещение внутри определенного элемента или области. В качестве значения может принимать селектор jQuery, элемент, строку или массив. Примеры возможных значений: ‘parent’, ‘document’, ‘window’, [x1, y1, x2, y2].
cursor – строка, в которой может быть передано css значение, определяющее значок для курсора в процессе перетаскивания элемента. По умолчанию – auto.
cursorAt – при перемещении элемента устанавливает курсор в определенную позицию. Например, значение {left: 5, top: 10}, при перемещении установит курсор в 10 пикселах от верхнего края и 5 пикселах от левого края.
delay – отсрочка начала времени перемещения элемента в миллисекундах. Опция используется для того, чтобы предотвратить нежелательное перемещение элемента во время случайного щелчка по нему. По умолчанию имеет значение 0.
distance – расстояние в пикселах, на которое должен переместиться курсор при удерживаемой в нажатом положении левой клавиши мыши прежде, чем начнется перемещение элемента. Опция используется для того, чтобы предотвратить нежелательное перемещение элемента во время случайного щелчка по нему. По умолчанию имеет значение 1.
grid – заставляет перетаскиваемый элемент перемещаться дискретно, по сетке, определяемой массивом передаваемых в опцию значений. Значение по умолчанию false, что позволяет элементу перемещаться свободно. Пример передаваемого значения – [10, 10].
handle – в этой опции можно определить элемент, находящийся внутри перемещаемого элемента, при нахождении над которым указателя мыши будет возможен захват перемещаемого элемента. Для выбора элементов можно использовать селектор jQuery.
helper – возможные значения опции – ‘original’, ‘clone’, Function. По умолчанию установлено значение ‘original’ – визуально наблюдается перемещении самого элемента. При использовании значения ‘clone’ перемещаться будет клон элемента, а сам элемент при этом остается на своей позиции. В опции можно определить функцию. Функция обязательно должна возвращать DOM элемент.
iframeFix – по умолчанию установлено значение false. Если установить значение true, будет предотвращен перехват события mousemove во время перемещения элемента при прохождении указателя мыши над iframe. В качестве значения может быть использован селектор jQuery – при этом предотвращение перехвата будет производиться только при прохождении указателя мыши над выбранными iframe. Опция бывает полезна при использовании совместно например с cursorAt.
opacity – устанавливает значение css-свойства opacity для элемента, находящегося в процессе перемещения. По умолчанию установлено значение false, что соответствует полной непрозрачности.
refreshPositions – по умолчанию используется значение false. При значении true позиция «сброса» элемента будет пересчитываться при каждом событии mousemove. Использовать с осторожностью! Такой подход может помочь создать очень динамичное приложение, но безусловно снизит производительность.
revert – значение по умолчанию – false. Если установить значение true, то элемент возвратится на свою исходную позицию после окончания перетаскивания. Также можно передать значения в виде строки. Возможные значения – ‘valid’ или ‘invalid’. Эти значения используются в случае, если перемещаемый элемент будет «сброшен» в какой-либо целевой элемент. При использовании значения ‘valid’ перемещаемый элемент возвратится в предыдущую позицию только в том случае, если был «сброшен» в целевой элемент. При использовании значения ‘invalid’ не возвратится в предыдущую позицию только в том случае, если он был «сброшен» в целевой элемент.
revertDuration – длительность эффекта возвращения элемента на исходную позицию, в миллисекундах. По умолчанию имеет значение 500. Опция игнорируется, если опция revert имеет значение false.
scope – значением этой опции является строка. По умолчанию установлено значение ‘default’. Перемещаемые элементы, имеющие в опции scope точно такое же значение, как и значение опции scope для элементов с функциональность droppable, будут приниматься этими элементами. По сути, дополняет опцию accept плагина Droppable.
scroll – по умолчанию установлено значение true – при перемещении элемента к краю области просмотра, она автоматически прокручивается бесконечно. Если установить значение false, эта возможность будет запрещена.
scrollSensitivity – число, определяющее расстояние в пикселах от края области просмотра, после которого она начинает прокручиваться. Расстояние определяется относительно указателя мыши, а не перемещаемого элемента. По умолчанию установлено значение 20.
scrollSpeed – число, определяющее скорость, с которой прокручивается область просмотра при приближении указателя мыши к ее краю на расстояние определенное в опции scrollSensitivity. По умолчанию установлено значение 20.
snap – по умолчанию установлено значение false. Если установить значение true (что эквивалентно ‘.ui-draggable’, поскольку значение может определяться также селектором jQuery), то перемещаемый элемент будет «прилипать» к краям выбранных элементов при прохождении около них.
snapMode – опция определяет, как именно перемещаемый элемент будет «прилипать» к выбранным элементам. Например, только к внешним или только к внутренним сторонам элементов. Возможные значения ‘inner’, ‘outer’, ‘both’. Любое значение игнорируется при snap: false. По умолчанию установлено значение ‘both’.
snapTolerance – расстояние в пикселах от перемещаемого элемента до выбранного, при котором произойдет «прилипание». По умолчанию установлено значение 20. Любое значение игнорируется при snap: false.
stack – объект, с помощью которого осуществляется автоматический контроль за свойством z-index определенной группы перемещаемых элементов, всегда помещая перемещаемый элемент поверх остальных. Значение свойства ‘group’ определяет jQuery селектор. Дополнительно можно определить свойство ‘min’, число ниже которого значение z-index опуститься не сможет. Например: $(‘.selector’).draggable({ stack: { group: ‘.selector’, min: 50 } });
zIndex – число, определяющее значение свойства z-index перемещаемого элемента. По умолчанию false.

Кроме возможности гибкой настройки плагина Draggable, есть возможность заставить его реагировать на некоторые события. Вот пример:

$(function(){
  $("#draggable").draggable({
    cursor: "move",
    stop: function(event, ui) {
  	  alert("Событие: " + event.type +
  	        "\n\ntop: " + ui.offset.top +
  	        " px\nleft: " + ui.offset.left +
  	        " px");
  	}
  });
});

Открыть пример в новом окне

Мы определили в опции stop callback-функцию. Функция принимает два аргумента – объекты event и ui. На простом примере показано, каким образом можно обратиться к свойствам этих объектов. В итоге, при окончании перемещения элемента, в окне предупреждения мы увидим информацию о типе наступившего события – dragstop, и текущее абсолютное положение элемента на странице.

Опций, связанных с событиями только три:
Опция start – событие dragstart наступает каждый раз при начале перемещения элемента.
Опция drag – событие drag наступает все время, пока элемент находится в процессе перемещения.
Опция stop – событие dragstop наступает каждый раз при завершении перемещения элемента.

Любая callback-функция, определенная в опциях start, drag или stop принимает два аргумента – event и ui. Объект event – это объект события, а объект ui – это специальный объект, в свойствах которого содержится следующая информация:
ui.helper – объект, характеризующий элемент, находящийся в процессе перемещения;
ui.position – объект, в свойствах top и left которого содержится информация о положении перемещаемого элемента относительно родительского элемента;
ui.offset – объект, в свойствах top и left которого содержится информация об абсолютном положении перемещаемого элемента;

Нам осталось познакомиться с методами плагина Draggable. Но для этого нам понадобится добавить в HTML-разметку пару кнопок. Вот так:

<button id="getOption">Get Option</button>
<button id="setOption">Set Option</button>

В следующем примере продемонстрировано как получать и устанавливать значения опций плагина после его инициализации:

$(function(){
 $("#draggable").draggable({
  cursor: "move"
 });
 $("#getOption").click(function(){
  alert($("#draggable").draggable("option","grid"));
 });
 $("#setOption").click(function(){
  $("#draggable").draggable("option","grid",[50,50]);
 });
});

Открыть пример в новом окне

Мы связали с кнопками Get Option и Set Option событие click. При щелчке на кнопке Get Option мы вызовем метод option, название которого указываем в первом аргументе, а во втором аргументе передаем название опции, значение которой мы хотели бы получить. В итоге мы увидим окно предупреждения, в котором будет показано значение false, поскольку при инициализации эта опция не была определена, а по умолчанию она имеет именно такое значение.
Попробуйте перетаскивать элемент с помощью мыши – он будет плавно перемещаться в любых направлениях.

Сделаем щелчок на кнопке Set Option, снова вызывая метод option, но теперь мы передаем три аргумента. Первый – название метода, второй – название опции, значение которой мы хотим изменить, и третий аргумент – новое значение опции. Таким образом, передав опции grid значение [50,50] мы заставим элемент перемещаться дискретно, вдоль сетки с шагом 50х50 пикселей.

Доступные методы плагина Draggable:
destroy – .draggable(‘destroy’) полностью удаляет всю функциональность плагина Draggable. Возвращает элементы в состояние, предшествующее инициализации.
disable – .draggable(‘disable’) временно запрещает использование всей функциональности плагина. Вновь разрешить ее использование можно с помощью метода enable.
enable – .draggable(‘enable’) разрешает использование всей функциональности плагина, если ранее она была запрещена с использованием метода disable.
option – .draggable(‘option’, optionName, [value]) с помощью этого метода можно получить или установить значение любой опции плагина после инициализации.

Все примеры, использованные в статье, можно совершенно запросто получить в этом архиве.

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

Сразу приведу пример и выложу архив демо, а то меня, не без оснований конечно, обвиняли в отсутствии демо в статьях про jQuery UI. Поскольку ничего особенно сложного в этом решении нет, то я буду краток – только код, пример и минимум необходимых пояснений.

Итак, сначала мы делаем все в точности так же, как написано в статье jQuery UI – виджет Accordion. Т.е. подключаем необходимые файлы к HTML-странице. Здесь же внесем первое дополнение. Для того, чтобы иметь возможность запоминать состояние секций аккордеона, нам потребуется подключить еще один небольшой, но весьма полезный плагин – jQuery Cookie.

<script src="js/jquery.cookie.js" type="text/javascript"></script>

Поиметь свежую версию этого плагина можно на http://plugins.jquery.com/project/Cookie.

Теперь приведу пример HTML-разметки меню-аккордеона.

<div id="accordion">
  <h3><a href="#">Секция 1</a></h3>
  <ul>
    <li><a href="?1-1">Пункт меню 1-1</a></li>
    <li><a href="?1-2">Пункт меню 1-2</a></li>
    <li><a href="?1-3">Пункт меню 1-3</a></li>
  </ul>
  <h3><a href="#">Секция 2</a></h3>
  <ul>
    <li><a href="?2-1">Пункт меню 2-1</a></li>
    <li><a href="?2-2">Пункт меню 2-2</a></li>
    <li><a href="?2-3">Пункт меню 2-3</a></li>
  </ul>
  <h3><a href="#">Секция 3</a></h3>
  <ul>
    <li><a href="?3-1">Пункт меню 3-1</a></li>
    <li><a href="?3-2">Пункт меню 3-2</a></li>
    <li><a href="?3-3">Пункт меню 3-3</a></li>
  </ul>
  <h3><a href="#">Секция 4</a></h3>
  <ul>
    <li><a href="?4-1">Пункт меню 4-1</a></li>
    <li><a href="?4-2">Пункт меню 4-2</a></li>
    <li><a href="?4-3">Пункт меню 4-3</a></li>
  </ul>
</div>

Ничего загадочного тут и вовсе нет. Что еще? Добавим немного стилей, чтобы выделять активный пункт меню. Например так:

a.open { color: #f00;}

т.е. в примере просто выделяем текст ссылки в меню красным цветом.

А теперь самое интересное – javascript-код:

<script type="text/javascript">
$(function(){
  $("#accordion").accordion({
    navigation: true
  });
  $("#accordion li a").click(function(){
    $.cookie("openItem", $(this).attr("href"));
  });
  $("#accordion li a[href$=`" + $.cookie("openItem") +
  "`]").addClass("open");
});
</script>

И здесь ничего сложного! Отыскали нужный элемент по идентификатору #accordion, применили к нему возможности плагина. Из опций передали только одну, но в нашем случае необходимую опцию navigation, которой присвоили значение true. Это обеспечит нам открытие нужной секции аккордеона при переходе по ссылке.

На следующем шаге необходимо обрабатывать щелчок мышкой по пункту меню, чтобы поставить соответствующую куку. Что мы и делаем – находим все элементы a внутри li, внутри нашего аккордеона, связываем с ними событие click, по которому будет вызвана функция-обработчик.

Тут нам пригодятся возможности плагина jQuery Cookie. Мы устанавливаем куку с именем openItem, и значением, которое получаем из атрибута href той ссылки, по которой был совершен клик.

И последний шаг – при загрузке страницы мы должны прочитать куку (если она конечно есть) и в соответствии с ее значением «подсветить» нужный пункт меню. Делаем это – ищем нужный пункт меню выбирая элемент a внутри li аккордеона. Но не просто, а значение атрибута href которого соответствует значению, сохраненному в куке.

Знак $ используем потому, что некоторые браузеры возвращают значения атрибута href по разному. Некоторые отдают абсолютный путь, некоторые – относительный. Чтобы исключить эту неоднозначность мы ищем такое значение атрибута href, которое заканчивается одинаково со значением, сохраненным в куке.

Если такая ссылка будет найдена, то с помощью метода addClass мы добавим ей класс open, что заставит ее «покраснеть».

Собственно это все, больше тут рассказывать не о чем…

Для начала посетим страницу настраиваемой закачки на сайте jQuery UI, чтобы получить необходимые нам файлы. Щелкаем на ссылке Deselect all component , чтобы не закачивать лишнее, а затем выбираем только то, что нам потребуется – отмечаем чекбокс Datepicker и чекбокс UI Core.
Кроме этого, справа есть выпадающий список, где можно выбрать понравившуюся тему оформления. Если все готово, кликаем кнопку Download и получаем архив. Можно испытать пример как есть, но интереснее создать свою HTML-страничку, где сначала в разделе HEAD подключить несколько файлов, которые есть в архиве.

<link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script src="js/i18n/jquery-ui-i18n.js" type="text/javascript"></script>

Сначала мы подключили файл стилей одной из многочисленных тем оформления. Кроме этого мы подключили файл библиотеки и файл, в котором заключена функциональность UI Core и виджета Datepicker. И наконец, последний файл обеспечивает локализацию виджета для нужного языка. Найти его можно в полученном архиве, в папке /development-bundle/ui/i18n

Из разметки потребуется минимум – просто элемент input:

<input  id="datepicker" type="text" />

Кстати, если Вы хотите, чтобы календарь не появлялся по щелчку в элементе input, а был всегда виден – просто используйте обычный элемент div:

<div  id="datepicker"><div>

Связываем виджет Datepicker с нашей HTML-разметкой:

<script type="text/javascript">
$(function(){
  $("#datepicker").datepicker();
});
</script>

Отлично! С настройками по умолчанию все понятно, но нам хотелось бы иметь календарь на русском языке (или, к примеру, на украинском). Давайте это сделаем:

<script type="text/javascript">
$(function(){
  $.datepicker.setDefaults(
        $.extend($.datepicker.regional["ru"])
  );
  $("#datepicker").datepicker();
});
</script>

Приведенный в примере код обеспечит поддержку русского языка, а если Вы замените ru на uk (интересно, почему не на ua?) то получите календарь уже на украинском языке.

Но вероятно Вам понадобится изменить какие-то настройки, чтобы использовать Datepicker для решения своих задач. Давайте попробуем это сделать.

<script type="text/javascript">
$(function(){
  $.datepicker.setDefaults(
        $.extend($.datepicker.regional["ru"])
  );
  $("#datepicker").datepicker({
    minDate: "-30",
    maxDate: "+1m +1w +3d"
  });
});
</script>

Мы передали виджету две опции, названия которых говорят сами за себя – мы установили минимальную и максимальную дату, которую можно выбрать в календаре. Безусловно, полезные опции, но таких опций гораздо больше, а принцип их использования ничем не отличается от только что рассмотренного принципа. Полный список возможных опций приведен ниже:

altField – jQuery селектор для другого поля, которое должно быть обновлено, как только будет выбрана дата в Datepicker. Формат даты в этом дополнительном поле устанавливается с помощью опции altFormat.

altFormat – формат даты, который будет использоваться для опции altField. Эти настройки позволяют показывать пользователю один формат даты, тогда как для вычислений может использоваться другой формат. Полный список возможных форматов можно найти на
http://docs.jquery.com/UI/Datepicker/formatDate

appendText – текст, который будет отображаться после каждого поля выбора даты. Можно использовать, например для того, чтобы пометить поле как обязательное для заполнения.

buttonImage – адрес картинки, которая будет отображаться на кнопке, с помощью которой можно вызывать календарь. Используется совместно с опцией showOn, когда та принимает значения ‘button’ или ‘both’. Если был определен текст в опции buttonText, он становится значением атрибута alt картинки.

buttonImageOnly – если для этой опции установить значение true, то картинка, адрес которой определен в опции buttonImage, будет отображаться не на кнопке, а сама по себе.

buttonText – текст, отображающийся на кнопке, с помощью которой можно вызывать календарь. Используется совместно с опцией showOn, когда та принимает значения ‘button’ или ‘both’.

changeMonth – если в этой опции передать значение true, будет возможно выбирать месяц из выпадающего списка.

changeYear – если в этой опции передать значение true, будет возможно выбирать год из выпадающего списка.

closeText – эта опция используется совместно с showButtonPanel, если последняя имеет значение true. Значение опции closeText определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.

constrainInput – по умолчанию опция имеет значение true и принуждает строго соблюдать формат даты, определенный в опциях виджета, в текстовом поле ввода. Чтобы иметь возможность не соблюдать этот формат, следует установить опцию в false.

currentText – эта опция используется совместно с showButtonPanel, если последняя имеет значение true. Значение опция currentText определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.

dateFormat – определяет формат даты. Значение опции dateFormat определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его. Полный список возможных форматов можно найти на

http://docs.jquery.com/UI/Datepicker/formatDate

dayNames – массив, содержащий полные названия дней недели, начиная с воскресенья. Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.

dayNamesMin – массив, содержащий 2-хбуквенную аббревиатуру названия дней недели, начиная с воскресенья. Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.

dayNamesShort – массив, содержащий 3-хбуквенную аббревиатуру названия дней недели, начиная с воскресенья. Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.

defaultDate – устанавливает дату, которая будет подсвечена при первом открытии, если поле выбора даты пустое. Опция может быть определена через объект Date, либо как количество дней от текущего для (например +7 или -15), либо как строка значений, определяющих период (‘y’ для лет, ‘m’ для месяцев, ‘w’ для недель, ‘d’ для дней, например ‘+1m +7d’), и наконец как null для текущего дня.

duration – длительность эффекта анимации при открытии (закрытии) календаря. Может принимать значения в виде строки – ‘fast’, ‘normal’ (по умолчанию), ’slow’ или в виде числа в миллисекундах. Если передать пустую строку, календарь будет открываться и закрываться без эффекта анимации.

firstDay – опция устанавливает первый день недели: воскресенье – 0, понедельник – 1,… Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.

gotoCurrent – если установить значение опции в true, то кнопка «Сегодня» (доступная при showButtonPanel: true) будет указывать на выбранную дату взамен текущей.

hideIfNoPrevNext – если Вы ограничиваете диапазон доступных дат с помощью опций minDate и maxDate, то при достижении края диапазона, стрелки «Назад» и «Вперед» становятся неактивными. Но их можно и совсем скрывать, передав в опции hideIfNoPrevNext значение true.

isRTL – для этой опции необходимо установить значение true, если используется язык с написанием справа налево. Определяется в файле локализации, если он используется.

maxDate – устанавливает максимальную возможную для выбора дату через объект Date или как число дней от текущего (например +7) или как строку значений определяющих период (‘y’ для лет, ‘m’ для месяцев, ‘w’ для недель, ‘d’ для дней, например ‘+1y +1m’), или null для отсутствия ограничения.

minDate – устанавливает минимальную возможную для выбора дату через объект Date или как число дней от текущего (например -7) или как строку значений определяющих период (‘y’ для лет, ‘m’ для месяцев, ‘w’ для недель, ‘d’ для дней, например ‘-1y -1m’), или null для отсутствия ограничения.

monthNames – массив, содержащий полные названия месяцев. Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.

monthNamesShort – массив, содержащий 3-хбуквенную аббревиатуру названия месяцев. Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.

navigationAsDateFormat – по умолчанию опция имеет значение false. Если установить значение true, функция dateFormat будет примерена к значениям опций nextText, prevText и currentText с тем, чтобы отображать при навигации, например предыдущее и следующее названия месяцев.

nextText – текст, который отображается в качестве ссылки на следующий месяц. Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его. Если используется файл стилей ThemeRoller’а, это значение заменяется иконкой.

numberOfMonths – эта опция определяет, сколько месяцев сразу нужно показать. Значение опции может быть просто числом или массивом, состоящим из двух элементов, которые определяют соответственно количество строк и столбцов. Например, значение [2, 3] отобразит календарь в две строки по три месяца.

prevText – текст, который отображается в качестве ссылки на предыдущий месяц. Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его. Если используется файл стилей ThemeRoller’а, это значение заменяется иконкой.

shortYearCutoff – значение по умолчанию +10. Эта опция используется только при условии использования в dateFormat двузначной записи года и выполняет роль компенсатора для определения века. Если значение передано в виде числа, используется как есть. Если значение передано в виде строки, конвертируется в число и добавляется к текущему значению года. После того как значение определено, все данные, выступающие в качестве значения года, и меньшие и равные ему считаются годами текущего века. Значения большие – считаются годами предыдущего века.

showAnim – определяет тип анимации при открывании календаря. По умолчанию имеет значение show (при закрывании будет использован hide). Без подключения дополнительных файлов могут быть использованы эффекты ’slideDown’ и ‘fadeIn’ (при закрывании соответственно будут использоваться эффекты ’slideUp’ и ‘fadeOut’). Так же возможно использование любых эффектов jQuery UI Effects при условии их дополнительного подключения.

showButtonPanel – установка значения true для этой опции приведет к тому, что будет показана панель с двумя кнопками – переход к сегодняшней дате и закрытие календаря.

showCurrentAsPos – когда используется отображение сразу нескольких месяцев, число, переданное в этой опции, определяет позицию текущего месяца. По умолчанию используется значение 0, и текущий месяц отображается в верхнем левом углу.

showMonthAfterYear – по умолчанию используется значение false и в заголовке название месяца идет перед годом. При использовании значения true название месяца будет следовать за годом.

showOn – по умолчанию эта опция имеет значение ‘focus’, что заставляет календарь открываться при щелчке в поле ввода. Другие возможные значения – ‘button’ и ‘both’. Рядом с полем ввода появится кнопка. В первом случае календарь будет открываться по щелчку на кнопке, а во втором случае как по щелчку на кнопке, таки при получении фокуса полем ввода.

showOptions – если Вы используете один из эффектов jQuery UI Effects, с помощью этой опции ему можно передать дополнительные настройки. Например: showOptions: {direction: ‘up’}.

showOtherMonths – по умолчанию имеет значение false. Если использовать true, на календаре будут отображаться дни предыдущего и/или следующего месяца без возможности их выбора.

stepMonths – определяет насколько месяцев сдвигать календарь при щелчке по ссылкам Следующий и Предыдущий. По умолчанию – 1.

yearRange – управление диапазоном лет, отображаемых в выпадающем списке (при использовании опции changeYear). По умолчанию используется значение ‘-10:+10′ относительно текущего года. Возможно использование и абсолютного формата, например ‘1980:2025′.

Перейдем к знакомству с событиями виджета Datepicker:

<script type="text/javascript">
$(function(){
  $.datepicker.setDefaults($.extend(
    $.datepicker.regional["ru"])
  );
  $("#datepicker").datepicker({
    beforeShow: function(input) {
      $(input).css("background-color","#ff9");
    },
    onSelect: function(dateText, inst) {
      $(this).css("background-color","");
      alert("Выбрано: " + dateText +
        "\n\nid: " + inst.id +
        "\nselectedDay: " + inst.selectedDay +
        "\nselectedMonth: " + inst.selectedMonth +
        "\nselectedYear: " + inst.selectedYear);
    },
    onClose: function(dateText, inst) {
      $(this).css("background-color","");
    }
  });
});
</script>

В примере мы передаем виджету сразу три опции, в которых определены callback-функции. В опции beforeShow определена функция, которая будет вызвана перед отображением календаря. С помощью css-свойства background-color, эта функция установит желтый цвет фона для элемента input. В опции onSelect определена функция, которая будет вызвана в момент выбора какой-либо даты в календаре и передаст пустое значение css-свойству background-color, возвратив его в начальное состояние. И, наконец, в опции onClose определена функция, которая вызывается при закрытии календаря, если никакое значение выбрано не было. Она тоже вернет css-свойство background-color в его начальное состояние.

Но, обратите внимание, все callback-функции принимают некоторые аргументы. С ними стоит познакомиться немного подробнее.

В опции beforeShow функция принимает в качестве аргумента объект, характеризующий элемент input. В примере мы указали этот объект в качестве селектора jQuery и получили, таким образом, возможность работать с его css-свойствами с помощью методов библиотеки.

В опции onSelect функция принимает два аргумента. Первый аргумент dateText – строка, представляющая собой тот текст, который появится и в элементе input. Второй аргумент – объект datepicker. В том же примере показано, как можно обратиться к некоторым из свойств этого объекта.

Функция, определенная в опции onClose принимает те же два аргумента, что и функция из опции onSelect.

И еще одно важное обстоятельство для callback-функций, определенных в опциях onSelect и onClose – в контексте этих функций ссылка this указывает на объект, характеризующий элемент input.

Ниже приведены описания всех возможных событий для виджета Datepicker.

beforeShow – здесь можно определить функцию, которая будет вызываться перед открытием календаря. Функция принимает в качестве аргумента объект, характеризующий текстовое поле ввода с которым работает виджет.

beforeShowDay – в этой опции можно определить пользовательскую функцию, которая будет принимать в качестве аргумента выбранную дату. Функция должна возвратить массив, где элемент с индексом [0] – true или false показывает, возможен или нет выбор этой даты. Элемент с индексом [1] содержит имя класса (классов) для отображения даты. Элемент с индексом [2] (опционально) – текст всплывающей подсказки для даты. Функция будет вызываться для каждой даты в календаре в момент наведения указателя мыши.

onChangeMonthYear – здесь можно определить функцию, которая будет вызываться при смене месяца или года в календаре. Функция принимает три аргумента. Первые два аргумента – это новые значения года и месяца, третий аргумент – объект datepicker.

onClose – в этой опции определяется функция, которая будет вызвана, когда календарь был закрыт без выбора какой-либо даты.

onSelect – в этой опции определяется функция, которая будет вызвана, когда в календаре выбрана какая-либо дата.

Теперь можно поговорить о методах виджета Datepicker. Давайте добавим в наш HTML-код обыкновенную ссылку:

<a href="#">Открыть в диалоге</a>

и используем вот такой javascript-код:

<script type="text/javascript">
$(function(){
  $.datepicker.setDefaults(
      $.extend($.datepicker.regional["ru"])
  );
  $("#datepicker").datepicker({
    changeYear: true
  });
  $("a").click(function(){
    $("#datepicker").datepicker(
        "dialog",
        "23.04.2009",
        function(){
          alert("Событие onSelect");
        },
        { showButtonPanel: true },
        [300, 300]
    );
  });
});
</script>

В приведенном примере мы демонстрирует работу метода dialog. Мы вызываем этот метод при щелчке на ссылке Открыть в диалоге. Первый аргумент – это название метода, второй аргумент textDate – дата на которой по умолчанию будет открываться календарь. Остальные три аргумента необязательные, но мы познакомимся и с ними. В аргументе onSelect можно передать callback-функцию, которая будет вызвана при выборе конкретной даты в календаре. В аргументе settings можно передать объект с новыми настройками виджета, которые будут применены к календарю, который будет открыт в диалоговом окне. И, наконец, последний аргумент pos – здесь можно задать координаты, в которых будет появляться календарь. Координаты можно задавать числами, но если передать в функцию, вызываемую по щелчку на ссылке объект event, то можно будет определить координаты, используя свойства объекта event. Например, использовать event.clientX и event.clientY.

Далее приведены описания всех методов виджета Datepicker.

destroy – .datepicker(‘destroy’) полностью удаляет всю функциональность виджета Datepicker. Возвращает элементы в состояние, предшествующее инициализации.

disable – .datepicker(‘disable’) временно запрещает использование всей функциональности виджета. Вновь разрешить ее использование можно с помощью метода enable.

enable – .datepicker(‘enable’) разрешает использование всей функциональности виджета, если ранее она была запрещена с использованием метода disable.

option – .datepicker(‘option’, optionName, [value]) с помощью этого метода можно получить или установить значение любой опции виджета после инициализации.

dialog – .datepicker(‘dialog’, dateText, [onSelect], [settings], [pos]) открывает виджет Datepicker в режиме диалогового окна. В аргументе dateText передается дата, на которой должен быть открыт календарь. Остальные аргументы необязательные. В аргументе onSelect можно передать функцию, которая будет вызвана в момент выбора даты в календаре, в аргументе settings можно передать объект с новыми настройками виджета, в аргументе pos – координаты, в которых будет открыто диалоговое окно. Здесь можно использовать события мыши, чтобы определить координаты.

isDisabled – .datepicker(‘isDisabled’) метод возвращает значение true, если к виджету был применен метод disable и false в противном случае.

hide – .datepicker(‘hide’, [speed]) скрывает ранее открытый календарь.

show – .datepicker(’show’) открывает календарь.

getDate – .datepicker(‘getDate’) метод возвращает дату, выбранную в календаре.

setDate – .datepicker(’setDate’, date) метод позволяет установить дату в календаре. Значением аргумента date может быть число, определяющее количество дней от текущей даты (например: +7 или -14) или строка, определяющая период (‘y’ для лет, ‘m’ для месяцев, ‘w’ для недель, ‘d’ для дней, например ‘+1m +7d’). Значение null установит текущую дату.

Вот и все. Разве что сказать, что для управления календарем можно использовать горячие клавиши:
- page up/down – предыдущий/следующий месяц;
- ctrl+page up/down – предыдущий/следующий год;
-ctrl+home – выбор текущего месяца или открытие календаря после того как он был закрыт;
- ctrl+left/right – предыдущий/следующий день;
- ctrl+up/down – предыдущая/следующая неделя;
- enter – выбор отмеченной даты;
- ctrl+end – закрытие и удаление даты из поля ввода;
- escape – закрытие календаря без выбора даты;

Для начала посетим страницу настраиваемой закачки на сайте jQuery UI, чтобы получить необходимые нам файлы. Щелкаем на ссылке Deselect all component , чтобы не закачивать лишнее, а затем выбираем только то, что нам потребуется – отмечаем чекбокс Tabs и видим, что вместе с ним отметился чекбокс UI Core. Работа виджета Tabs зависит от него, поэтому он необходим.
Кроме этого, справа есть выпадающий список, где можно выбрать понравившуюся тему оформления. Если все готово, кликаем кнопку Download и получаем архив. Можно испытать пример как есть, но интереснее создать свою HTML-страничку, где сначала в разделе HEAD подключить несколько файлов, которые есть в архиве.

<link type="text/css" href="css/le-frog/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.cookie.min.js" type="text/javascript"></script>

Сначала мы подключили файл стилевого оформления виджета, затем файл библиотеки jQuery. В третьем подключенном файле объединена функциональность ядра UI и виджета Tabs. Четвертый файл понадобится в том случае, если Вам необходимо использовать cookies. Найти его можно в папке архива development-bundle/external/cookie/.
Дальше знакомимся с требованиями виджета Tabs к HTML-разметке.

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Tab 1 content</p>
  </div>
  <div id="tabs-2">
    <p>Tab 2 content</p>
  </div>
  <div id="tabs-3">
    <p>Tab 3 content</p>
  </div>
</div>

Ярлыками вкладок являются элементы li, в атрибутах href которых содержится идентификаторы соответствующих им элементов div, которые представляют собой область информационного наполнения вкладки. Внутри элементов div содержимое может быть практически любым. Ну и все это заключено в элемент div с идентификатором #tabs.

Теперь привяжем функциональность виджета к HTML-разметке.

<script type="text/javascript">
$(function(){
  $("#tabs").tabs();
});
</script>

Все. С настройками по умолчанию виджет уже работает. Теперь будем передавать ему свои настройки:

<script type="text/javascript">
$(function(){
  $("#tabs").tabs({
    event: "mouseover",
    selected: 2
  });
});
</script>

В этом примере мы заставили виджет Tabs переключать вкладки по событию mouseover (взамен установленного по умолчанию click) и открывать при инициализации третью вкладку (отсчет ведется от 0).

Сразу еще один пример, который демонстрирует приемы использования cookies для запоминания последней открытой вкладки для того, чтобы впоследствии открыть ее при инициализации. Но, до этого давайте добавим в HTML-разметку кнопку, для того, чтобы кликнув по ней, убедиться, что cookies действительно ставятся.

<button id="getCookie">Get Cookie</button>

и собственно пример установки cookies

<script type="text/javascript">
$(function(){
  $("#tabs").tabs({
    cookie: { expires: 7, name: "startTab" }
  });
  $("#getCookie").click(function(){
    var cook = $("#tabs").tabs("option", "cookie");
    alert("name: " + cook.name +
            "\nexpires: " + cook.expires);
  });
});
</script>

Мы установили cookie с именем startTab сроком на 7 дней. Щелчок по кнопке с идентификатором getCookie приведет к тому, что в окне предупреждения мы увидим имя установленной cookie и срок, на который она была установлена. Не забывайте, что для использования этой возможности необходимо подключать дополнительный файл плагина jQuery Cookie.

Мы научились передавать виджету различные опции, а их описания приведены ниже:

ajaxOptions – опции ajax-запроса, которые используются для загрузки удаленного содержимого в область информационного наполнения. По умолчанию используется значение null.

cache – опция определяет, кэшировать или нет информационное наполнение вкладки, загружаемое с помощью ajax-запросов, т.е. загрузить содержимое только однажды или загружать каждый раз, когда совершен щелчок на ярлыке вкладки. По умолчанию используется значение false, т.е. кэширование не производится. Обратите внимание – чтобы воспрепятствовать фактическому кэшированию данных браузером Вы должны дополнительно обеспечить значение false в опциях самого ajax-запроса.

collapsible – по умолчанию используется значение false. Если передать в этой опции значение true, то каждый следующий щелчок на ярлыке вкладки будет скрывать и открывать область информационного наполнения.

cookie – запоминает последнюю выбранную вкладку в cookie. В дальнейшем используется для определения вкладки, открываемой по умолчанию (если не используется опция selected). Требует подключения плагина cookie. Возможно присвоение имени cookie через опцию name.

disabled – массив, содержащий индексы вкладок (отсчет ведется от 0), которые должны быть недоступными при инициализации виджета. Например, disabled: [1, 2] сделает недоступными вторую и третью вкладки.

event – тип события, которое используется для переключения вкладок. По умолчанию используется значение ‘click’. Второе возможное значение ‘mouseover’.

fx – устанавливает анимационные эффекты при открытии/закрытии вкладок. Например: fx: { opacity: «toggle», duration: «slow» }

panelTemplate – HTML-шаблон из которого создается новая область информационного наполнения вкладки в случае создания ее с использованием метода add или при создании вкладки «на лету» с использованием ajax-запроса. По умолчанию имеет значение ‘<div></div>’.

selected – индекс вкладки, (отсчет ведется от 0) которая должна быть открыта при инициализации виджета. По умолчанию используется значение 0, т.е. открывается первая вкладка. Чтобы сделать невыбранными все вкладки, надо использовать значение -1.

spinner – HTML-код, указанный в этой строке, отображается на ярлыке вкладки во время загрузки удаленного содержимого в область информационного наполнения. Если передать пустую строку, эта возможность будет деактивирована. По умолчанию используется <em>Loading</em>.

tabTemplate – HTML-шаблон из которого создаются новые ярлыки вкладок в случае создания их с использованием метода add. #{href} and #{label} заменяются url’ом и названием вкладки, переданными в аргументах метода add. По умолчанию имеет значение ‘<li><a href=»#{href}»><span>#{label}</span></a></li>’.

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

<script type="text/javascript">
$(function(){
  $("#tabs").tabs({
    selected: 2,
    select: function(event, ui) {
      alert("Событие: " + event.type +
            "\nui.tab: " + ui.tab +
            "\nui.panel: " + ui.panel.innerHTML +
            "\nui.index: " + ui.index);
    }
  });
});
</script>

Мы определили в опции select callback-функцию, которая будет вызываться в момент наступления события tabsselect, т.е. в тот момент, когда был совершен щелчок по ярлыку вкладки. Callback-функция принимает два аргумента. Первый аргумент – это объект event, второй аргумент – специальный объект ui. Организовав доступ к свойствам этих объектов, можно получить довольно полезную информацию (мы выводим ее в окне предупреждения).

ui.tab – ссылка на активированную в настоящий момент вкладку;
ui.panel – ссылка на элемент, в котором заключено информационное наполнение активированной вкладки ;
ui.index – индекс активированной вкладки (отсчет ведется от 0);

Ниже приведены описания событий виджета Tabs и названия опций, в которых можно определить callback-функции, вызываемые при наступлении события.

select – событие tabsselect происходит в момент щелчка по ярлыку вкладки (при наведении указателя мыши на вкладку, если используется опция event: ‘mouseover’). При щелчке на ярлыке активной вкладки ничего не происходит.

load – событие tabsload происходит, когда в область информационного наполнения вкладки было загружено содержимое из внешнего файла.

show – событие tabsshow происходит в момент отображения содержимого вкладки.

add – событие tabsadd происходит каждый раз, когда добавлена новая вкладка.

remove – событие tabsremove происходит каждый раз, когда удалена какая-либо вкладка.

enable – событие tabsenable происходит в момент, когда ранее недоступная вкладка становится доступной.

disable – событие tabsdisable происходит в момент, когда вкладка становится недоступной.

Осталось разобраться с методами виджета Tabs. Для этого добавим еще пару кнопок в HTML-разметку:

<button id="startRotate">Start Rotate</button>
<button id="stopRotate">Stop Rotate</button>

и пример javascript-кода:

<script type="text/javascript">
$(function(){
  $("#tabs").tabs({
    selected: 2
  });
  $("#startRotate").click(function(){
    $("#tabs").tabs("rotate", 3000, true);
  });
  $("#stopRotate").click(function(){
    $("#tabs").tabs("rotate", null);
  });
});
</script>

При щелчке на кнопке с идентификатором Start Rotate будет применен метод rotate, который заставит виджет самостоятельно переключать вкладки каждые три секунды. При щелчке на кнопке с идентификатором Stop Rotate автоматическое переключение вкладок будет остановлено.

Далее приведены описания всех доступных методов виджета Tabs.

destroy – .tabs(‘destroy’) полностью удаляет всю функциональность виджета Tabs. Возвращает элементы в состояние, предшествующее инициализации.

disable – .tabs(‘disable’) временно запрещает использование всей функциональности виджета. Вновь разрешить ее использование можно с помощью метода enable.

enable – .tabs(‘enable’) разрешает использование всей функциональности виджета, если ранее она была запрещена с использованием метода disable.

option – .tabs(‘option’, optionName, [value]) с помощью этого метода можно получить или установить значение любой опции виджета после инициализации.

add – .tabs(‘add’, url, label, [index]) метод добавляет новую вкладку. Второй аргумент содержит либо идентификатор создаваемой вкладки, (см. требования к разметке) либо является полным url (относительным или абсолютным, но без поддержки кросс-доменной загрузки) при создании вкладки с использованием ajax. Третий аргумент – название вкладки, отображаемое на ее ярлыке. Четвертый – индекс создаваемой вкладки (позиции отсчитываются от 0).

remove – .tabs(‘remove’, index ) удаляет вкладку. Второй аргумент – индекс удаляемой вкладки (позиции отсчитываются от 0).

enable – .tabs(‘enable’, index) делает доступной ранее недоступную вкладку. Чтобы сделать доступными одновременно несколько вкладок сделайте так: $(‘#tabs’).data(‘disabled.tabs’, [ ]);

disable – .tabs(‘disable’, index) делает вкладку недоступной. Активная вкладка не может быть сделана недоступной. Чтобы сделать недоступными одновременно несколько вкладок сделайте так: $(‘#tabs’).data(‘disabled.tabs’, [1, 2, 3]);

select – .tabs(’select’, index) метод позволяет выбрать вкладку так, как будто был сделан щелчок по ее ярлыку. Второй аргумент – индекс нужной вкладки (позиции отсчитываются от 0). Он же может быть идентификатором вкладки (см. требования к разметке).

load – .tabs(‘load’, index) программно перезагружает содержимое вкладки, используя ajax-запрос. Этот метод всегда загружает содержимое, даже если опция cache имеет значение true. Второй аргумент – индекс нужной вкладки (позиции отсчитываются от 0).

url – .tabs(‘url’, index, url) изменяет url, откуда с помощью ajax-запроса будет загружаться содержимое. Второй аргумент – индекс нужной вкладки (позиции отсчитываются от 0). Указанный в третьем аргументе url будет использоваться и для дальнейших загрузок.

length – .tabs(‘length’) метод просто возвращает количество вкладок.

abort – .tabs(‘abort’) метод завершает все выполняющиеся ajax-запросы и анимацию.

rotate – .tabs(‘rotate’, ms, [continuing]) метод устанавливает автоматический перебор всех вкладок. Второй аргумент – количество миллисекунд, в течение которых очередная вкладка будет активной. Чтобы остановить перебор вкладок во втором аргументе необходимо передать 0 или null. Третий аргумент определяет логику при выборе вкладки пользователем. Значение true – перебор вкладок будет продолжен. По умолчанию используется false.

Все? Пожалуй, нет. Как можно обойтись без примера, где информационное наполнение загружается с использованием ajax-запросов, верно?

Сделать это несложно, но придется немного поменять HTML-разметку:

<div id="tabs">
  <ul>
    <li><a href="ajax_1.html"><span>Content 1</span></a></li>
    <li><a href="ajax_2.html"><span>Content 2</span></a></li>
    <li><a href="ajax_3.html"><span>Content 3</span></a></li>
    <li><a href="#tabs-4">Content 4</a></li>
  </ul>
  <div id="tabs-4">
    <p>4. Информационное наполнение для вкладки №4.</p>
  </div>
</div>

Изучите пример этой разметки и обратите внимание, что вкладки с информацией, загружаемой с помощью ajax-запросов, вполне успешно могут соседствовать с вкладками, созданными обычным способом.

Конечно, надо создать еще и файлы, из которых будет загружаться информация. В нашем примере – это ajax_1.html, ajax_2.html и ajax_3.html. А больше ничего и не потребуется. Что касается javascript-кода, можно использовать даже настройки по умолчанию:

<script type="text/javascript">
$(function(){
  $("#tabs").tabs();
});
</script>

Все. Про стилевое оформление не пишу – планирую отдельную статью про это сразу для всех виджетов.