CSS
Webasyst предоставляет набор готовых CSS-классов, с помощью которых легко формируются красивые интерфейсы, оптимизированные под браузеры Firefox 3.6+, Google Chrome, Opera 11, Safari, Internet Explorer 8 и 9 (версии 6 и 7 мы не поддерживаем и агитируем за использование современных браузеров).
Класс .menu-v
позволяет создавать вертикальные меню из ссылок и применяется к элементу ul
, например:
<ul class="menu-v with-icons">
В этом примере для списка дополнительно указано имя класса .with-icons
, определяющего тип меню (тип указывать необязательно). Вебасист поддерживает следующие типы меню:
ul.menu-v.with-icons
: меню с маленькими иконками слева от текста ссылки (этот класс разместит все иконки, добавленные с помощью элементов<i class="icon16 ..."></u>
внутри ссылки, слева от названий пунктов меню);ul.menu-v.compact
: компактное меню (уменьшенные вертикальные отступы у элементов меню);ul.menu-v.dropdown
: выпадающее меню (каждый следующий уровень меню выпадает при наведении курсора (:hover
) на родительский элемент в текущем уровне).
Разные типы меню можно совмещать друг с другом. Например:
<ul class="menu-v with-icons compact">
Класс .menu-v
позволяет создавать иерархические меню неограниченной вложенности, размещая следующий уровень
ul.menu-v
внутри текущего элемента li
. Иерархические меню рекомендуется оборачивать в блок
<div class="hierarchical"></div>
.
Выбранные элементы меню выделяются с помощью класса .selected
:
<li class="selected">
Класс .menu-h
позволяет создавать горизонтальные меню из ссылок. Применяется к элементам ul
:
<ul class="menu-h">
Дополнительный класс ul.menu-h.dropdown
позволяет использовать дочерние выпадающие меню: каждый последующий уровень меню появляется при наведении курсора (:hover
) на родительский элемент текущего уровня.
Выбранные элементы меню выделяются с помощью класса .selected
:
<li class="selected">
Класс .tabs
используется для отображения горизонтального меню в виде вкладок. Класс применяется к элементам ul
:
<ul class="tabs">
Чтобы иметь вид вкладки, содержимое элемента li
должно быть оформлено в виде ссылки
<a></a>
Класс необходимо использовать в паре с блочным элементом <div class="tab-content">
, следующим сразу после
<ul class="tabs">
, так как именно этот элемент добавляет визуальную границу под вкладками.
Выбранная вкладка выделяется с помощью класса .selected
:
<li class="selected">
Класс .zebra
используется для представления данных в виде таблицы с чередующимся цветом фона каждого следующего ряда.
Класс можно применять к элементам <table class="zebra">
и <ul class="zebra">
.
Класс ul.thumbs
используется для представления изображений в виде списка-таблицы — например,
фотографий внутри альбома, списка контактов, фотографий товаров и т. п.
По умолчанию ширина каждого элемента списка li
определяется автоматически в зависимости от размера картинки. Дополнительно
для списка можно указать класс, устанавливающий фиксированную ширину в пикселях, например:
<ul class="thumbs li100px">
Возможные значения: .li50px
, .li100px
, .li150px
, .li200px
, .li250px
,
.li300px
, .li350px
.
С помощью класса .highlighted
(<li class="highlighted">
) рекомендуется выделять элементы,
на которые пользователю следует обратить внимание (например, записи, добавленные коллегами пользователя с момента его предыдущего входа в Вебасист).
Выбранные элементы меню выделяются с помощью класса .selected
, например:
<li class="selected">
Наиболее удобный и рекомендуемый способ определения разметки приложения — с помощью пары классов .sidebar
и .content
. Эти классы позволяют реализовать многоколоночную разметку страницы с единой прокруткой для всей
страницы (основной и наиболее привычный для пользователей вид веб-страницы).
<div class="sidebar left200px"> <div class="block"> левая колонка шириной 200 пикселей </div> </div> <div class="sidebar right100px"> <div class="block"> правая колонка шириной 100 пикселей </div> </div> <div class="content left200px right100px"> <div class="block"> основное содержимое </div> </div>
Ширина и положение колонок регулируются с помощью дополнительных классов .leftNpx
и .rightNpx
,
где значения left и right определяют расположение колонки, а N — ширину в пикселях (возможные значения:
100, 200, 250, 300, 400). Количество левых и правых колонок на странице не ограничено. Для правильного отображения следует рассчитать
ширину и отступы слева и справа от блока .content
и установить ее с помощью этих же классов (.leftNpx
и .rightNpx
).
Например, если на странице используются две левых колонки с классом .sidebar.left200px
, то для области основного содержания необходимо
применить класс .content.left400px
.
Если размер колонок и отступы для основного содержания не заданы, будет применена ширина по умолчанию: 200 пикселей. Для левой колонки рекомендуется использовать именно такую ширину, так как она наиболее гармонично вписывается в общий вид интерфейса Вебасиста.
Вместо класса .sidebar
можно использовать класс .sidebar-fixed
. С его помощью формируется такая
же колонка, но с фиксированным положением на странице, не зависящим от положения полосы прокрутки.
Классы группы .fields
позволяют отображать списки данных (например, контактную информацию
пользователя или форму регистрации) в виде пар «ключ—значение» с помощью блочных элементов div
.
Структура использования классов группы .fields
:
.fields (.form) (.field-group) .field .name .value (.value) (.value) .field .name .value (.value) (.value)
Классы .icon16
и .icon10
применяются к элементам i
и позволяют
встраивать маленькие иконки размером 16x16 и 10x10 пикселей в тексты, ссылки и заголовки, например, так: ,
или так: .
<i class="icon16 iconname">
Иконки Вебасиста объединены в единый файл wa-content/img/icon16.png
(и icon10.png
соответственно).
Полный список встроенных в Вебасист иконок указан в основном файле стилей wa-content/css/wa/wa-1.3.css
. Если встроенных
иконок не хватает для вашего приложения, их набор может быть расширен произвольными иконками путём добавления правил следующего вида
в CSS-файл приложения:
.icon16.iconname { }
Иконки, использующиеся в Вебасисте, основаны на наборах Fugue и Diagona авторства Yusuke Kamiyamane: http://p.yusukekamiyamane.com/. В этих наборах более 3000 иконок, которые можно использовать бесплатно по условиям лицензии Creative Commons Attribution 3.0 license. При разработке приложений Вебасист мы рекомендуем использовать иконки из этих наборов.
Класс .profile
был изначально разработан для отображения контактной информации пользователя с его фотографией,
однако впоследствии нашёл более широкое применение. Например, он хорошо подходит для отображения комментариев с изображениями (аватарами) авторов,
записей о товарах с их изображениями, эскизов фотографий с EXIF-данными и т. п. Класс .profile
подходит для отображения любой
информации в виде «изображение слева, текстовая информация справа». В HTML-шаблонах класс подключается с помощью следующей конструкции:
<div class="profile image96px"> <div class="image"> изображение </div> <div class="details"> содержание </div> </div> </div>
С помощью дополнительного к .profile
класса .image96px
можно указать точный размер изображения внутри блока
.image
. Другие возможные значения: .image20px
, .image32px
, .image50px
.
Класс .progressbar
используется для отображения индикатора выполнения процесса, полностью реализованного
только средствами HTML и CSS:
<div class="progressbar"> <div class="progressbar-outer"> <div class="progressbar-inner" id="my-custom-progressbar-id" style="width: 37%;"> </div> </div> </div>
Выделенный жирным атрибут style
задает текущее состояние индикатора. Изменять его в контексте текущей страницы можно
с помощью JavaScript. Пример с использованием jQuery:
$('#my-custom-progressbar-id').css('width','41%'); //установка значения индикатора на 41%
Внешний вид индикатора можно изменять — поддерживаются классы для указания цвета заливки .progressbar.green
,
.progressbar.yellow
, .progressbar.red
, .progressbar.blue
и класс для отображения уменьшенной версии: .progressbar.small
.
Диалог является важным и часто используемым элементом пользовательского интерфейса.
Фреймворк Вебасист предоставляет механизм построения диалогов средствами JavaScript.
Для работы с функцией построения диалогов необходимо подключить в коде страницы JS-файл:
<script type="text/javascript" src="{$wa_url}wa-content/js/jquery-wa/wa.dialog.js" type="text/javascript"></script>
Для преобразования элемента страницы $(el)
в диалог,
нужно применить следующую конструкцию JavaScript:
$(el).waDialog(options);
Простой пример (диалог с одним полем ввода и одной кнопкой отправки формы):
$('<div>Укажите имя: <input type="text" name="name"/></div>').waDialog({ 'buttons': '<input type="submit" value="OK" />', onSubmit: function (d) { $.post('?module=m', $(this).serialize(), function () { d.trigger('close'); // закрыть диалог }, 'json'); return false; } });
Аргумент метода waDialog — options
— это массив параметров,
позволяющий управлять поведением диалога. Допустимые параметры и их значения по умолчанию:
esc: true
— реакция на нажатие кнопки esc: закрывать диалог по нажатию или нет, по умолчанию даbuttons: null
— определяет кнопки диалога, если есть необходимость задать их явноurl: null
— содержимое диалога будет загружено с помощью jQuery.get по указанному URLdisableButtonsOnSubmit: false
— при отправке формы диалога добавляется атрибут disabled всем кнопкам отправки диалога (input[type=submit])onLoad: null
— callback-функция, которая сработает как только диалог будет загруженonCancel: null
— callback-функция, которая будет вызвана при нажатии на cancelonSubmit: null
— callback-функция, которая будет вызвана при сабмите формы диалогаonClose: null
— callback-функция, которая будет вызвана при закрытии диалогаclassName: ''
— CSS-класс, который будет добавлен к HTML-блоку диалогаwidth: ''
— ширина, например '400px'height: ''
— высота, аналогично ширинеtitle: ''
— если задан, то в контент диалога добавится элемент<h1>title</h1>
Во всех callback-функциях, кроме onSubmit
, переменная this
представляет
сам элемент диалога.
В onSumbit
this — это элемент <form>, а элемент диалога передаётся
в функцию первым параметром:
onSubmit: function (d) { $.post('?module=m', $(this).serialize(), function () { d.trigger('close'); // закрыть диалог }, 'json'); return false; }
Структурно диалог разделён на две части: содержимое с полями формы и кнопки.
В передаваемом в конструкцию создания диалога элементе можно указать оба блока.
Содержимое с полями необходимо поместить в div
с CSS-классом "dialog-content", а кнопки в div
с классом "dialog-buttons":
$('<div><form><div class="dialog-content">Контент</div><div class="dialog-buttons"><input type="submit" value="Ok" /></div></form></div>').waDialog({ 'onSubmit': function (d) { d.trigger('close'); return false; } });
Если блок с CSS-классом "dialog-content" не задан, то считается, что передано только содержимое диалога без блока кнопок. В этом случае кнопки можно задать с помощью параметра buttons:
$('<div>Текст простого сообщения</div>').waDialog({ 'buttons': '<input type="submit" value="Close" />', 'onSubmit': function (d) { d.trigger('close'); return false; } });
На все элементы диалога с CSS-классом "cancel" автоматически навешивается событие, закрывающее диалог по клику на элемент.
Для предотвращения возможных конфликтов нельзя использовать CSS-класс "dialog" для элементов, к которым будет применён waDialog.
При разработке шаблонов дизайна для интерфейсов приложений Вебасист часто применяются перечисленные ниже классы и конструкции.
.inline-link
Ссылки с пунктирным подчеркиванием: пример ссылки. Рекомендуется применять для всех ссылок,
выполняющих локальное действие на странице, например, получить подсказку, развернуть пункт меню и т. п. Применяется в шаблоне
в виде конструкции из элементов a
, b
и i
:
<a href="#" class="inline-link"><b><i>текст ссылки</i></b></a>
.button
Большая красивая кнопка:
Класс .button
применяется к элементам input
и a
следующим образом:
<input type="button" class="button" value="Кнопка" /> <a href="#" class="button">Кнопка</a>
.paging
Индикатор текущей страницы:
Конструкция для встраивания в шаблон:
<div class="paging"> <a class="selected" href="#">1</a> <a href="#">2</a> <a href="#">3</a> ... <a href="#">10</a> <a class="prevnext" href="#"><i class="icon10 larr"></i> пред</a> <a class="prevnext" href="#">след <i class="icon10 rarr"></i></a> </div>
.small, .large, .hint
Эти классы изменяют отображение текста внутри текстовых и блочных элементов (span
, em
, div
и т. п.):
<span class="large">текст</span> <span class="small">текст</span> <span class="hint">текст</span>
текст
текст
текст