Плагин UI версии 1.9.2 библиотеки jQuery версии 1.8.3

Панель Управления

Видеокурс: "Javascript+jQuery для начинающих в видеоформате"

Проверка времени и определение часового пояса рабочей станции.

RU-CENTER. Центр регистрации доменов зоны .RU

Сейчас выгодная возможность зарегистрировать домен .РФ в RU-CENTER

Зинаида Лукьянова. Видеокурс Фотошоп с нуля.

Евгений Попов. Видеокурс HTML + PHP + MySQL.

"Электрошоп". Поиск электронных товаров.

Дмитрий Котеров, Алексей Костарев. PHP-5. Наиболее полное руководство. 2-е издание.

Плагин UI версии 1.9.2 библиотеки jQuery версии 1.8.3

Плагин UI версии 1.9.2 библиотеки jQuery версии 1.8.3. jQuery UI (jQuery User Interface, Пользовательский Интерфейс джиКвери) - библиотека JavaScript с открытым исходным кодом для облегчения и автоматизации процесса создания пользовательских интерфейсов в веб-приложениях. Является дополнительной библиотекой к основной библиотеки jQuery и расширяет возможности последней. jQuery UI предоставляет веб разработчику доступ к виджетам, W4W (Виджеты Для Виджетов) и эффектов.

На данной страничке рассматриваем возможности использования функционалов пользовательских интерфейсов jquery-ui.min.js. Подключение этого единственного файла заменяет подключение core.js, widget.js, mouse.js, position.js, accordion.js, autocomplete.js, button.js, datepicker.js, dialog.js, draggable.js, droppable.js, effect.js, effect-blind.js, effect-bounce.js, effect-clip.js, effect-drop.js, effect-explode.js, effect-fade.js, effect-fold.js, effect-highlight.js, effect-pulsate.js, effect-scale.js, effect-shake.js, effect-slide.js, effect-transfer.js, menu.js, progressbar.js, resizable.js, selectable.js, slider.js, sortable.js, spinner.js, tabs.js, tooltip.js и позволяет использовать все их функциональные возможности.

Ссылки на сайты разработчиков:
jquery.com
code.jquery.com
ui.jquery.com/

На данном сайте произведен анализ возможностей плагина UI версии 1.9.2 библиотеки jQuery версии 1.8.3 с руссификацией.

Accordion :: Аккордион

Что такое аккордеон

Конвертирует пару хидер+контент в аккордеон. Для того, чтобы сделать аккордион необходимы пары хидер + соответствующая ему панель с контентом.

Как работает аккордеон

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

Клавиатура, горячие клавиши

Когда фокус на хидере, возможны следующие команды с клавиатуры:
• UP/LEFT - Перемещает фокус на предыдущий хидер. Если текущий хидер первый, перемещает фокус на последний хидер.
• DOWN/RIGHT - Перемещает фокус на следующий хидер. Если текущий хидер последний, перемещает фокус на первый хидер.
• HOME - Перемещает фокус на первый хидер.
• END - Перемещает фокус на последний хидер.
• SPACE/ENTER - Активирует панель с контентом, связанную с текущим (сфокусированным) хидером.

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

Разметка HTML представляет собой хидеры (H3 теги) и дивы с контентом, поэтому контент можно просматривать и без JavaScript.

См ссылки ниже для подробных примеров.

Примеры аккордеона на этом сайте: Аккордион, Дефолтный, Изменчивый, Сохранный, Скрытный, Чувственный, Модерновый, Сортировочный.
Тесты: Аккордион на сайте, Аккордион из документации.

Autocomplete :: Автозаполнение

Autocomplete :: Автозаполнение

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

Фамилия:

Виджет Автозаполнение обеспечивает предложения выбора, когда происходит набор в поле. Здесь предложения - фамилии, попробуйте, например, набрать "Ива" (будет предложено выбрать "Иванов", "Иванчук" и пр.).

Данные хранятся в простом массиве JavaScript, передача данных виджету производится благодаря опции source.

Данные можно хранить и удаленно, в базе данных. См ссылки ниже для подробных примеров.

Примеры автозаполнения на этом сайте: Автозаполнение, Дефолтное, Из дальнего далека, Кэшируемое, Источник JSONP, Скроллинговое, Комбобокс, Адаптируемое, Парсинг XML, Категории, Иностранное, Множественное, Много издалека.
Тесты: Автозаполнение на сайте, Автозаполнение из документации, Автозаполнение из документации - 2.

Button :: Кнопка

Button :: Кнопка

Кнопки с возможностью задания тем и множества кнопок.

- кликните эту кнопку.

- кликните эту кнопку.

Кнопки (Buttons) плагина UI библиотеки jQuery расширяют возможности стандартных элементов форм HTML, таких как buttons (кнопки), inputs (инпуты - ввод данных) and anchors (якоря-ссылки), давая возможность подобрать нужную тему для стилей hover (элемент под прицелом) и active (активный, выбранный элемент).

В дополнение к кнопкам нажатия, радио кнопкам и чек-боксам (инпуты типов radio и checkbox) могут быть конвертированы в кнопки. Их связанный лейбл стилизуется и появляется как кнопка, в тоже время ввод обновляется по клику. Чтобы связанные элементы работали правильно, дайте инпуту значение атрибута id и обращайтесь к нему в лейбле для атрибута. Не делайте вложений инпута внутрь лейбла, это вызывает проблемы доступа.

Для группировки радио кнопок, Кнопка также имеет дополнительный виджет, называемый Buttonset (группа Кнопок). Buttonset используется выбором элементом контейнера (который содержит радио кнопки) и вызовом .buttonset(). Buttonset также поддерживает визуальную группировку, и следовательно, может быть использован, когда вы работаете с группой кнопок. Он работает путем выбора всех подиченных элементов, применяя к ним .button(). Вы можете включать и выключать Buttonset, что приведет к включению/выключению всех кнопок множества. Разрушение множества кнопок приводит к вызову метода destroy для каждой кнопки множества.

См ссылки ниже для подробных примеров.

Примеры Кнопок на этом сайте: Кнопка, Дефолтная, Радио, Галка, Иконка, Панелька, Раздела.
Тесты: Кнопка на сайте, Кнопка из документации (простая), Кнопка из документации (множество кнопок).

Datepicker :: Календарик

Datepicker :: Календарик

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

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

Календарик дает возможность локализации для разных языков и форматов дат. Каждая локализация содержится внутри собственного файла с кодом языка, добавляемого к имени файла, н-р, jquery.ui.datepicker-ru.js для русского языка, jquery.ui.datepicker-fr.js для французского языка. Желаемый файл локализации должен быть включен после главного кода Календарика. Каждый файл локализации добавляет свои установки к множеству допустимых локализаций и автоматически обращается к ним, как к установкам по умолчанию во всех случаях.

Аттрибуты $.datepicker.regional содержат массив локализаций, индексируемый с помощью индекса языка, "" (пустая строка) относится к дефотному английскому (English). Каждый пункт есть объект со следующими аттрибутами: closeText (закрыть текст), prevText (предыдущий текст), nextText (следующий текст), currentText (текущий текст), monthNames (имена месяцев), monthNamesShort (имена месяцев короткие), dayNames (имена дней), dayNamesShort (имена дней короткие), dayNamesMin (имена дней минимальные), weekHeader (заголовок недель), dateFormat (формат даты), firstDay (первый день), isRTL (язык ли это с обратным направлением - справа налево), showMonthAfterYear (показывать ли месяц после года), and yearSuffix (суффикс года).

См ссылки ниже для подробных примеров.

Примеры Календарика на этом сайте: Календарик, Дефолтный, Форматы дат, Мини Макси, Локализованный, Альтернативный показ, Линейный, Кнопочный, Годично-Месячный, Датированный, Недельный, Многомесячный, Триггерный, Анимационный, Интервальный.
Тесты: Календарик на сайте, Календарик из документации, Календарик из документации (руссифицированный).

Dialog :: Диалог

Dialog :: Диалог

Диалог - это есть плавающее окно (window), которое содержит полосу с заголовком (title bar) и область контента (content area). Окно диалога можно двигать, менять его размер и закрывать с помощью иконки 'x' по умолчанию.

- кликните эту кнопку для запуска обычного алерта JavaScript.

- кликните эту кнопку для запуска Диалога UI библиотеки jQuery.

Диалог - это есть плавающее окно (window), которое содержит полосу с заголовком (title bar) и область контента (content area). Окно диалога можно двигать, менять его размер и закрывать с помощью иконки 'x' по умолчанию.

Диалог можно рассматривать как расширенный и улучшенный алерт JavaScript.

Для закрытия Диалога нажмите крест вверху справа или кнопку "Закрыть".

Диалог можно рассматривать как расширенный и улучшенный алерт JavaScript. Используйте кнопки выши для сравнения алерта и Диалога.

См ссылки ниже для подробных примеров.

Примеры Диалога на этом сайте: Диалог, Дефолтный, Анимированный, Модальный, Сообщение, Подтверждение, Форма.
Тесты: Диалог на сайте, Диалог из документации.

Draggable :: Переноситель

Draggable :: Переноситель

Дает возможность двигать объекты мышкой по экрану.

Меня можно таскать только за эту ручку

Передвижение в данном случае ограничено пределами элемента-родителя.

Делает выбранные элементы Перетаскиваемыми с помощью мыши. Если вы хотите не только таскать объект, но также и ронять его, см плагин Роняемый (jQuery UI Droppable plugin), который дает возможность ронять перетаскиваемые объекты.

См ссылки ниже для подробных примеров.

Примеры Переносителя на этом сайте: Переноситель, Дефолтный, Событейный, Рангированный, Замедленный, Меченный, Автоматический, Со сменой мест, С откликом, С ручкой, Курсорный, Сортировочный.
Тесты: Переноситель на сайте, Переноситель из документации.

Droppable :: Падающий

Droppable :: Падающий

Создает области падения для Переносимых элементов.

Тащи и Бросай

Прошу бросить меня в нужное место.

Бросать сюда

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

См ссылки ниже для подробных примеров.

Примеры Падающего на этом сайте: Падающий, Дефолтный, Принимаемый, Предохраняемый, Информационный, Возвращаемый, Коммерческий, Наглядный.
Тесты: Падающий на сайте, Падающий из документации.

Menu :: Меню

Menu :: Меню

Меню с поддержкой разных тем и с навигацией при помощи мыши и клавиатуры.

Вы нажали пункт в меню Сохранить (Save).

Меню может быть создано из любого валидного маркируемого списка до тех пор, пока элементы имеют строгое отношение родитель/ребенок и каждый пункт имеет якорь. Наиболее типичный используемый элемент есть список без порядковых номеров (<ul>).

См ссылки ниже для подробных примеров.

Примеры Меню на этом сайте: Меню, Дефолтное, Иконки.
Тесты: Меню на сайте, Меню из документации.

Position :: Позиционирование

Position :: Позиционирование

Левый элемент, относительно которого будет осуществляться позиционирование.

Позиционирует элемент относительно другого элемента.

Большая картинка позиционируется относительно маленьких картинок слева или справа.

При нажатии левой кнопки позиционирование осуществляется относительно левой картики.

При нажатии правой кнопки - относительной правой картинки.

Сами кнопки заранее позиционируются относительно соответствующих маленьких картинок.

Картинку можно перетаскивать вручную, к ней добавлен плагин draggable({ }); Позицируемый элемент. Девушка 5. Стиль "лучшая улыбка года".

Позицируемый элемент. Девушка 5. Стиль "лучшая улыбка года".

Метод .position() плагина jQuery UI позволяет вам позиционировать элемент относительно окна, документа, другого элемента, курсора мыши, без переживаний по поводу смещений родительских элементов.

Кликните кнопку "Позиционирование налево" для позиционирования относительно левого элемента.

Кликните кнопку "Позиционирование направо" для позиционирования относительно правого элемента.

См ссылки ниже для подробных примеров.

Примеры Позиционирования на этом сайте: Позиционирование, Дефолтное, Цикл картинок.
Тесты: Позиционирование на сайте, Позиционирование из документации.

Progressbar :: Индикатор Движения

Progressbar :: Индикатор Движения

Показывает статус выполнения определенного процесса.

В данном примере индикатор показывает значение порядкового номера секунды в текущей минуте.

Получено первоначальное значение индикатора движения.

Индикатор Движения (progress bar) разработан для показа на сколько процентов выполнен какой-либо процесс. Сам Индикатор Движения запрограммирован так, чтобы обеспечить максимальную гибкость с помощью CSS. Индикатор Движения по умолчанию формирует свою шкалу беря размеры родительского контейнера.

См ссылки ниже для подробных примеров.

Примеры Индикатора Движения на этом сайте: Индикатор Движения, Дефолтный, Анимированный, РазмероСменяемый.
Тесты: Индикатор Движения на сайте, Индикатор Движения из документации.

Resizable :: Размероизменчивый

Resizable :: Размероизменчивый

Изменение размера элемента с помощью мыши.

Девушка 5. Стиль "лучшая улыбка года".

Плагин jQuery UI Размероизменчивый (Resizable) делает выбранные элементы размероизменчивыми (означает, что они имеют специальные ручки-области для изменения их размеров). Можно создать одну или несколько таких ручек. Также можно задать ограничения по ширине и высоте, как минимальные значения, так и максимальные.

См ссылки ниже для подробных примеров.

Примеры Размероизменчивого на этом сайте: Размероизменчивый, Дефолтный, Соотношение сторон, Лимитированнный, Ограниченный, Замедленный, Интервальный, Невидимый, Синхронизуемый, Анимированный, Рамочный, В области текста.
Тесты: Размероизменчивый на сайте, Размероизменчивый из документации.

Selectable :: Выбираемый

Selectable :: Выбираемый

Используйте мышь, чтобы выбрать элементы, по одному или группу элементов.

#1 :: Девушка 5. Стиль "лучшая улыбка года".

#2 :: Девушка 1. Стиль "голубая мечта".

#3 :: Девушка 2. Стиль "настоящая блондинка".

Вы выбрали: пока никого.

Плагин jQuery UI Выборка (Selectable) позволяет элементы делать выбираемыми путем захвата их в коробку (иногда ее называют лассо) с помощью мыши. Элементы также можно выбирать путем клика мыши или перетаскиваем, держа нажатой кнопку ctrl на клавиатуре, что позволяет делать множественную несплошную выборку.

См ссылки ниже для подробных примеров.

Примеры Выбираемого на этом сайте: Выбираемый, Дефолтный, Показательный, Таблично-ячеечный.
Тесты: Выбираемый на сайте, Выбираемый из документации.

Slider :: Слайдер

Slider :: Слайдер

Позволяет тащить за ручку указатель, чтобы выбрать числовое значение на Слайдере (полосе прокрутки).

Плагин jQuery UI Слайдер (Slider) помещает выбранные элементы в Слайдеры. Существует несколько разных опций, такие как множественные ручки и интервалы. Ручку Слайдера можно двигать с помощью мыши или клавиш клавиатуры "стрелки".

См ссылки ниже для подробных примеров.

Примеры Слайдера на этом сайте: Слайдер, Дефолтный, Пошаговый, Ранжируемый, С Минимумом, Гостиничный, С максимумом, Вертикальный, Вертикальный с Диапазоном, Многоликий, Цветной, СкроллБар.
Тесты: Слайдер на сайте, Слайдер из документации.

Sortable :: Сортировщик

Sortable :: Сортировщик

Позволяет перестроить элементы в списке или форме используя мышь.

:: Item 1
:: Item 2
:: Item 3

Плагин jQuery UI Сортируемый (Sortable) делает выбранные элементы Сортируемыми с помощью переноса мышкой. Обратите внимание. Чтобы сортировать табличные ряды, Сортируемым следует сделать tbody, а не саму таблицу.

См ссылки ниже для подробных примеров.

Примеры Сортируемого на этом сайте: Сортировщик, Дефолтный, Оставляющий След, Соединительный, Табулированный, Пустые списки, ВКЛ/ВЫкл, Сдерженный, Шкала, Портлеты.
Тесты: Сортировщик на сайте, Сортировщик из документации.

Spinner :: Спиннер

Spinner :: Спиннер

Расширяет возможности текстового ввода данных для цифровых значений с помощью кнопок вверх/вниз и клавиш "стрелки" на клавиатуре.

Спиннер, или числовой шаговик, виджет, который идеально заточен для управления всех типов числового ввода. Он позволяет пользователям вводить значение напрямую вручную или изменять текущее значение спиннингом с помощью клавиатуры, мышки или колесиков прокрутки. Если Спиннер работает совместно с Глобализатором (Globalize), вы можете даже прокручивать валюты и даты в разных локалях.

Спиннер вращает текстовый ввод, добавляет 2 кнопки для увеличения и уменьшения текущего значения, с той же целью можно использовать клавиши управления событиями. Спиннер обращается к Глобализатору (Globalize) для проведения форматирования и парсинга числа.

См ссылки ниже для подробных примеров.

Примеры Спиннера на этом сайте: Спиннер, Дефолтный, Десятичный, Валютный, Карта, Время, Перегруженный.
Тесты: Спиннер на сайте, Спиннер из документации.

Tabs :: Табы

Tabs :: Табы

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

Главная
Некоторые опции табов
Клавиши Клавиатуры для работы с табами

Первый таб активируется по умолчанию:

$( "#tabs" ).tabs();

На данной страничке ряд тестов для элемента Табы (Tabs). Для большей наглядности в данном тесте табы помешены в оверлейное диалоговое окно, отделенное от остального контента страницы. Окно можно закрыть и вновь открыть нажатием кнопки "ВКЛ окно с табами".

Некоторые опции и методы, используемые здесь.

Путем нажатия кнопки ВЫкл Табы можно выключить, при нажатии срабатывает опция disabled - tabs( "option", "disabled", true ). Нажатием кнопки ВКЛ Табы можно вновь включить, при нажатии опции disabled теперь уже передается значение false - tabs( "option", "disabled", false ). Табы снова в работающем состоянии.

Клавиши Клавиатуры.

Когда фокус на табе, с клавиатуры возможны следующие команды:

• UP/LEFT (ВЕРХ/ЛЕВО): Перемещает фокус на предыдущий таб. Если на первом табе, двигает фокус на последний таб. Активирует сфокусированный таб после короткой задержки.
• DOWN/RIGHT (ВНИЗ/ПРАВО): Перемещает фокус на следующий таб. Если на последнем табе, двигает фокус на первый таб. Активирует сфокусированный таб после короткой задержки.
• HOME (ДОМОЙ): Перемещает фокус на первый таб. Активирует сфокусированный таб после короткой задержки.
• END (КОНЕЦ): Перемещает фокус на последний таб. Активирует сфокусированный таб после короткой задержки.
• SPACE (ПРОБЕЛ): Активирует панель, связанную с фокусированным табом.
• ENTER (ВВОД): Активирует или деактивирует панель, связанную с фокусированным табом.
• ALT+PAGE UP (альт+PAGE UP): Перемещает фокус на предыдущий таб и немедленно активирует.
• ALT+PAGE DOWN (альт+PAGE DOWN): Перемещает фокус на следующий таб и немедленно активирует.

Когда фокус на панели, с клавиатуры возможны следующие команды:

• CTRL+UP: Перемещает фокус на связанный таб.
• ALT+PAGE UP: Перемещает фокус на предыдущий таб и немедленно активирует.
• ALT+PAGE DOWN: Перемещает фокус на следующий таб и немедленно активирует.

Табы обычно используются для разбивки контента в несколько разделов, которые открываются по одному для экономии места на экране. Это делает табы похожими на аккордион (accordion).

Контент для каждой панели таба может быть определен прямо на странице или может быть загружен удаленно по технологии Аджакс (Ajax). Оба способа управляются автоматически на основе якоря href, связанного с табом. По умолчанию табы активируются по клику, но эти события могут быть изменены с помощью опции event (событие) по касанию мыши (hover).

См ссылки ниже для подробных примеров.

Примеры табов на этом сайте: Табы, Дефолтный, Ажакс, Быстрооткрываемый, Сворачиваемый, Сортируемый, Манипулируемый, Нижний.
Тесты: Табы на сайте, Табы из документации.

Tooltip :: Тултипы

Кастомизированные, адаптированные по теме Тултипы заменяют ортодоксальные тултипы браузера.

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

• Показывают больше контента, чем просто заголовок, такие как инлайновые заметки или экстра контент, обновляемый по технологии Ажакс.
• Кастомизируют положение Тултипов, например, по центру поверх всех элементов.
• Добавляют экстра стили для кастомизации появления, для полей предупреждения или ошибки.

Анимация fade (постепенное исчезновение/появление) используется по дефолту, чтобы показать или спрятать Тултип, делая появление более органичным и естественным по сравнению с простым включением/выключением видимости. Это может быть кастомизировано с помощью опций show (показать) и hide (спрятать).

См ссылки ниже для подробных примеров.

Примеры Тултипов на этом сайте: Тултип, Дефолтный, Адаптированный, Формы, Трассировка, Анимированный, Контент, Видео Плейер.
Тесты: Тултипы на сайте, Тултипы из документации.

W4W :: Виджеты Для Виджетов

Mouse :: Мышка

Mouse :: Мышка

Функционал Мыши. Основной уровень функционала мыши.

Также как и виджет jQuery.Widget, функционал взаимодействия с мышью не предназначен для использования напрямую. Это чисто конкретно базовый слой для других виджетов для получения возможностей управления мышкой. Эта страничка только документирует, что было добавлено к виджету jQuery.Widget, но она включает внутренние методы, которые нельзя перезаписывать. Внутренние доступные API это: _mouseStart(), _mouseDrag(), _mouseStop() и _mouseCapture().

См ссылки ниже для подробных примеров.

Примеры на этом сайте: Мышка.
Тесты: Мышка на сайте.

Widget :: Виджет

Widget :: Виджет

С помощью фабрики виджетов (jquery.ui.widget.js) можно построить свой костомизированный виджет.

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

См ссылки ниже для подробных примеров.

Примеры на этом сайте: Виджет, Дефолтный.

Effects :: Эффекты

Effects :: Эффекты

Эффекты плагина UI библиотеки jQuery.

Мы рассмотрим следующие эффекты плагина UI библиотеки jQuery: Blind (Невидимость), Bounce (Затухающее подпрыгивание), Clip (Сворачивание вниз), Drop (Падение), Explode (Взрыв), Fade (Постепенное исчезновение), Fold (Сворачивание в левый верхний угол), Highlight (Вспышка), Puff (Пуф!), Pulsate (Пульсар), Scale (Движение левого верхнего угла в центр), Shake (Тряска), Size (Размер), Slide (Появление слева), Transfer (Трансформация в кнопку запуска).

См ссылки ниже для подробных примеров.

Примеры Эффектов на этом сайте: Эффекты, Показ кейса, Улучшители.

Blind Effect :: Ослепительный эффект

Blind Effect :: Ослепительный эффект

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

Параметр direction - направление эффекта ослепления для исчезновения или появления элемента.
Возможные значения: up(вверх), down(вниз), left(налево), right(направо), vertical(вертикально), horizontal(горизонтально).
Можно применить overflow: hidden для эффекта изменения высоты.

См ссылки ниже для подробных примеров.

Примеры на этом сайте: Ослепительный эффект.
Тесты: Ослепительный эффект на сайте, Ослепительный эффект из документации.

Bounce Effect. Дрожащий эффект.

Bounce Effect. Дрожащий эффект.

Дрожащий эффект вызывает дрожание элемента. Когда используется с hide (спрятать) или show (показать), последнее или первое дрожание также скрывает/показывает элемент.

Опция distance (default: 20) - Расстояние наибольшего дрожания в пикселях.
Опция times (default: 5) - Количество раз, которое элемент будет дрожать. Когда используется с hide (спрятать) или show (показать), имеет место быть дополнительная "половинка" дрожания для скрывания/показа элемента.

См ссылки ниже для подробных примеров.

Примеры на этом сайте: Дрожащий эффект.
Тесты: Дрожащий эффект на сайте, Дрожащий эффект из документации.

Эффект Клипа. Clip Effect.

Эффект Клипа (сворачивания-разворачивания). Clip Effect.

Эффект Клипа прячет или показывает элемент, сворачивая элемент вертикально или горизонтально.

Опция direction (default: "vertical") - направление по которому Эффект Клипа будет прятать или показывать элемент.
Значение vertical (вертикально) - сворачивание по верхним и нижним углам, horizontal (горизонтально) - сворачивание по правым и левым углам.

См ссылки ниже для подробных примеров.

Примеры на этом сайте: Эффект Клипа.
Тесты: Эффект Клипа на сайте, Эффект Клипа из документации.

Эффект Дропа. Drop Effect.

Эффект Дропа (падения). Drop Effect.

Эффект Дропа (падения) прячет или показывает элемент, который постепенно исчезает/показывается в определенном направлении.

Опция direction (default: "left") - направление по которому элемент будет падать при исчезновении или направление по которому элемент будет восстанавливаться при появлении.
Возможные значения: up (верх), down (вниз), left (налево), right (направо).

См ссылки ниже для подробных примеров.

Примеры на этом сайте: Эффект Дропа.
Тесты: Эффект Дропа на сайте, Эффект Дропа из документации.

Эффект Взрыва. Explode Effect.

Эффект Взрыва. Explode Effect.

Эффект Взрыва прячет элемент, разрывая на некоторое количество кусков или показывает элемент, склеивая его из некотороого количества кусков.

Опция pieces (default: 9) - количество кусков для взрыва, должны составлять идеальный квадрат, любые другие значения округляются до ближайшего квадрата.

См ссылки ниже для подробных примеров.

Примеры на этом сайте: Эффект Взрыва.
Тесты: Эффект Взрыва на сайте, Эффект Взрыва из документации.

Эффект Фейда. Fade Effect.

Эффект Фейда (Постепенное исчезновение и/или появление). Fade Effect.

Эффект Фейда (Постепенное исчезновение и/или появление) медленно прячет или показывает элемент.

См ссылки ниже для подробных примеров.

Примеры на этом сайте: Эффект Фейда.
Тесты: Эффект Фейда на сайте, Эффект Фейда из документации.

Эффект Сворачивание. Fold Effect.

Эффект Сворачивание. Fold Effect.

Эффект Сворачивание прячет или показывает элемент путем его сворачивания.

Опции:
size (default: 15) :: размер (по умолчанию: 15) - Размер свернутого элемента
horizFirst (default: false) :: сначала горизонтальное сворачивание (по умолчанию: ложь) - производить ли сначала сворачивание по горизонтали в случае скрытия. Помните, показ инвертирует скрытие.

См ссылки ниже для подробных примеров.

Примеры на этом сайте: Эффект Сворачивание.
Тесты: Эффект Сворачивание на сайте, Эффект Сворачивание из документации.

Эффект Вспышка. Highlight Effect.

Эффект Вспышка. Highlight Effect.

Эффект Вспышка прячет или показывает элемент путем изначального анимирования его фона.

Опции:
color (default: "#ffff99") :: цвет (по умолчанию красно-зеленый, т.е. желтый) - Цвет фона, используемый во время анимации.

См ссылки ниже для подробных примеров.

Примеры на этом сайте: Эффект Вспышка.
Тесты: Эффект Вспышка на сайте, Эффект Вспышка из документации.

Эффект Пуф! Puff Effect.

Эффект Пуф! Puff Effect.

Эффект Пуф! (Puff Effect, дымовая завеса) изменяет размер элемента и в тоже время показывает или прячет элемент.

Опции:
percent (default: 150) :: Максимальное значение шкалы измерения - Значение максимального размера элемента для исчезания или появления определяется опцией percent (процент). По умолчанию значение этой опции равно 150, т.е. максимальный размер элемента в полтора раза больше первоначального.

См ссылки ниже для подробных примеров.

Примеры на этом сайте: Эффект Пуф!.
Тесты: Эффект Пуф! на сайте, Эффект Пуф! из документации.

Эффект Пульсар. Pulsate Effect.

Эффект Пульсар. Pulsate Effect.

Эффект Пульсар прячет или показывает элемент предварительно вызвав его пульсирование (дрожание).

Опции:
times (default: 5) :: количество колебаний дрожания (по умолчанию 5) - Количество раз, которое элемент должен пульсировать. Добавочная половинка пульса добавляется, чтобы спрятать/показать элемент.

См ссылки ниже для подробных примеров.

Примеры на этом сайте: Эффект Пульсар.
Тесты: Эффект Пульсар на сайте, Эффект Пульсар из документации.

Эффект Скейла. Scale Effect.

Эффект Скейла. Scale Effect.

Сжимает или увеличивает элемент в заданном процентом соотношении.

Опции:
direction (default: "both") :: Направление, по умолчанию "both" - в обе стороны. - Направление эффекта. Возможные значения: "both" (в обе стороны), "vertical" (вертикально) or "horizontal" (горизонтально).
origin (default: [ "middle", "center" ]) :: Точка исчезновения.
percent :: Значение в процентах для изменения размера.
scale (default: "both") :: Какие области элемента будут подвергнуты изменению размера: "both" (оба), "box" (обрамление), "content" (содержание). Обрамление ("box") - изменение размера коснется границ и прослойки границ (padding) элемента. Содержание ("content") - изменение размера коснется любого контента внутри элемента.

См ссылки ниже для подробных примеров.

Примеры на этом сайте: Эффект Скейла.
Тесты: Эффект Скейла на сайте, Эффект Скейла из документации.

Эффект Тряска. Shake Effect.

Эффект Тряска. Shake Effect.

Трясет элемент несколько раз, вертикально или горизонтально.

Опции:
direction (default: "both") :: Направление, по умолчанию "both" - в обе стороны. - Направление эффекта. Возможные значения: "left" (лево), "right" (право), "up" (верх), "down" (низ).
distance (default: 20) :: Расстояние, по умолчанию 20 - Расстояние тряски.
times (default: 3) :: количество раз, по умолчанию 3 - Количество раз тряски.

См ссылки ниже для подробных примеров.

Примеры на этом сайте: Эффект Тряска.
Тесты: Эффект Тряска на сайте, Эффект Тряска из документации.

Эффект Размер. Size Effect.

Эффект Размер. Size Effect.

Меняет размер элемента на размер с заданными параметрами-опциями width (ширина) и height (высота).

Опции:
to :: Параметры-опции width (ширина) и height (высота) на которые поменять размер.
origin (default: [ "top", "left" ]) :: точка исчезновения, по умолчанию: "top" (высота), "left" (лево) - Точка исчезновения.
scale (default: "both") :: - Какие области элемента будут подвергнуты изменению размера: "both" (оба), "box" (обрамление), "content" (содержание). Обрамление ("box") - изменение размера коснется границ и прослойки границ (padding) элемента. Содержание ("content") - изменение размера коснется любого контента внутри элемента.

См ссылки ниже для подробных примеров.

Примеры на этом сайте: Эффект Размер.
Тесты: Эффект Размер на сайте, Эффект Размер из документации.

Эффект Слайда. Slide Effect.

Эффект Слайда. Slide Effect.

Скольжение элемента из области видимости.

См ссылки ниже для подробных примеров.

Примеры на этом сайте: Эффект Слайда.
Тесты: Эффект Слайда на сайте, Эффект Слайда из документации.

Эффект Трансформация. Transfer Effect.

Эффект Трансформация. Transfer Effect.

Трансформирует выделенный элемент в другой элемент.

Опции:
className :: Имя класса с аргументом, которое получит трансформируемый элемент.
to :: Селектор жКвери (jQuery), элемент, в который идет трансформация.

См ссылки ниже для подробных примеров.

Примеры на этом сайте: Эффект Трансформация.
Тесты: Эффект Трансформация на сайте, Эффект Трансформация из документации.

Если вы планируете вернуться сюда позднее...
Пожалуйста, запомните эту страничку -
URL: http://kocby.ru/post/webmaster/jquery/ui/

Спасибо за посещение этой странички и внимательное отношение к ее контенту и дизайну. Удачи и успеха!