jQuery UI содержит набор предопределенных классов для создания оформления.
ТвитнутьjQuery UI содержит набор предопределенных классов для создания оформления сайтов.
Используя готовые классы Вы можете сэкономить время при создании оформления веб-страниц. Использование готовых классов также поможет стандартизировать оформление Вашего сайта.
С помощью настройщика тем Вы можете настроить оформление предопределенных классов на Ваш вкус.
Виджет 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 предлагает для использования более 170 "встроенных" иконок.
Для того, чтобы вставить иконку необходимо:
Названия классов иконок в 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">....
Задание 1 выполните подпункты перечисленные ниже (подробнее в редакторе):
Пример
1. С помощью группы предопределенных класов ui-widget оформите элементы ниже. 2.1. Сделайте все углы элемента с id=corner1 сглаженными. 2.2. Сделайте нижние углы элемента с id=corner2 сглаженными. 2.3. Сделайте верхний левый угол элемента с id=corner3 сглаженным. 2.4. Сделайте правые углы элемента с id=corner4 сглаженными. 3. Вставьте подходящие иконки в элементы с id=icon.