Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях

Правила форума

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: j-p-g.net Видео фоторедактор Транслит

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

Предыдущая тема Следующая тема Перейти вниз

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

Сообщение автор Black_Soul в Сб 19 Мар - 16:27

Доброго времени суток)
Нашла любопытный скрипт, но вот реально ли оптимизировать его под forum2x2(движок bb2)?
При клике "контейнеры" с информацией плавно сменяют друг друга.
Вот некое подобие действия этого скрипта - http://s45.radikal.ru/i109/1103/16/35bb934369b8.gif


Последний раз редактировалось: Black_Soul (Чт 24 Мар - 11:38), всего редактировалось 1 раз(а)
avatar
Black_Soul
 

Женщина

Сообщения : 69
Возраст : 23
Регистрация : 2010-07-08
Благодарности : 13

Без предупреждений

http://path-of-destruction.forum2x2.ru/

Вернуться к началу Перейти вниз

Re: Контейнер с вкладками

Сообщение автор Dana Domirani в Сб 19 Мар - 16:46

Думаю, реально. Сейчас попробую сделать.



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript


avatar
Dana Domirani
Администратор
Администратор

Женщина

Сообщения : 22491
Возраст : 32
Регистрация : 2008-04-18
Благодарности : 9061

Без предупреждений

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Re: Контейнер с вкладками

Сообщение автор Dana Domirani в Сб 19 Мар - 17:51

Посмотрите такой вариант:

Подойдет? Текстовые кнопки можно заменить на графические.



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript


avatar
Dana Domirani
Администратор
Администратор

Женщина

Сообщения : 22491
Возраст : 32
Регистрация : 2008-04-18
Благодарности : 9061

Без предупреждений

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Re: Контейнер с вкладками

Сообщение автор Black_Soul в Вс 20 Мар - 6:10

Подойдет? Текстовые кнопки можно заменить на графические.

Это то, что нужно!
Вы нереальный мастер)
avatar
Black_Soul
 

Женщина

Сообщения : 69
Возраст : 23
Регистрация : 2010-07-08
Благодарности : 13

Без предупреждений

http://path-of-destruction.forum2x2.ru/

Вернуться к началу Перейти вниз

Re: Контейнер с вкладками

Сообщение автор Dana Domirani в Вс 20 Мар - 13:52

Устанавливается так.

1. В шаблон overall_header (Верхняя часть страницы) перед тегом </head> ставите скрипт:
Код:
<script type="text/javascript">
      $(function(){
               $("#pw2-button, #pw3-button, #pw4-button").css({
            opacity: 0.3
         });
                  $("#page-wrap div.button").click(function(){
                              $clicked = $(this);
                                        if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
                                    $clicked.animate({
                     opacity: 1,
                  }, 600 );
                  var idToLoad = $clicked.attr("id").split('-');
                  $("#nwcontent").find("div:visible").fadeOut("fast", function(){
                     $(this).parent().find("#"+idToLoad[0]).fadeIn();
                  })
               }
               $clicked.siblings(".button").animate({
                  opacity: 0.5,
               }, 600 );
            });
      });
</script>

2. После тега <div id="page-body"> ставите код, формирующий кнопки и блоки с содержимым:
Код:
<div id="page-wrap">

   <div id="pw1-button" class="button">
   Первый
   </div>

   <div id="pw2-button" class="button">
   Второй
   </div>

   <div id="pw3-button" class="button">
   Третий
   </div>

   <div id="pw4-button" class="button">
   Четвертый
   </div>

<div class="clear"></div>

<div id="nwcontent">

   <div id="pw1">
   Описание раздела "Первый"
   </div>

   <div id="pw2">
   Описание раздела "Второй"
   </div>

   <div id="pw3">
   Описание раздела "Третий"
   </div>

   <div id="pw4">
   Описание раздела "Четвертый"
   </div>

</div>

</div>

Каждой кнопке -
<div id="pw1-button" class="button">
Первый
</div>
соответствует блок с содержимым -
<div id="pw1">
Описание раздела "Первый"
</div>
Впишите нужную информацию. После этого сохраните и опубликуйте шаблон.

3. В CSS добавьте стили для каждого элемента:
Код:
.clear {
clear: both;
}

#page-wrap {
margin-bottom: 20px;
}

.button {
float: left;
cursor: pointer;
}

/* оформление всего блока с содержимым */
#nwcontent {
background-color: #F5FFFA;
border: 2px solid #d4d6d5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
margin-top: 5px;
}

/* первый активный блок */
#pw1 {
display: block;
}

/* первая активная кнопка */
#pw1-button {
opacity: 1.0;
}

/* все скрытые блоки после первого */
#pw2, #pw3, #pw4 {
display: none;
}

/* все неактивные кнопки после первой */
#pw2-button, #pw3-button, #pw4-button {
opacity: 0.5;
}

/* общее оформление всех блоков */
#pw1, #pw2, #pw3, #pw4 {
padding: 10px;
}

/* общее оформление всех кнопок */
#pw1-button, #pw2-button, #pw3-button, #pw4-button {
padding: 5px 10px;
margin: 10px 10px 0 0;
background-color: #F4F4F4;
border: 2px solid #d4d6d5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript


