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

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

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

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

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

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

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

Я админ, не могу зайти!
(забыл / потерял пароль)


Общий FAQ по управлению форумом

FAQ: реклама на форуме

Туториалы по разным функциям ваших форумов

Алфавитный указатель

Интересные решения для форумов

Наши видео-туториалы

Условия пользования сервисом

Ссылки на полезные ресурсы

Последние темы
» Аварийные инструменты
автор Luz Ноябрь 18th 2019, 11:40

» Новый владелец сайта, которого не назначали
автор LanaCF Ноябрь 18th 2019, 10:24

» Медленное соединение после перехода на https
автор Премьера Ноябрь 16th 2019, 22:40

» Массовое ЛС стало недоступным для отправки группе "Пользователи"
автор Dana Domirani Ноябрь 15th 2019, 16:52

» Topic'it: конец приключения...
автор Luz Ноябрь 14th 2019, 13:20

» Что такое PWA-приложение форума?
автор IceQueen Ноябрь 11th 2019, 20:21

» проблемы входа из Google Chrome
автор Fate Ноябрь 10th 2019, 10:02

» Дисковое пространство
автор Dana Domirani Ноябрь 8th 2019, 18:05

» Смайлики в быстром ответе
автор irina27 Ноябрь 5th 2019, 21:29

» Некорректно работает форум.
автор irina27 Ноябрь 4th 2019, 15:19

RSS-каналы


Yahoo! 
MSN 
AOL 
Netvibes 
Bloglines 


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

Перейти вниз

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

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

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


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

Женщина

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

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

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

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

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

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

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


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

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


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


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


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

Женщина

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

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

http://poltergeist-legacy.com/

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

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

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

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

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


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

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


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


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


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

Женщина

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

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

http://poltergeist-legacy.com/

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

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

Сообщение автор Black_Soul в Март 20th 2011, 06:10

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

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

Женщина

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

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

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

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

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

Сообщение автор Dana Domirani в Март 20th 2011, 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;
}


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

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


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


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


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

Женщина

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

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

http://poltergeist-legacy.com/

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

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

Сообщение автор Dana Domirani в Март 20th 2011, 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>
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
Контейнер с вкладками 677621
Код:
<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
Контейнер с вкладками 684790
Код:
<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>


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

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


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


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


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

Женщина

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

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

http://poltergeist-legacy.com/

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

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

Сообщение автор Black_Soul в Март 21st 2011, 10:51

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

Женщина

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

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

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

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

Вернуться к началу


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