ForumD.ru - Дизайн для форумов и техническая поддержка

Объявление

Акция! Дизайн «MyBB Technical Support»

Дизайн для форума MyBB в тематике компьютерных сообществ или технической поддержки
Стоимость при покупке эксклюзивно: 2000р 1200р
Скидка 40%. В стоимость входит настройка и корректировка дизайна.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Дизайн для MyBB форума гильдии WoW Exodar

Детализированный rpg-дизайн для mybb форума гильдии в тематике Экзодара.
Стоимость: 2150р*
В стоимость входит настройка и корректировка дизайна.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Финансовая помощьРеклама на сайте
Стать модераторомОтзывы

Предложения

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » ForumD.ru - Дизайн для форумов и техническая поддержка » Javascript, Jquery и CSS решения » Контейнер с вкладками для информации


Контейнер с вкладками для информации

Сообщений 1 страница 10 из 226

1

Копируете/размещаете информацию из этой статьи? ПОЖАЛУЙСТА!!! СТАВЬТЕ ССЫЛКУ НА ЭТУ СТРАНИЦУ!!!

Скрипт поможет вам существенно сэкономить место в объявлении! :)
Но применять, конечно можно где угодно, куда можно вписать html

Скриншот
http://forumd.ru/uploads/0007/e3/f7/60037-2-f.jpg

В низ вставляем скрипт, позволяющий переключаться между вкладками:

Код:
<script type="text/javascript">
  $(document).ready(function(){
    $('.splLink').click(function(){
      $(this).parent().children('div.splCont').toggle('normal');
      return false;
    });
  });
</script>
<script type="text/javascript">

$(document).ready(function() {


	$(".tab_content").hide(); 
	$("ul.tabs li:first").addClass("active").show();
	$(".tab_content:first").show();
	
	$("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab_content").hide();
    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn();
    return false;
	});

});

</script>

В вверх вставляем css-код, который позволит вам настроить стиль контейнеров

Код:
<style>
.container1 {width: 900px; margin: 0 auto; padding: 0;}
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 40px;
    width: 467px;
    width: 100%;
}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 40px;
    line-height: 40px;
    border: 0px;
border-top: 1px dotted #000000;
    border-bottom: 1px dotted #000000;
        border-right: 1px dotted #000000;
        border-left: 1px dotted #000000;
    margin-bottom: -2px;
    background: url();
    overflow: hidden;
    position: relative;
}

ul.tabs li a {
    text-decoration: none;
    color: transparent;
    display: block;
    padding: 0 5px;
    background: url();
    outline: none;
}

ul.tabs li a:hover {
       background: url();
    border-bottom: 0px solid #000000;
        border-top: 0px solid #000000;    
        border-left: 0px solid #000000;    
        border-right: 0px solid #000000;  
}    

html ul.tabs li.active  {
    background: url();    
    border-bottom: 0px solid #000000;
        border-top: 0px solid #000000;    
        border-left: 0px solid #000000;    
        border-right: 0px solid #000000;   
}  

html ul.tabs li.active a:hover  {
        background: url();
    border-bottom: 0px solid #160f0a;
}

.tab_container1 {
    clear: both;
    float: left; 
    width: 900px;
    height: 343px;
    background-image : url();   
background-color: #FFFFFF;  
    border-bottom: 1px solid #000000;
        border-top: 0px solid #000000;    
        border-left: 0px solid #000000;    
        border-right: 0px solid #000000;  

    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
}

.tab_content {
    padding: 5px;
}

.tab_content h2 {
    font-weight: normal;
    padding-bottom: 2px;
    border-bottom: 0px dashed #000000;
}
</style>

а вот это надо ставить туда, где у вас будет контейнер:

Код:
<ul class="tabs">
    <li class="active"><a href="#tab1">Вкладка 1</a></li>
    <li><a href="#tab2">Вкладка 2</a></li>
    <li><a href="#tab3">Вкладка 3</a></li>
</ul>

      <div class="tab_container1">

<div style="display: block;" id="tab1" class="tab_content">
текст 1
</div>

<div style="display: none;" id="tab2" class="tab_content">
текст 2
</div>

<div style="display: none;" id="tab3" class="tab_content"> 
текст 3
</div>

      </div>

Настройка

Создание вкладок

Вкладки создаются в этом куске:

<ul class="tabs">
    <li class="active"><a href="#tab1">Вкладка 1</a></li>
    <li><a href="#tab2">Вкладка 2</a></li>
    <li><a href="#tab3">Вкладка 3</a></li>
</ul>

чтобы добавить вкладку нужно дублировать строчку:

<li><a href="#tab2">Вкладка 2</a></li>

отображаться вкладки будут в том порядке, в котором вы их впишете.
Зеленое нужно вписать в ту вкладку, которая будет по умолчанию открыта.
Краснная цифра - это номер вкладки. Нужно обязательно ставить.
Синее - это название вкладки.

Создание содержимого вкладки

Вкладки создаются в таких контейнерах

<div style="display: block;" id="tab1" class="tab_content">
текст 1
</div>

красное - это номер вкладки. он должен соответствовать тому, который вы вписали в список вкладок (см. пункт "Создание вкладок")
такие контейнеры могут идти в любом порядке, который вам удобен, т.к. отображаться они будут при клике.

Стилизация

Берем код, который вставляется в html-верх и редактируем

.container1 {width: 900px; margin: 0 auto; padding: 0;}

Это стиль контейнера, который содержит вкладки и содержимое вкладок.
На месте красной цифры укажите ширину в пикселях.

ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 40px;
    width: 467px;
    width: 100%;

}

Это стиль всего списка вкладок.
Красное - это расположение: left - слева; right - справа.
Синее - это высота в пикселях
Зеленое - это ширина. Либо оставьте сточку в пикселях, либо в процентах в зависимости от ваших предпочтений

ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 40px;
    line-height: 40px;
    border: 0px;
border-top: 1px dotted #000000;
    border-bottom: 1px dotted #000000;
        border-right: 1px dotted #000000;
        border-left: 1px dotted #000000;

    margin-bottom: -2px;
    background: #000000 url();
    overflow: hidden;
    position: relative;
}

Это стиль названий вкладок
Красное - это расположение: left - слева; right - справа; center - по центру.
Синее - это высота в пикселях
Зеленый кусок - это границы. ниже написано как их настраивать.
Розовое - фон.
можно вписать цвет здесь: #000000
или всписать ссылку на картинку: background: url(http://картинко);

Как настраиваются границы
если вы хотите чтобы границы вокруг названий вкладок были стандартные сделайте так:

ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 40px;
    line-height: 40px;
    border: 1px;
    margin-bottom: -2px;
    background: url();
    overflow: hidden;
    position: relative;
}

Если вы хотите настроить их, экперементируйте:

border-bottom: 1px dotted #000000;

border-top - верхняя граница
border-bottom - нижняя  граница
border-right - правая граница
border-left -  левая граница

красное - толщина границы в пикселях. не хотите, чтобы она отображалась? поставьте нолик
синее - это стиль границ: dotted - точками, dashed - пунктиром, solid - линия, double - двойная линия, groove - вогнутая, ridge - выпуклая
зеленое - это цвет границ

ul.tabs li a:hover {
...
}

Это стиль списка при наведении курсора.
настраивается так же, как и выше

html ul.tabs li.active  {
....
}

Это стиль активной (открытой) вкладки
настраивается так же, как и выше

html ul.tabs li.active a:hover  {
....
}

Это стиль активной (открытой) вкладки при наведении курсора
настраивается так же, как и выше

.tab_container1 {
    clear: both;
    float: left;
    width: 900px;
    height: 343px;
    background-image : url();   
background-color: #FFFFFF; 
    border-bottom: 1px solid #000000;
        border-top: 0px solid #000000;   
        border-left: 0px solid #000000;   
        border-right: 0px solid #000000; 

    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;

}

Это стиль контейнера с содержимым
Красное делает границы закругленными.
Жирная цифра влияет на "закругление", чем больше цифра - тем более округлые границы.
Остальное настраивается так же .

.tab_content {
    padding: 5px;
}

.tab_content h2 {
    font-weight: normal;
    padding-bottom: 2px;
    border-bottom: 0px dashed #000000;
}

Это стиль самого содержимого
красное - отступ от границ в пикселях.

Отредактировано Герда (20.05.2013 07:22:34)

+10

2

Простите меня, что внедрилась сюда, но маааленькая поправочка, первый код вверх, а нижний код вниз, тогда всё получится :)

+1

3

Tusich

Tusich написал(а):

первый код вверх, а нижний код вниз

http://i.smiles2k.net/aiwan_smiles/shok.gif
серьезно?
и у тебя так работает?

а если наобарот - не пашет?

у меня стоит именно в указанной в описании последовательности, потому как обычно css ставят в верх, а js в низ...

0

4

Герда написал(а):

http://i.smiles2k.net/aiwan_smiles/shok.gif
серьезно?
и у тебя так работает?

а если наобарот - не пашет?

у меня стоит именно в указанной в описании последовательности, потому как обычно css ставят в верх, а js в низ...

именно!!!
ЗАМЕТКА ТАК, НА ВСЯКИЙ СЛУЧАЙ (во всяком случае как у меня отображается)!!! Ставите как Герда написала, кнопки делаются столбцом либо слева, либо справа, сверху, снизу не сделать, а когда наоборот, т.е. верхний код вверх, а нижний код вниз, то кнопки исключительно сверху и делать их можно либо слевого боку, либо справого, либо посередине.

Кстати, админы! помню сегодня днём у меня стояли 6 баллов, где...они....?

0

5

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

0

6

ensi

.tab_container1 {
    clear: both;
    float: left;
    width: 1000px;
    height: 343px;
    background-image : url();

красным отмечена ошибка, сделайте, например меньше, 900px

0

7

не могу отредактировать, в общем, видите width: 1000px;
заменяйте на 900px

+1

8

Tusich
Большое спасибо. +1

0

9

ensi
не за что  :cool:

0

10

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

0

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляйте ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удалите символы: "http://", "https://" или "www."


Вы здесь » ForumD.ru - Дизайн для форумов и техническая поддержка » Javascript, Jquery и CSS решения » Контейнер с вкладками для информации