Форум поддержки пользователей ZeroParking

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

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

Окошко-контейнер.

Страница: 1

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

1

  • Автор: Beatrice
  • Форумчанин
  • Beatrice
  • Зарегистрирован: 2011-02-14
  • Приглашений: 0
  • Сообщений: 48
  • Уважение: 0
  • Позитив: +13
  • Провел на форуме:
    16 часов 51 минуту
  • Последний визит:
    2013-01-24 20:28:14

Подскажите, как поставить вот такую красоту http://eclipsegame.rusff.me/ , чтобы щелкать сбоку - инфа меняется, а окошко по сути сидит на лого)

0

2

  • Автор: Ви
  • Может и модератор
  • Ви
  • Зарегистрирован: 2008-12-29
  • Приглашений: 0
  • Сообщений: 2220
  • Уважение: +253
  • Позитив: +31
  • Пол: Женский
  • Возраст: 30 [1994-11-23]
  • Провел на форуме:
    1 месяц 4 дня
  • Последний визит:
    2012-08-16 18:17:18

Это обыкновенная таблица со вкладками, подогнана просто в формат шапки.

Источник: ForumD

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

Код:
<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>

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

Код:
<div class="container">
    <div class="html-box">

<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>
    </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;
    }

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

+1

3

  • Автор: Beatrice
  • Форумчанин
  • Beatrice
  • Зарегистрирован: 2011-02-14
  • Приглашений: 0
  • Сообщений: 48
  • Уважение: 0
  • Позитив: +13
  • Провел на форуме:
    16 часов 51 минуту
  • Последний визит:
    2013-01-24 20:28:14

Ви
огромное спасибо)
а не подскажете скрипт обычного информационного окошка в лого? поставлю пока его, ибо время поджимаеет)

0

4

  • Автор: Ви
  • Может и модератор
  • Ви
  • Зарегистрирован: 2008-12-29
  • Приглашений: 0
  • Сообщений: 2220
  • Уважение: +253
  • Позитив: +31
  • Пол: Женский
  • Возраст: 30 [1994-11-23]
  • Провел на форуме:
    1 месяц 4 дня
  • Последний визит:
    2012-08-16 18:17:18

Beatrice, если только вы уточните, что за информационное окошко)

0

5

  • Автор: Beatrice
  • Форумчанин
  • Beatrice
  • Зарегистрирован: 2011-02-14
  • Приглашений: 0
  • Сообщений: 48
  • Уважение: 0
  • Позитив: +13
  • Провел на форуме:
    16 часов 51 минуту
  • Последний визит:
    2013-01-24 20:28:14

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

0

6

  • Автор: Ви
  • Может и модератор
  • Ви
  • Зарегистрирован: 2008-12-29
  • Приглашений: 0
  • Сообщений: 2220
  • Уважение: +253
  • Позитив: +31
  • Пол: Женский
  • Возраст: 30 [1994-11-23]
  • Провел на форуме:
    1 месяц 4 дня
  • Последний визит:
    2012-08-16 18:17:18

http://colorforum.ru/ как тут?

0

7

  • Автор: Beatrice
  • Форумчанин
  • Beatrice
  • Зарегистрирован: 2011-02-14
  • Приглашений: 0
  • Сообщений: 48
  • Уважение: 0
  • Позитив: +13
  • Провел на форуме:
    16 часов 51 минуту
  • Последний визит:
    2013-01-24 20:28:14

Ви
точно)

0

8

  • Автор: Beatrice
  • Форумчанин
  • Beatrice
  • Зарегистрирован: 2011-02-14
  • Приглашений: 0
  • Сообщений: 48
  • Уважение: 0
  • Позитив: +13
  • Провел на форуме:
    16 часов 51 минуту
  • Последний визит:
    2013-01-24 20:28:14
Beatrice написал(а):

скрипт обычного информационного окошка в лого?

пожааалуйста  :flag:

0

Страница: 1

Рейтинг форумов | Создать форум бесплатно