TabControl - Форум

ФОРУМ Игромания и киномания – сообщество пользователей игрового портала Igromen.Do.Am.
Форум - это место, где можно обсудить игровые новости и обновления, задать вопросы, разместить объявления и сообщения, дать объявления о предоставляемых вами услугах, поделиться полезной информацией и способами, вступить в команду портала (на должности модератора, журналиста), а также найти себе друзей и товарищей для общения и совместного времяпровождения в играх.
Все действия (общение и размещение информации) регламентируются правилами форума.

ТОП-5 по сообщениям

Димон

754

ТОП-5 по репутации

754

Страница 1 из 1
1

TabControl

05.11.2012 в 22:23

Димон

Администраторы

/.s/a/38/496767602.png

Менеджер проекта

Статус:

Online

Регистрация:

07.10.2012

Сообщения:

754

Предисловие
Недавно понадобился плагин вкладок, лазая по сети, наткнулся на эту замечательную вещь.
Найдя еще несколько подобных штук, выбор остался именно на этом плагине.

Описание
Данный скрипт на jQuery реализует TabControl (для тех, кто не знает: TabControl - блок с вкладками, в каждой вкладке свое содержимое). Очень прост в использование и имеет кучу других полезных качеств, и одно из них - кроссбраузерность (в IE 6 тоже работает).

Установка
1. Загружаем прикрепленный файл tables.js в папку js на своем сайте.

2. Переходим в режим редактирование CSS кода (ПУ » Управление дизайном » Редактирование шаблонов » Таблица стилей (CSS)), в самое начало вставляем следующий код

Code

/* TabControl Start */
p {padding: 7px 0;}
.sectiontable {
        width: 100%;
        background: #EFEFEF;
        margin: 0 0 30px;
}
ul.tabs {
        height: 28px;
        line-height: 25px;
        list-style: none;
        border-bottom: 1px solid #DDD;
        background: #FFF;
}
.tabs li {
        float: left;
        display: inline;
        margin: 0 1px -1px 0;
        padding: 0 13px 1px;
        color: #777;
        cursor: pointer;
        background: #F9F9F9;
        border: 1px solid #E4E4E4;
        border-bottom: 1px solid #F9F9F9;
        position: relative;
}
.tabs li:hover,
.vertical .tabs li:hover {
        color: #F70;
        padding: 0 13px;
        background: #FFFFDF;
        border: 1px solid #FFCA95;
}
.tabs li.current {
        color: #444;
        background: #EFEFEF;
        padding: 0 13px 2px;
        border: 1px solid #D4D4D4;
        border-bottom: 1px solid #EFEFEF;
}
.box {
        display: none;
        border: 1px solid #D4D4D4;
        border-width: 0 1px 1px;
        background: #EFEFEF;
        padding: 0 12px;
}
.box.visible {
        display: block;
}

.section.vertical {
        width: 440px;
        border-left: 160px solid #FFF;
}
.vertical .tabs {
        width: 160px;
        float: left;
        display: inline;
        margin: 0 0 0 -160px;
}
.vertical .tabs li {
        padding: 0 13px;
        margin: 0 0 1px;
        border: 1px solid #E4E4E4;
        border-right: 1px solid #F9F9F9;
        width: 132px;
        height: 25px;
}
.vertical .tabs li:hover {
        width: 131px;
}
.vertical .tabs li.current {
        width: 133px;
        color: #444;
        background: #EFEFEF;
        border: 1px solid #D4D4D4;
        border-right: 1px solid #EFEFEF;
        margin-right: -1px;
}
.vertical .box {
        border-width: 1px;
}
/* TabControl End */

Сохраняем.

3. В шаблоне, где собираетесь использовать TabControl, перед </body> вставляете приведенный ниже код

Code

4. В нужно месте вставляете следующий код

Code

<div class="sectiontable">
        <ul class="tabs">
         <li class="current">Первая вкладка</li>
         <li>Вторая вкладка</li>
        </ul>

        <div class="box visible">
         <p>Содержимое вкладки #1</p>
        </div>

        <div class="box">
         <p>Содержимое вкладки #2</p>
        </div>
</div>

4. Классы:
current - показывает вкладку активной
box visible - показывает содержимое нужной вкладки

Остальное, думаю, и так понятно.

Заключение
Да, возможно, есть варианты и лучше, хотя вряд ли

Источник с оригинальной информацией: http://dimox.name/

05.11.2012 в 22:25

Димон

Администраторы

/.s/a/38/496767602.png

Менеджер проекта

Статус:

Online

Регистрация:

07.10.2012

Сообщения:

754

Реализация TabControl с помощью BB кодов

Отличия BB реализации от HTML
1. BB код могут использовать все пользователи сайта
2. Не нужно пихать HTML код в сообщение, где необходимо вывести вкладки
3. Очень удобно использовать

Реализация

1. Переходим в ПУ » Управление дизайном » Редактирование шаблонов » Форум » Общий вид страниц форума и перед </body> вставляем следующий код

Code

2. Переходим в ПУ » Управление дизайном » Редактирование шаблонов » Форум » Форма добавления материалов и в самое начало вставляем нижеследующий код

Code

Тут же ищем код $BBCODES$ и вставляем после него нижеприведенный код

Code

Сохраняем.

Результат
Теперь рядом с стандартными BB кодами появилась новая кнопка "tab".

Примечание: На сайте должен быть установлен скрипт из первого сообщения.

TabControl

Страница 1 из 1
1

О портале Igromen.Do.Am

Контакты

В помощь пользователям