CSS-фреймворк jQuery UI
76Веб-программирование --- jQuery UI --- CSS-фреймворк jQuery UI
Библиотека jQuery UI управляет внешним видом виджетов, применяя к элементам наборы классов, в которых используются сложные стили CSS. Часть классов открыта для программистов, чтобы даже тем элементам, которые не являются частью виджетов, можно было придавать стилевое оформление, одинаковое с виджетами.
Использование контейнерных классов виджетов
Основные стили, которые используются в виджетах, применяются с помощью трех базовых классов CSS-фреймворка. Эти классы описаны в таблице ниже:
Класс | Описание |
---|---|
ui-widget | Применяется к общему внешнему контейнерному элементу всего виджета |
ui-widget-header | Применяется к контейнерным элементам заголовков |
ui-widget-content | Применяется к контейнерным элементам содержимого |
Перечисленные классы применяются к контейнерным элементам, т.е. к элементам, которые целиком содержат все элементы, относящиеся к заголовку или содержимому (или, в случае класса ui-widget, к общему для всего виджета наружному элементу, с которым вы работаете). Применение этих классов демонстрируется в примере ниже:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/sunny/jquery-ui.css">
<style type="text/css">
body > div {float:left; margin:10px}
.dcell {display: table-cell; padding: 10px;}
.dcell > * {vertical-align: middle}
label {width: 6em; padding-left: .5em; display: inline-block;}
</style>
</head>
<body>
<div>
<div>
Цветы
</div>
<div>
<div class="dcell">
<img src="http://professorweb.ru/downloads/jquery/peony.png"/>
<label for="peony">Пион:</label>
</div>
</div>
</div>
<div class="ui-widget">
<div class="ui-widget-header">
Цветы
</div>
<div class="ui-widget-content">
<div class="dcell">
<img src="http://professorweb.ru/downloads/jquery/peony.png"/>
<label for="peony">Пион:</label>
</div>
</div>
</div>
</body>
</html>
В этом примере имеются два набора элементов, к одному из которых применены контейнерные классы. Результат можно увидеть на рисунке:
Скругление углов
Следующий набор классов CSS-фреймворка позволяет применять к элементам скругленные углы. Классы этой категории описаны в таблице ниже:
Класс | Описание |
---|---|
ui-corner-all | Скругляет все углы элемента |
ui-corner-bl | Скругляет левый нижний угол |
ui-corner-bottom | Скругляет левый нижний и правый нижний углы |
ui-corner-br | Скругляет правый нижний угол |
ui-corner-left | Скругляет левый верхний и левый нижний углы |
ui-corner-right | Скругляет правый верхний и правый нижний углы |
ui-corner-tl | Скругляет левый верхний угол |
ui-corner-top | Скругляет левый верхний и правый верхний углы |
ui-corner-tr | Скругляет правый верхний угол |
Эти классы оказывают воздействие лишь в том случае, если элемент имеет фон или поля, откуда следует, что их можно применять к классам ui-widget-header и ui-widget-content, как показано в примере ниже:
...
<div class="ui-widget">
<div class="ui-widget-header ui-corner-top" style="padding-left:10px;">
Цветы
</div>
<div class="ui-widget-content ui-corner-bottom">
<div class="dcell">
<img src="http://professorweb.ru/downloads/jquery/peony.png"/>
<label for="peony">Пион:</label>
</div>
</div>
</div>
</body>
</html>
Здесь суммарный эффект создается за счет скругления верхних углов контейнера заголовка (header) и нижних углов контейнера содержимого (content). Результат представлен на рисунке:
Обратите внимание на то, что для контейнера заголовка установлен небольшой отступ. Скругленные утлы применяются внутри элемента, и поэтому во избежание отсечения содержимого для них может потребоваться дополнительное пространство.
Использование классов, описывающих состояние взаимодействия
Классы CSS-фреймворка можно использовать также для того, чтобы отображать различные состояния взаимодействия, что позволяет создавать элементы, реагирующие на взаимодействие с ними пользователя так, как это делают виджеты jQuery UI. Доступные классы этой категории описаны в таблице ниже:
Класс | Описание |
---|---|
ui-state-default | Применяет стиль по умолчанию, который установлен для виджетов, способных реагировать на щелчки |
ui-state-hover | Применяет стиль, который используется при наведении указателя мыши на виджет, способный реагировать на щелчки |
ui-state-focus | Применяет стиль, который используется при получении фокуса виджетом, способным реагировать на щелчки |
ui-state-active | Применяет стиль, который используется для виджета, способного реагировать на щелчки, когда он активен |
Пример применения перечисленных четырех классов представлен в примере ниже. Обратите внимание на добавление отступа для внутреннего элемента span во всех случаях. Классы взаимодействия определяют значения отступов, и самый простой способ создания промежутка между контейнерным элементом и содержимым — установить отступ для внутреннего элемента:
<!DOCTYPE html>
...
<style type="text/css">
body > div {float:left; margin:10px}
span {padding: 10px; display: block}
</style>
</head>
<body>
<div class="ui-widget ui-state-default ui-corner-all">
<span>Default</span>
</div>
<div class="ui-widget ui-state-hover ui-corner-all">
<span>Hover</span>
</div>
<div class="ui-widget ui-state-focus ui-corner-all">
<span>Focus</span>
</div>
<div class="ui-widget ui-state-active ui-corner-all">
<span>Active</span>
</div>
</body>
</html>
Некоторые из состояний почти совпадают с темой оформления jQuery UI, которую использую я, но при необходимости можно воспользоваться приложением Themoroller для создания темы, которая будет визуально выделять состояние.
Использование классов информационных подсказок
Некоторые классы CSS-фреймворка позволяют предоставлять пользователю информационные подсказки относительно состояния элементов в документе. Эти классы описаны в таблице ниже:
Класс | Описание |
---|---|
ui-state-highlight | Подсвечивает элемент для привлечения к нему внимания пользователя |
ui-state-error | Визуально выделяет элемент, содержащий сообщение об ошибке |
ui-state-disabled | Применяет стиль, соответствующий отключенной функциональности элемента (хотя в действительности функциональность элемента при этом не отключается) |
Пример использования информационных подсказок highlight и disabled приведен ниже:
<!DOCTYPE html>
...
<style type="text/css">
body > div {float:left; margin:10px}
.dcell {display: table-cell; padding: 10px;}
.dcell > * {vertical-align: middle}
label {width: 6em; padding-left: .5em; display: inline-block;}
</style>
</head>
<body>
<div class="ui-widget">
<div class="ui-widget-header ui-corner-top" style="padding-left:10px;">
Цветы
</div>
<div class="ui-widget-content ui-corner-bottom">
<div class="dcell">
<img src="http://professorweb.ru/downloads/jquery/peony.png"/>
<label for="peony">Пион:</label>
</div>
</div>
</div>
<div class="ui-widget ui-state-highlight ui-corner-all">
<div class="ui-widget-header ui-corner-top" style="padding-left:10px;">
Цветы
</div>
<div class="ui-widget-content ui-corner-bottom">
<div class="dcell">
<img src="http://professorweb.ru/downloads/jquery/peony.png"/>
<label for="peony">Пион:</label>
</div>
</div>
</div>
<div class="ui-widget ui-state-disabled">
<div class="ui-widget-header ui-corner-top" style="padding-left:10px;">
Цветы
</div>
<div class="ui-widget-content ui-corner-bottom">
<div class="dcell">
<img src="http://professorweb.ru/downloads/jquery/peony.png"/>
<label for="peony">Пион:</label>
</div>
</div>
</div>
</body>
</html>
Результаты применения этих классов проиллюстрированы на рисунке:
Обратите внимание на то, что одновременно с использованием класса ui-state-highlight я применяю стиль ui-corner-all. Дело в том, что указанный класс задает границу, которая по умолчанию отображается с прямыми углами. Если дочерние элементы имеют скругленные углы, то такие же углы следует задать и для выделяющего элемента.
Пример использования класса информационных подсказок ui-state-error приведен ниже:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/sunny/jquery-ui.css">
<style type="text/css">
body > div {float:left; margin:10px; padding:20px}
</style>
</head>
<body>
<div class="ui-widget ui-state-error">
Ой! Что-то пошло не так.
</div>
</body>
</html>
Результат представлен на рисунке: