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

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

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

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

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

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

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

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

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

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>

https://i.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>

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