jQuery UI классы оформления
jQuery UI содержит набор предопределенных классов для создания оформления сайтов.
Используя готовые классы Вы можете сэкономить время при создании оформления веб-страниц. Использование готовых классов также поможет стандартизировать оформление Вашего сайта.
С помощью настройщика тем Вы можете настроить оформление предопределенных классов на Ваш вкус.
Виджет themeswitcher
Виджет themeswitcher позволяет переключатся между различными темами оформления не покидая страницы.
Это бывает особенно полезно при подборе подходящего класса оформления.
Синтаксис:
// Добавляем ссылку на плагин (данный код должен располагаться в секции body) <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"> </script> //Создаем элемент который будет превращен в виджет <div id="switcher"></div> /* В тэге script задаем код, который превратит элемент в виджет (данный код должен располагаться в head)*/ $("#switcher").themeswitcher();
Пример
$(document).ready(function(){ $("#switcher").themeswitcher({ initialText:"Выбрать тему", buttonPreText:"Тема: " }); });
Оформление виджетов
С помощью класса .ui-widget Вы можете оформить внешний вид виджетов. Данный класс устанавливает одинаковый шрифт всем вложенным элементам тем самым стандартизируя вид содержимого виджета.
С помощью класса .ui-widget-header Вы можете оформить заголовок, а с помощью .ui-widget-content содержимое виджетов.
Пример
<div id="widget1" class="ui-widget"> <h2 style="text-align:center" class="ui-widget-header">.... <p style="text-align:center" class="ui-widget-content" >.... </div>
Добавление сглаженных углов
С помощью предопределенных классов jQuery UI Вы можете сделать углы элементов сглаженными.
Класс | Описание |
---|---|
.ui-corner-all | Позволяет сделать все углы элемента сглаженными. |
.ui-corner-tr | Делает сглаженным верхний правый угол элемента. |
.ui-corner-tl | Делает сглаженным верхний левый угол элемента. |
.ui-corner-top | Делает сглаженными верхний левый и верхний правый углы элемента. |
.ui-corner-bl | Делает сглаженным нижний левый угол элемента. |
.ui-corner-br | Делает сглаженным нижний правый угол элемента. |
.ui-corner-bottom | Делает сглаженными нижний правый и нижний левый углы элемента. |
.ui-corner-left | Делает сглаженными верхний левый и нижний левый углы элемента. |
.ui-corner-right | Делает сглаженными верхний правый и нижний правый углы элемента. |
Пример
<div id="container" class="ui-widget ui-corner-all">.... <div id="container" class="ui-widget ui-corner-top">.... <div id="container" class="ui-widget ui-corner-tr">....
jQuery UI иконки
Иконки помогают создать интуитивно понятный пользовательский интерфейс. К примеру Вы можете добавить иконку в форме знака вопроса на кнопку, которая вызывает окно со справочной информацией, или добавить иконку в форме конверта на кнопку отправляющую письмо по электронной почте.
jQuery UI предлагает для использования более 170 "встроенных" иконок.
Для того, чтобы вставить иконку необходимо:
- Создать элемент, в котором будет отображена иконка;
- Добавить этому элементу класс ui-icon;
- Добавить элементу класс соответствующий желаемой иконке.
Названия классов иконок в jQuery UI имеют следующий стандартный вид: .ui-icon-[название]-[дополнительное описание]-[направление].
К примеру, иконка жирной стрелки направленной направо, имеет следующий класс: .ui-icon-arrowthick-1-e (arrowthick - "жирная стрелка", e = east - "восток").
Пример
<span class="ui-icon ui-icon-carat-1-n"></span> <span class="ui-icon ui-icon-carat-1-ne"></span> <span class="ui-icon ui-icon-carat-1-e"></span> <span class="ui-icon ui-icon-carat-1-se"></span> <span class="ui-icon ui-icon-carat-1-s"></span> <span class="ui-icon ui-icon-grip-solid-horizontal"></span> <span class="ui-icon ui-icon-gripsmall-diagonal-se"></span> <span class="ui-icon ui-icon-grip-diagonal-se"></span>
Таблица предопределенных классов
Таблица ниже содержит описание всех остальных существующих в jQuery UI предопределенных классов:
Класс | Описание |
---|---|
.ui-helper-hidden | Применяет display:none к элементу. |
.ui-helper-reset | Сбрасывает значения таких свойства как margin, padding, text-decoration и list-style. |
.ui-state-default | Данный класс применяется к кнопкам, на которые не был наведен курсор мыши. |
.ui-state-hover | Данный класс применяется к кнопкам, на которые был наведен курсор мыши. |
.ui-state-active | Данный класс применяется к кнопкам во время щелчка мыши. |
.ui-state-highlight | Данный класс применяется к элементам, на которые необходимо обратить внимание. |
.ui-state-error | Данный класс применяется к элементам содержащим сообщения об ошибках. |
.ui-state-disabled | Данный класс применяется к недоступным для использования элементам. |
.ui-priority-primary | С помощью данного класса Вы можете выделить кнопку из группы кнопок как наиболее важную. |
.ui-priority-secondary | С помощью данного класса Вы можете выделить кнопку из группы кнопок как наименее важную. |
Пример
<ul class="ui-helper-reset">.... <button id="but1" class="ui-state-default">.... <p class="ui-state-highlight">.... <p class="ui-state-error">.... <button id="but2" class="ui-state-disabled">.... <button class="ui-priority-secondary">.... <button class="ui-priority-primary">....