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

Рубрика: Хаки для DLE » Хак DLE 11.2, 11.1, 11.0, 10.6, 10.5, 10.4, 10.3, 10.2, 10.1, 10.0, 9.8, 9.7, 9.6, 9.5, 9.4, 9.3, 9.2, 9.0
Хак скрипт Табы Вкладки для 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 любой версии скрипт Табы Вкладки
  • 100
Рубрика: DLE хаки » Хак для DLE
Ранее » Хак Dle Social Виджет Социальные закладки сети« Далее Хак Dle добавляет эффект отражения к avatar аватару
Добавление комментарияОставить комментарий
  • № :13
  • 23 января 2014 15:40
Давно уже заметил эти табы в админке и задумался на днях как бы их на сайте прикрутить, а тут "опа" и готовое решение.
Автору спасибо.
  • № :12
  • 31 января 2013 06:51
semen74,
Иногда, даже демка не поможет (зависит от шаблона и скриптов внутри), установка 2 минуты, всегда следует ставить в начале на шаблон от движка, там корректней будет.
Что автор представил, то и было дано..
На каждый хак модуль демо делать, подсчитайте кол. новостей и т.д. это слишком сложно.
Хотя прежде, чем опубликовать все же убедился и проверил данный хак
  • № :11
  • 31 января 2013 03:05
(Демо версия от "Кот Баюн" - aqula ru) кривая.
Хоть-бы демку нормальную выложил ! belay
На приличных сайтах так принято вообще-то.
  • № :10
  • 31 января 2013 01:13
У меня 9,6 движок. И тоже не работает!
  • № :9
  • 2 сентября 2012 15:25
Не могу понять,вствляю ссылку на одну категорию,во вкладке просто ссылка.Как сделать что бы во вкладки были новости одной категории? Очень нужно,кто знает,подскажите?
  • № :8
  • 7 августа 2012 16:03
Можно хотя бы небольшой пример ? Куда, чего вставить. Что-то я не "догоняю". Заранее спасибо, кто поможет.
  • № :7
  • 14 апреля 2012 15:25
dle9,
Нет этот кусок стилей не отвечает за сам стиль кнопко вкладки мне кажется это где то в движке вписан потому что выризаю весь тег стилей вкладки с ехали а фон кнопок так и остался!!!
Вот как сча у меня выглядит вкладки

http://imgs.su/tmp/2012-04-14/1334402396-296.jpg

А я хочу сделать вкладки с фоном button кнопок что то типо вот таких!

http://imgs.su/tmp/2012-04-14/1334402698-296.jpg
  • № :6
  • 14 апреля 2012 12:31
zoOmer,
В этом месте в стилях больше похоже
    .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;
    }

И там в папке нет таких картинок измените в конце
tl_inactive_1_.gif на
tl_inactive.gif
  • № :5
  • 14 апреля 2012 12:21
Скажите где можно изменить вид оформления вкладок???
Тобишь мне нужно чтоб было не срезаным на касую а просто сделать кнопки владок как button кнопки!
  • № :4
  • 21 января 2012 00:00
Можно посматреть как получилось если зайти в любую новость на сайте vulete ru блок комментариев (Дмитрий)
  • № :3
  • 20 января 2012 22:38
я убрал оформление таба полностью. сделал когда таб активные то он в рамке ))) неплохо вышло
  • № :2
  • 20 января 2012 12:06
Дмитрий,
Совсем другое получится (сложно) , да и так легче получается (в плане кода и т.д.) ...лучше со шрифтом по экспериментировать, да с оформлением контуров табов (если хотите получить другое оформление )
  • № :1
  • 20 января 2012 11:32
Отличная новость. Очень помогло. Сделал чтобы можно выбирать через что комментировать новость! Есть только один вопрос. Можно вместо названий табов использовать картинки и как?