Настройка вкладок для пространств сводных панелей

Для перемещения между страницами можно настроить вкладки под информационной строкой вверху области содержимого.

Об этой задаче

Вкладки состоят из изображений, которые объединены в спрайт для повышения производительности. Спрайт по умолчанию называется Sprite_01.gif и находится в папке WebDAV public/themes/bspaceTheme/images. Самый эффективный способ настройки вкладок - это изменение или создание новых изображений в спрайте по умолчанию.

На следующей диаграмме показаны элементы изображений в спрайте по умолчанию (Sprite_01.gif).

В следующем списке перечислены некоторые элементы изображений спрайта по умолчанию.

Вкладки

Каждая вкладка состоит из изображений левой, правой и средней части вкладки. Эти изображения создают округлый облик выбранной вкладки. Невыбранные вкладки тоже имеют изображения левой, правой и средней части, но по умолчанию они выглядят плоско, чтобы не выделяться. Стиль изображений определяется следующими правилами.

.tabbedNav .tabLeft
.tabbedNav .tabMiddle
.tabbedNav .tabRight

Для выбранной вкладки правила немного отличаются и включают имя класса tabSelected в середине.

.tabbedNav .tabSelected .tabLeft
.tabbedNav .tabSelected .tabMiddle
.tabbedNav .tabSelected .tabRight

Создать страницу

morePagesButton - это значок плюса справа от вкладок, используемый для добавления страниц. Он состоит из изображения для обычного состояния и изображения, когда на значке находится указатель мыши. Внешним видом кнопки добавления страниц управляют следующие стили.

.tabbedNav .newPageIcon
.tabbedNav .newPageIcon:hover

combinedTabBarAndEditPageButton

combinedTabBarAndEditPageButton - это имя класса таблицы, содержащей все вкладки, кнопку добавления страниц и селектор режима. Часть изображения, закрытого другими элементами, показывается через них.

combinedTabBarAndEditPageButton

Селектор режима

Селектор режима представляет собой кнопку для включения/выключения режима редактирования. Он состоит из изображений, которые управляются следующими правилами.

.editPageButtonWrapper .editPageButtonLeft
.editPageButtonWrapper .editPageButtonMiddle
.editPageButtonWrapper .editPageButtonArrowBackground 
.editPageButtonWrapper .editPageButtonRight

В режиме просмотра у страницы есть кнопка Изменить страницу и стрелка вниз, а в режиме редактирования - кнопка Закончить редактирование и стрелка вверх.

editPageButtonWrapper .editPageButtonArrowDown
.editPageButtonWrapper .editPageButtonArrowUp

Процедура

Скопируйте файл Sprite_01.gif в корневой каталог папки стиля, например в папку, где находится файл customStyle.css, и переименуйте его. В данной инструкции новый спрайт называется customTabSprite.gif.
Отредактируйте созданную копию спрайта.
Настройте правила в копии файла CSS. Каждое правило CSS должно начинаться с селектора класса, соответствующего имени стиля пространства. В данном примере это customStyle.
В теге CSS background-image укажите URL нового спрайта. Пример:
```
.customStyle .tabbedNav .tabLeft {
background-image: url("customTabSprite.gif");
}
```

Пример

В этом примере показывается, как настроить правила CSS для получения навигации по вкладкам, как на следующем рисунке. В примере используется измененный спрайт - CustomTabSprite.gif. На этом рисунке показана навигация по вкладкам, созданная путем изменения спрайта CustomTabSprite.gif и правил (см. пример).

Имя класса customStyle в начале каждого правила означает, что стиль вкладок применяется только к пользовательскому стилю.

.customStyle .tabbedNav .tabLeft {
background-image: url(CustomTabSprite.gif);
background-position: 0px -900px;
float:left;
height:25px;
width:2px;
}

.customStyle .tabbedNav .tabRight {
background-image: url(CustomTabSprite.gif);
background-position: 0px -900px;
float:left;
height:25px;
width:2px;
}

.customStyle .bspaceTheme .combinedTabBarAndEditPageButton {
background-image: url("CustomTabSprite.gif");
background-position: 0 -450px;
height: 25px;
}

.customStyle .editPageButtonWrapper .editPageButtonLeft, 
.customStyle .editPageButtonWrapper .editPageButtonRight,
.customStyle .editPageButtonWrapper .editPageButtonMiddle {
background-image: url("CustomTabSprite.gif");
}

.customStyle .editPageButtonWrapper .editPageButtonLeft {
background-image: url("CustomTabSprite.gif");
background-position: 0 -100px;
background-repeat: no-repeat;
height: 25px;
width: 5px;
}