CSS-фреймворк jQuery UI

Веб-программирование --- jQuery UI --- CSS-фреймворк jQuery UI

Библиотека jQuery UI управляет внешним видом виджетов, применяя к элементам наборы классов, в которых используются сложные стили CSS. Часть классов открыта для программистов, чтобы даже тем элементам, которые не являются частью виджетов, можно было придавать стилевое оформление, одинаковое с виджетами.

Использование контейнерных классов виджетов

Основные стили, которые используются в виджетах, применяются с помощью трех базовых классов CSS-фреймворка. Эти классы описаны в таблице ниже:

Контейнерные CSS-классы виджетов jQuery UI
Класс	Описание
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>

В этом примере имеются два набора элементов, к одному из которых применены контейнерные классы. Результат можно увидеть на рисунке:

Применение контейнерных классов виджетов jQuery UI

Скругление углов

Следующий набор классов CSS-фреймворка позволяет применять к элементам скругленные углы. Классы этой категории описаны в таблице ниже:

Классы скругленных углов в стиле виджетов jQuery UI
Класс	Описание
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. Доступные классы этой категории описаны в таблице ниже:

Классы состояния взаимодействия 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-фреймворка позволяют предоставлять пользователю информационные подсказки относительно состояния элементов в документе. Эти классы описаны в таблице ниже:

Классы информационных подсказок jQuery UI
Класс	Описание
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>

Результат представлен на рисунке: