Важная информация!
Правила форума
для обязательного прочтения!
Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
(забыл / потерял пароль)
Общий FAQ по управлению форумом
FAQ: реклама на форуме
Туториалы по разным функциям ваших форумов
Алфавитный указатель
Интересные решения для форумов
Наши видео-туториалы
Условия пользования сервисом
Ссылки на полезные ресурсы
Последние темы
» Интернет адрес форумаавтор Mierena Вчера в 15:24
» некоторые форумы долго загружаются
автор Raumt Сентябрь 6th 2024, 15:06
» На форуме Пропали кнопки модерации тем
автор лексей2222 Август 16th 2024, 22:36
» совет админам
автор лексей2222 Август 14th 2024, 08:34
» Проблема с метатегом Description
автор VeraLV Июнь 14th 2024, 17:06
» [решено] Исчезли картинки кнопок
автор VeraLV Май 26th 2024, 13:04
» Как убрать подпись о редактировании записи
автор Фея Май 9th 2024, 21:11
» Пакеты Forum 2x2
автор Dana Domirani Май 6th 2024, 14:11
» Как поменять вид нумерации страниц тем?
автор Goodmonday Апрель 18th 2024, 21:04
» Форум не корректно загружается.
автор anna4842 Апрель 12th 2024, 23:48
Контейнер с вкладками
Участников: 2
Бесплатный форум: форум поддержки :: Взаимопомощь и Поддержка :: Проблемы со скриптами (кодами) :: [Архив] Проблемы со скриптами
Страница 1 из 1
Контейнер с вкладками
Доброго времени суток)
Нашла любопытный скрипт, но вот реально ли оптимизировать его под forum2x2(движок bb2)?
При клике "контейнеры" с информацией плавно сменяют друг друга.
Вот некое подобие действия этого скрипта - http://s45.radikal.ru/i109/1103/16/35bb934369b8.gif
Нашла любопытный скрипт, но вот реально ли оптимизировать его под forum2x2(движок bb2)?
При клике "контейнеры" с информацией плавно сменяют друг друга.
Вот некое подобие действия этого скрипта - http://s45.radikal.ru/i109/1103/16/35bb934369b8.gif
Последний раз редактировалось: Black_Soul (Март 24th 2011, 11:38), всего редактировалось 1 раз(а)
Re: Контейнер с вкладками
Думаю, реально. Сейчас попробую сделать.
![Контейнер с вкладками Userba12](https://i.servimg.com/u/f37/11/71/42/99/userba12.png)
Где находится CSS? Па > Оформление > Цвета > Каскадная таблица стилей CSS Где искать основные шаблоны? ПА > Оформление > Шаблоны > Общие настройки Где находится раздел для подключения скриптов ПА > Модули > Управление кодами Javascript |
Re: Контейнер с вкладками
Посмотрите такой вариант:
Подойдет? Текстовые кнопки можно заменить на графические.
Подойдет? Текстовые кнопки можно заменить на графические.
![Контейнер с вкладками Userba12](https://i.servimg.com/u/f37/11/71/42/99/userba12.png)
Где находится CSS? Па > Оформление > Цвета > Каскадная таблица стилей CSS Где искать основные шаблоны? ПА > Оформление > Шаблоны > Общие настройки Где находится раздел для подключения скриптов ПА > Модули > Управление кодами Javascript |
Re: Контейнер с вкладками
Подойдет? Текстовые кнопки можно заменить на графические.
Это то, что нужно!
Вы нереальный мастер)
Re: Контейнер с вкладками
Устанавливается так.
1. В шаблон overall_header (Верхняя часть страницы) перед тегом </head> ставите скрипт:
2. После тега <div id="page-body"> ставите код, формирующий кнопки и блоки с содержимым:
Каждой кнопке -
3. В CSS добавьте стили для каждого элемента:
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](https://i.servimg.com/u/f37/11/71/42/99/userba12.png)
Где находится CSS? Па > Оформление > Цвета > Каскадная таблица стилей CSS Где искать основные шаблоны? ПА > Оформление > Шаблоны > Общие настройки Где находится раздел для подключения скриптов ПА > Модули > Управление кодами Javascript |
Re: Контейнер с вкладками
1. Как заменить текстовые кнопки на графические?
В кодах к каждой кнопке
А в CSS удалите настройки внутреннего отступа, фона и контура для общего оформления всех кнопок, т.е. оставляете только:
2. Как добавить еще кнопку и вкладку с содержимым?
Добавляете в код после всех кнопок / блоков еще по элементу, задаете им соответствующие id:
В скрипте через запятую добавляете новую кнопку (кнопки) в уже существующую строку:
3. Возможно это сделать на BB3 / IPB (без доступа к шаблонам)?
Да. В таком случае в виджет на главной странице (и портале) ставится слегка измененный скрипт. После него добавляется основной код самого блока с кнопками. Настройки стилей добавляются в персональную CSS.
Вариант скрипта для BB3
![Контейнер с вкладками 677621](http://savepic.net/677621.jpg)
Вариант скрипта для IPB
![Контейнер с вкладками 684790](http://savepic.net/684790.jpg)
В кодах к каждой кнопке
- Код:
<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>
А в 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](http://savepic.net/677621.jpg)
- Код:
<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](http://savepic.net/684790.jpg)
- Код:
<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](https://i.servimg.com/u/f37/11/71/42/99/userba12.png)
Где находится CSS? Па > Оформление > Цвета > Каскадная таблица стилей CSS Где искать основные шаблоны? ПА > Оформление > Шаблоны > Общие настройки Где находится раздел для подключения скриптов ПА > Модули > Управление кодами Javascript |
![-](https://illiweb.com/empty.gif)
» Как сделать на форуме такой контейнер с вкладками.
» Как сделать контейнер для различных материалов и кодов ?
» Хочу контейнер как тут.
» Как поместить копирайты сервиса в контейнер ?
» Как поместить заголовки и описания в контейнер ?
» Как сделать контейнер для различных материалов и кодов ?
» Хочу контейнер как тут.
» Как поместить копирайты сервиса в контейнер ?
» Как поместить заголовки и описания в контейнер ?
Бесплатный форум: форум поддержки :: Взаимопомощь и Поддержка :: Проблемы со скриптами (кодами) :: [Архив] Проблемы со скриптами
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения