Хак скрипт Табы Вкладки для DLE любой версии

Копаясь со скриптом сайтом dle обнаружил красивый и функциональный элемент дизайна для навигации - это Табы (Вкладки). Скрипт относится к intuitino-friendly. Поэтому его с легкостью можно установить, куда угодно у себя на сайте. Это можно сделать в 2 клика.

Работает на любой версии DLE.

Вставляем этот код в свой шаблон например: main.tpl в нужном месте :

<script type="text/javascript" src="engine/skins/tabs.js"></script><!-- В этом файле лежит функционал табов. Лучше задать абсолютный путь к нему --><div id="dle_tabView1"><div class="dle_aTab" style="display:none;">Сюды вставляем ваш html код страницы вкладки</div><div class="dle_aTab" style="display:none;">Сюды вставляем ваш html код страницы вкладки</div><div class="dle_aTab" style="display:none;">Сюды вставляем ваш html код страницы вкладки</div><div class="dle_aTab" style="display:none;">Сюды вставляем ваш html код страницы вкладки</div></div><script type="text/javascript">initTabs('dle_tabView1',Array('Новости','Блоги','Корпоратив','Аналитика'),0, '100%',0);<!-- В этой функции объявляютя заголовки табов, соблюдайте их правильный порядок --></script><style type="text/css">    .dle_tabPane{        height:26px;    /* Height of tabs */    }    .dle_aTab{        border:1px solid #CDCDCD;        padding:5px;                    }    .dle_tabPane DIV{        float:left;        padding-left:3px;        vertical-align:middle;        background-repeat:no-repeat;        background-position:bottom left;        cursor:pointer;        position:relative;        bottom:-1px;        margin-left:0px;        margin-right:0px;    }    .dle_tabPane .tabActive{        background-image:url('engine/skins/images/tl_active.gif');        margin-left:0px;        margin-right:0px;        }    .dle_tabPane .tabInactive{        background-image:url('engine/skins/images/tl_inactive.gif');        margin-left:0px;        margin-right:0px;    }    .dle_tabPane .inactiveTabOver{        margin-left:0px;        margin-right:0px;    }    .dle_tabPane span{        font-family:tahoma;        vertical-align:top;        font-size:11px;        line-height:26px;        float:left;    }    .dle_tabPane .tabActive span{        padding-bottom:0px;        line-height:26px;    }        .dle_tabPane img{        float:left;    }</style>

Не забываем добавлять ссылки ,

<div class="dle_aTab" style="display:none;">Сюды вставляем ваш html код страницы вкладки

а также редактировать название блоков

initTabs('dle_tabView1',Array('Новости','Блоги','Корпорация','Аналитика'),0, '100%',0);<!-- В этой функции объявляют заголовки табов, соблюдайте их правильный порядок -->

Ну вот и все. Правда, все просто?
Стили достаточно легко , можно изменить под свой проект. Табы можно сделать хоть сбоку, хоть снизу.

Этот способ навигации отлично работает и выглядит симпатично. Можете убедиться на примере моего Проекта
Успехов в разработке!
Хак для DLE любой версии скрипт Табы Вкладки
«Автор:»Кот Баюн
Демо версия сайта: aqula ru

Предлагаем скачать хак для DLE любой версии скрипт Табы Вкладки

haki-taby-vkladki-na-dle.rar [11,79 Kb] (cкачиваний: 515)