avatar
Dana Domirani
Администратор
Администратор

Женщина

Сообщения : 22491
Возраст : 32
Регистрация : 2008-04-18
Благодарности : 9061

Без предупреждений

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Re: Контейнер с вкладками

Сообщение автор Dana Domirani в Вс 20 Мар - 14:14

1. Как заменить текстовые кнопки на графические?

В кодах к каждой кнопке
Код:
<div id="pw1-button" class="button">
Первый
</div>
вместо надписи поставьте код изображения
Код:
<div id="pw1-button" class="button">
<img src="http://i68.servimg.com/u/f68/16/08/40/28/dfg610.png" alt="Первый" title="Первый" />
</div>
http://i68.servimg.com/u/f68/16/08/40/28/dfg610.png - замените на вашу кнопку и сохраните + опубликуйте шаблон.

А в CSS удалите настройки внутреннего отступа, фона и контура для общего оформления всех кнопок, т.е. оставляете только:
Код:
/* общее оформление всех кнопок */
#pw1-button, #pw2-button, #pw3-button, #pw4-button {
margin: 10px 10px 0 0;
}

2. Как добавить еще кнопку и вкладку с содержимым?

Добавляете в код после всех кнопок / блоков еще по элементу, задаете им соответствующие id:
<div id="page-wrap">
<div id="pw1-button" class="button">
Первый
</div>
<div id="pw2-button" class="button">
Второй
</div>
<div id="pw3-button" class="button">
Третий
</div>
<div id="pw4-button" class="button">
Четвертый
</div>

<div id="pw5-button" class="button">
Пятый
</div>


<div class="clear"></div>
<div id="nwcontent">
<div id="pw1">
Описание раздела "Первый"
</div>
<div id="pw2">
Описание раздела "Второй"
</div>
<div id="pw3">
Описание раздела "Третий"
</div>
<div id="pw4">
Описание раздела "Четвертый"
</div>

<div id="pw5">
Описание раздела "Пятый"
</div>


</div>
</div>

В скрипте через запятую добавляете новую кнопку (кнопки) в уже существующую строку:
$("#pw2-button, #pw3-button, #pw4-button, #pw5-button").css({
и сохраняете + публикуете шаблон.


3. Возможно это сделать на BB3 / IPB (без доступа к шаблонам)?

Да. В таком случае в виджет на главной странице (и портале) ставится слегка измененный скрипт. После него добавляется основной код самого блока с кнопками. Настройки стилей добавляются в персональную CSS.

Вариант скрипта для BB3

Код:
<script type="text/javascript">
          jQuery(function(){
                  jQuery("#pw2-button, #pw3-button, #pw4-button").css({
                opacity: 0.3
            });
                      jQuery("#page-wrap div.button").click(function(){
                                jQueryclicked = jQuery(this);
                                            if (jQueryclicked.css("opacity") != "1" && jQueryclicked.is(":not(animated)")) {
                                        jQueryclicked.animate({
                        opacity: 1,
                      }, 600 );
                      var idToLoad = jQueryclicked.attr("id").split('-');
                      jQuery("#nwcontent").find("div:visible").fadeOut("fast", function(){
                        jQuery(this).parent().find("#"+idToLoad[0]).fadeIn();
                      })
                  }
                  jQueryclicked.siblings(".button").animate({
                      opacity: 0.5,
                  }, 600 );
                });
jQuery('div#page-wrap').insertAfter(jQuery('#page-header'));
          });
</script>

Вариант скрипта для IPB

Код:
<script type="text/javascript">
          jQuery(function(){
                  jQuery("#pw2-button, #pw3-button, #pw4-button").css({
                opacity: 0.3
            });
                      jQuery("#page-wrap div.button").click(function(){
                                jQueryclicked = jQuery(this);
                                            if (jQueryclicked.css("opacity") != "1" && jQueryclicked.is(":not(animated)")) {
                                        jQueryclicked.animate({
                        opacity: 1,
                      }, 600 );
                      var idToLoad = jQueryclicked.attr("id").split('-');
                      jQuery("#nwcontent").find("div:visible").fadeOut("fast", function(){
                        jQuery(this).parent().find("#"+idToLoad[0]).fadeIn();
                      })
                  }
                  jQueryclicked.siblings(".button").animate({
                      opacity: 0.5,
                  }, 600 );
                });
jQuery('div#page-wrap').insertAfter(jQuery('#userlinks'));
          });
</script>



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript


avatar
Dana Domirani
Администратор
Администратор

Женщина

Сообщения : 22491
Возраст : 32
Регистрация : 2008-04-18
Благодарности : 9061

Без предупреждений

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Re: Контейнер с вкладками

Сообщение автор Black_Soul в Пн 21 Мар - 10:51

Спасибо большое)
avatar
Black_Soul
 

Женщина

Сообщения : 69
Возраст : 23
Регистрация : 2010-07-08
Благодарности : 13

Без предупреждений

http://path-of-destruction.forum2x2.ru/

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения