Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Общие вопросы по вёрстке Переключатель такой как в шаблоне Default?

Переключатель такой как в шаблоне Default?


     24.03.2014    Общие вопросы по вёрстке    1380

вопрос
Как реализовать переключатель такой как в шаблоне Default в левой колонке где архив?
пытался выцарапать оттуда же, выходит криво, может есть готовые решения?

Переключатель такой как в шаблоне Default?

Ответил: tullius


Вставить в
<script type="text/javascript" src="engine/skins/tabs.js"></script>


В нужном месте вставить стили и настройки табов:
<div id="dle_tabView1">
<div class="dle_aTab">
1
</div>
<div class="dle_aTab">
2
</div>
<div class="dle_aTab">
3
</div>
<div class="dle_aTab">
Сюды вставляем ваш 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)

tullius
1

21 | 1

tullius - 24 марта 2014 22:58 - Юзер

Вставить в
<head>

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы