Виджет должен вписываться в общий дизайн сайта, поэтому разработке была предусмотрена возможность настройки его BI вида. Каждый элемент виджета имеет свой класс CSS, что суще но упрощает настройку.
Самый внешний элемент , вмещающий в себя весь виджет»! сен к классу CSS ajaxSiteSearchContainer. Общий внешний вид 1 определяется этим элементом, т. к. все остальные элементы на большую часть его свойств.
div.ajaxSiteSearchContainer
background-color: #fdfed4; ' border: 1px solid #7F9DB9;
font: 12px arial;
padding; 5px; width: 225px;
Первые две строки определяют цвет фона и рамки соответствен две строки создают визуальный эффект выделения области, пр« жащей виджету. Это может оказаться удобным для пользоват
бенно когда кажется, что текст материализуется из пустоты. Следую¬щая строка определяет размер шрифта и его название. Этот параметр наследуется элементом , в котором выводятся результаты поис¬ка. Дополнительный отступ шириной 5 пикселов служит для визуаль¬ного отделения информации, в противном случае результаты поиска будут сливаться друг с другом. Последний параметр определяет шири¬ну виджета. Это поможет разместить виджет в выделенной для него области и соответственно выровнять текст в виджете.
Элемент также обладает возможностью изменения стиля ото¬бражения. Класс, определяющий стиль формы, называется ajaxSite-SearchForm:
; form.ajaxSiteSearchForm {}
Этот пример не определяет никаких параметров отображения, он лишь предоставляет такую возможность. Изменяя параметры отсту¬пов или рамки (или любого другого элемента внешнего вида), можно добиться эффекта отделения формы от результатов поиска.
Элемент содержит два дочерних элемента: поле ввода и кноп¬ку. Оба этих элемента описываются тегом :
Текстовое поле ввода (класс ajaxSiteSearchTextBox) окружено сплошной цветной рамкой шириной 1 пиксел и отступом шириной 2 пиксела. Для кнопки классом ajaxSiteSearchButton определен цвет фона и отсту¬пы со всех сторон шириной 1 пиксел. Текст на кнопке выводится жир¬ным шрифтом белого цвета. Он смещен вправо и отделен от левого края кнопки пустым пространством шириной 3 пиксела.
В данном примере для области вывода результатов (элемент ) оформление явно не задается, но она наследует размер и название шрифта от родительского элемента:
div.ajaxSiteSearchResultPane {}
Последние элементы виджета - это гиперссылки:
a.ajaxSiteSearchLink
color: #316ас5; display: block; padding: 2рх;
a:hover.ajaxSiteSearchLink Э? color: »9Ыа1а;
В данном примере гиперссылки имеют два стиля оформления: ная ссылка и ссылка, над которой находится указатель мыши, из них (по умолчанию) определяет гиперссылки как блочные; ты, т. е. каждая гиперссылка располагается в отдельной строке.) имеют голубоватый цвет и отступы шириной 2 пиксела. Второй t оформления активируется, когда пользователь перемещает; мыши на ссылку. В этом случае цвет ссылки меняется с го* на красноватый.
Данные параметры оформления были приведены исключител примера. В реальной жизни оформление виджета может быть i но так, чтобы он вписывался в дизайн веб-страницы. Не бойтесы нять стили отображения этих элементов по своему вкусу.