8Dle
Авторизация

Табы (вкладки) на DLE

Кот Баюн 22-08-2011, 20:52 --- 3 комментария
Табы

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

Итак, берем свой или родной модуль и вставляем в него такой HTML:
<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>


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

Этот способ навигации отлично работает и выглядит симпатично. Можете убедиться на примере моего Проекта
Успехов в разрабоке!

Жмите на Кнопу ниже, или подписывайтесь!


Читайте также
  1. Mr. Hyde
    24 августа 2011 20:15
    сильно тяжелый js... я против fellow
  2. netwolf
    30 декабря 2011 10:15
    Ура работает!. Отличный способ! winked tongue

    я установил в fullstory.tpl, хотел зделать, чтобы в каждой новости в о вкладках была разная инфа из этой новости..
    Помогите реализовать, чтобы можно было при создание новости добавлять инфу во вкладки.
    Типа у меня есть 4 вкладки "Инфа" "Новость" "Картинки" "Видео".
    Как вывести скрипт чтобы в каждой новости была своя инфа во вкладках.
  3. semen74
    7 августа 2012 15:51
    Что у кого отлично работает ?
    А где сам-то tabs.js ?
    Исходника кроме css нет

    Прошу пардона.
    Есть он в модулях.
    Можно хотя бы небольшой пример ? Куда, чего вставить. Что-то я не "догоняю". Заранее спасибо, кто поможет.
  4. coka1n
    2 сентября 2012 15:15
    Не понимаю,хочу что бы например в новости выводилась отдельная категория,Что вставлять за место "Сюды вставляем ваш html код страницы вкладки"?
    http://vkino24.ru
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.


Dle это движок который изначально проектировался для создания новостных сайтов, но по мере своего развития движка значительно расширил свою функциональность и стал универсальным средством разработки и сопровождения сайтов и блогов различной направленности и тематики. По сравнению с другими бесплатными (и некоторыми платными) CMS системами движок dle обладает довольно обширными возможности.

Авторизация