Знакомство с плагином jQuery UI

Дата публикации:Апрель 15, 2011

Загрузить плагин jQuery UI всегда можно со страницы http://www.jqueryui.com. Там же представлены разнообразные особенности плагина. jQuery UI включает в себя ряд стандартизированных виджетов, эффектов и интерактивных действий, с которыми мы познакомимся в дальнейшем.

Виджеты

Виджеты, используемые в jQuery, несколько отличаются от тех привычных нам WordPress виджетов, которые, по сути, являются миниатюрными плагинами, разработанными для размещения в сайдбаре темы. Виджеты, поставляемые с jQuery UI плагином, описывают набор полнофункциональных средств управления пользовательским интерфейсом, создание которого может потребоваться при реализации разнообразных jQuery проектов. Готовые виджеты позволяют сократить время, уходящее на написание jQuery кода. Плагин jQuery UI предлагает следующие виджеты:

  • Accordion (Аккордеон). Виджет Аккордеон позволяет создать список секций, каждая из которых может быть раскрыта или свернута для отображения/скрытия контента. В фиксированный момент времени может быть раскрыта только одна секция.
  • Autocomplete (Автозаполнение). Виджет Autocomplete, появившийся в версии 1.8, предлагает различные варианты заполнения при вводе информации в поле. Источник предложений — Javascript массив.
  • Button (Кнопка). Виджет Button, появившийся в версии 1.8, позволяет выбирать различные типы разметки и привязывать к ним графическую стилизацию и функциональность кнопки.
  • Datepicker. Виджет Datepicker может быть представлен в виде простого текстового поля. Как только данное поле получит фокус, пользователь увидит календарь, из которого всегда можно быстро выбрать требуемую дату.
  • Dialog (Диалоговое окно). Виджет Dialog позволяет создать диалоговое окно, которое может быть легко подстроено под различные требования разработчиков.
  • Progressbar (Индикатор выполнения). Виджет Progressbar позволяет создать индикатор выполнения, который может быть привязан к любому процессу.
  • Slider (Ползунок). Виджет Slider позволяет создавать ползунки для выбранных элементов.
  • Tabs (Вкладки). Виджет Tabs позволяет создавать различные вкладки для размещения контента, переключаемые с помощью клавиши Tab.

Интерактивные действия

Интерактивные действия, входящие в состав jQuery UI, позволяют веб-разработчикам задать определенное поведение для объекта, что нередко требуется в различных проектах. Плагин может похвастаться набором следующих интерактивных действий:

  • Draggable. Перетаскивание выбранных элементов с помощью мыши.
  • Droppable. Перетаскивание draggable-элементов и размещение их в некоторой области.
  • Resizable. Изменение размеров выбранных элементов.
  • Selectable. Эффект выделения одного или нескольких элементов.
  • Sortable. Изменение позиции элемента в результате перетаскивания.

Эффекты

Основная функция, позволяющая реализовать различные эффекты, называется .effect(), однако помимо нее в плагине присутствуют улучшенные базовые анимационные функции и шорткаты jQuery.

  • Effect. Данная функция позволяет присвоить эффект к выбранному объекту (всего 15 эффектов).
  • Show. Улучшенный метод jQuery, принимающий дополнительные эффекты jQuery UI.
  • Hide. Улучшенный метод jQuery, принимающий дополнительные эффекты jQuery UI.
  • Toggle. Улучшенный метод jQuery, принимающий дополнительные эффекты jQuery UI.
  • Color animation. Улучшенный эффект, аналогичный плагину Color.
  • Add class. Добавляет выбранный класс к каждому элементу набора с возможным переходом между состояниями.
  • Remove class. Удаляет определенный класс у каждого элемента набора с возможным переходом между состояниями.
  • Toggle class. Добавляет определенный класс, если он не задан, и удаляет его в противном случае, с возможным переходом.
  • Switch class. Переключает класс, заданный в первом аргументе, на класс, заданный во втором, с возможным переходом.
Поделиться

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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

Предыдущая запись:

Следующая запись: