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

Как сделать несколько спойлеров в одну строку


     14.05.2012    Общие вопросы по вёрстке    4213

вопрос
У меня к вам такой вопрос: Как сделать несколько спойлеров в одну строку?
Например как тут:

Как сделать несколько спойлеров в одну строку

Ответил: Sander


Это не спойлеры, а табы.
Есть очень хороший скипт табов
Но в принципе можете использовать любой другой скрипт.

Комментарии пользователей (3)

Barsik
1 | 2

Barsik - 17 мая 2012 02:28 - Юзер

Еще один вариант... Когда-то где-то нарыл — не помню.
Поскольку в DLE уже реализованы табы (например, на их основе создана форма добавления новости через админпанель и т.д.), то в принципе подключение jQuery-скрипта к движку необязательно — tabs.js есть в системе изначально. Особенно если табы нужны время от времени, а не постоянно их использовать где только можно.

Для того чтобы на DLE сделать табы — не нужно абсолютно никаких телодвижений и установок. Просто когда надо их применить — вставляем в нужное место, например в новость, нижеприведенный код — подлиннее, зато ничего не надо подключать. Стилистика оформления правится прямо здесь же на свой вкус если есть необходимость.

<script type="text/javascript" src="engine/skins/tabs.js"></script>
<!-- К файлу скрипта желательно прописать абсолютный путь  через хттп -->
<div id="dle_tabView1">
<div class="dle_aTab" style="display:none;">
СОДЕРЖИМОЕ ПЕРВОЙ ВКЛАДКИ
</div>
<div class="dle_aTab" style="display:none;">
СОДЕРЖИМОЕ ВТОРОЙ ВКЛАДКИ
</div>
<div class="dle_aTab" style="display:none;">
СОДЕРЖИМОЕ ТРЕТЬЕЙ ВКЛАДКИ
</div>
<div class="dle_aTab" style="display:none;">
СОДЕРЖИМОЕ ЧЕТВЕРТОЙ ВКЛАДКИ
</div>
</div>
<script type="text/javascript">
initTabs('dle_tabView1',Array('НАЗВАНИЕ-1','НАЗВАНИЕ-2','НАЗВАНИЕ-3','НАЗВАНИЕ-4'),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>

wcw2007
8

88 | 42

wcw2007 - 27 августа 2012 12:34 - Юзер

display none это плохо

ПафНутиЙ
1064

3393 | 2433

ПафНутиЙ - 27 августа 2012 12:55 - Админ

text-indent: -9999px;
или
position: absolute;
top: -9999px;
left: -9999px;

как вариант. Но покажите пруф, где написано, что display:none; в табах плохо)

Каков вопрос - таков и ответ. Просто помните об этом.

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

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