Перейти к содержанию

(CSN) Spoiler v2.1


Myz_mi

Рекомендуемые сообщения

index.php?app=downloads&module=display&s

Название: (CSN) Spoiler v2.1

Добавил: Myz_mi

Добавлен: 23 Mar 2012

Категория: ББКоды IP.Board 3.2.x

Специальный спойлер, созданный на основе стандартного спойлера от IP.Board 3.2.x

Открыть /public/js/ipb.js

Найти:


ipb.delegate.register('.bbc_spoiler_show', ipb.global.toggleSpoiler);

Заменить на :

ipb.delegate.register('.bbc_csnSpoiler_show', ipb.global.toggleCSNSpoiler);

Найти:

/* ------------------------------ */

	 /**

		* Toggle spoiler

		*

		* @param	 {event}		 e			 The event

	 */

	 toggleSpoiler: function(e, button)

	 {

			 Event.stop(e);


			 var returnvalue = $(button).up().down('.bbc_spoiler_wrapper').down('.bbc_spoiler_content').toggle();


			 if( returnvalue.visible() )

			 {

					 $(button).value = ipb.lang['spoiler_hide'];

			 }

			 else

			 {

					 $(button).value = ipb.lang['spoiler_show'];

			 }

	 },

Заменить:

/* ------------------------------ */

		/**

		 * Toggle CSN Spoiler

		 *

		 * @param	 {event}		 e			 The event

		*/

		toggleCSNSpoiler: function(e, button)

		{

				Event.stop(e);


				var returnvalue = $(button).up().up().down('.bbc_csnSpoiler_wrapper').down('.bbc_csnSpoiler_content').toggle();


				if( returnvalue.visible() )

				{

						$(button).addClassName('bbc_csnSpoiler_minus').removeClassName('bbc_csnSpoiler_plus');

				}

				else

				{

						$(button).addClassName('bbc_csnSpoiler_plus').removeClassName('bbc_csnSpoiler_minus');

			 }

	 },	

В CSS стиля добавить:

.bbc_csnSpoiler{}

.bbc_csnSpoiler_button{background-color:#ddd;border:1px solid #aaa;border-left:2px solid #aaa;}

.bbc_csnSpoiler_show{background-color:#ddd;background-repeat:no-repeat;background-position:0 50%;border:0;text-align:left;width:100%;padding-left:12px;}

.bbc_csnSpoiler_minus{background-image: url(__ipbmafia.ru/public/style_images/mafia_board/bullet_toggle_minus.png);}

.bbc_csnSpoiler_plus{background-image: url(__ipbmafia.ru/public/style_images/mafia_board/bullet_toggle_plus.png);}

.bbc_csnSpoiler_wrapper{}

.bbc_csnSpoiler_content{border:1px solid #aaa;border-top:0;border-left:2px solid #aaa;padding:5px;}

Далее идёт инструкция по добавлению BB-Кода. Вы можете её не выполнять, а просто скачать архив, распаковать его и импортировать XML-файл с BB-Кодом в Админцентре на странице BB-Кодов.

Авторы кода: cyber-systems

Ссылка на комментарий
Поделиться на другие сайты

Авторы кода: cyber-systems

Myz_mi, спасибо!

Ссылка на комментарий
Поделиться на другие сайты

Авторы кода: cyber-systems

Myz_mi, спасибо!

Исправил

Ссылка на комментарий
Поделиться на другие сайты

Укажите пожалуйста автора кода , я просто не знал его

Можешь первый пост поправить, у тебя же есть права на редактирование собственных постов :).

__

А есть нормальный скриншот, а то у вас они обрезаются (ЭТО ОЧЕНЬ ПЛОХО!), ничего не разглядишь...?

Ссылка на комментарий
Поделиться на другие сайты

Можешь первый пост поправить, у тебя же есть права на редактирование собственных постов :).

__

А есть нормальный скриншот, а то у вас они обрезаются (ЭТО ОЧЕНЬ ПЛОХО!), ничего не разглядишь...?

Ссылка на комментарий
Поделиться на другие сайты

Однозначно вещь, а то этот огрызок порядком надоел, да и никогда не нравился!

Ссылка на комментарий
Поделиться на другие сайты

Благодарю!Будет время поставлю себе на форум :)

Ссылка на комментарий
Поделиться на другие сайты

  • 8 месяцев спустя...

У данного Spoiler есть не большой баг, при длинном тексте он не переносит на новую строку!

test.jpg

Изменено пользователем SMERTNIK_1
Ссылка на комментарий
Поделиться на другие сайты

В реальности такого не будет, такое слово не переносится, потому что оно цельное. Поставьте хоть один пробел и будет перенесено.

Ссылка на комментарий
Поделиться на другие сайты

А вить точно, чет я ступил! + это баг не bb кода, а стиля!

Ссылка на комментарий
Поделиться на другие сайты

  • 1 месяц спустя...

Здравствуйте.

 

Подскажите пожалуйста. Куда добавить это? Не совсем понял.

 

 

 

.bbc_csnSpoiler{} .bbc_csnSpoiler_button{background-color:#ddd;border:1px solid #aaa;border-left:2px solid #aaa;} .bbc_csnSpoiler_show{background-color:#ddd;background-repeat:no-repeat;background-position:0 50%;border:0;text-align:left;width:100%;padding-left:12px;} .bbc_csnSpoiler_minus{background-image: url();} .bbc_csnSpoiler_plus{background-image: url();} .bbc_csnSpoiler_wrapper{} .bbc_csnSpoiler_content{border:1px solid #aaa;border-top:0;border-left:2px solid #aaa;padding:5px;}
Изменено пользователем _Dark_
Ссылка на комментарий
Поделиться на другие сайты

sekretniy, в конец ipb_styles.css вашего стиля.

Ссылка на комментарий
Поделиться на другие сайты

Подскажите, пожалуйста, можно ли этот код внедрить на ipb 3.3.4 (если да, то как)? Или существует ли адаптированный вариант? Всегда прежде им пользовался, но после переезда на новый хостинг и установки последней на тот момент версии ipb обнаружил, что старый добрый спойлер отображается некорректно. Теперь вынужден пользоваться изменённым дефолтом, ибо рабочих аналогов для ipb 3.3.4 я не нашёл, да и для ipb 3.3.x тоже...

Ссылка на комментарий
Поделиться на другие сайты

Не актуально, нашёл рабочий вариант, не сочтите за рекламу, думаю, многим пригодится.

sib-life.com/topic/619-cpoiler-na-jquery-dlja-ipb-33x-i-vishe

Ссылка на комментарий
Поделиться на другие сайты

вроде бы и стандартный спойлер хорош, а в чём отличие? Добавление css? :bye2:

Ссылка на комментарий
Поделиться на другие сайты

Ну, по большому счёту, да. ) Ведь, согласитесь, гораздо приятнее смотреть на красивый и аккуратный спойлер, чем на это 'стандартное безобразие' (ИМХО). Ну и эффект плавного показа/сокрытия тоже неплох, хотя, может быть, это уже даже лишнее... )

 

spoiler.png

Ссылка на комментарий
Поделиться на другие сайты

  • 4 месяца спустя...
  • 2 месяца спустя...
  • 3 недели спустя...

Форум 3.4.5
Установил без ошибок, всё работает :)
 
Думаю изменить стиль CSS. Чтобы внешний вид окна (спрятавшего текст), был не с острыми углами (как по умолчанию), а с закругленными.
Вот такими:
 

как здесь (по краям закруглено)

И таким же широким, в стиле IP.Board 3.4.5
Подскажите, что и где в коде поменять?
 

.bbc_csnSpoiler{}
.bbc_csnSpoiler_button{background-color:#ddd;border:1px solid #aaa;border-left:2px solid #aaa;}
.bbc_csnSpoiler_show{background-color:#ddd;background-repeat:no-repeat;background-position:0 50%;border:0;text-align:left;width:100%;padding-left:12px;}
.bbc_csnSpoiler_minus{background-image: url(__ipbmafia.ru/public/style_images/mafia_board/bullet_toggle_minus.png);}
.bbc_csnSpoiler_plus{background-image: url(__ipbmafia.ru/public/style_images/mafia_board/bullet_toggle_plus.png);}
.bbc_csnSpoiler_wrapper{}
.bbc_csnSpoiler_content{border:1px solid #aaa;border-top:0;border-left:2px solid #aaa;padding:5px;}
Ссылка на комментарий
Поделиться на другие сайты

.bbc_csnSpoiler{border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;}

Ссылка на комментарий
Поделиться на другие сайты

.bbc_csnSpoiler{border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;}

 

Благодарю, помогло :)

 

Добавил к исходному коду:

 

.bbc_csnSpoiler{}
.bbc_csnSpoiler_button{background-color:#ddd;border:1px solid #aaa;border-left:2px solid #aaa; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; padding:5px;}
.bbc_csnSpoiler_show{background-color:#ddd;background-repeat:no-repeat;background-position:0 50%;border:0;text-align:left;width:100%;padding-left:12px; font-weight:bold;}
.bbc_csnSpoiler_minus{background-image: url(__static.rutracker.org/templates/default/images/icon_minus_1.gif);}
.bbc_csnSpoiler_plus{background-image: url(__static.rutracker.org/templates/default/images/icon_plus_1.gif);}
.bbc_csnSpoiler_wrapper{}
.bbc_csnSpoiler_content{border:1px solid #aaa;border-top:0;border-left:2px solid #aaa;padding:5px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;}

 

Дополнительно:

Уменьшил закруглённость с 6 на 3.

Расширил границы окна, добавив: padding:5px;

Выделил текст в окне, добавив: font-weight:bold;

Заменил иконку "-" и "+", на оригинальную с Rutracker.org

 

P.S.

 

Ещё один вопрос...

 

Необходимо при использовании этого спойлера, вводить заголовок скрытого текста.

Если не ввести, он не будет работать (у меня по мере крайней не работает).

Подскажите, что и где поменять, чтобы он работал?

Т.е. даже если поле "Введите заголовок скрытого текста", оставлять пустым.

Изменено пользователем Arkuda
Ссылка на комментарий
Поделиться на другие сайты

Хм... Уже не помню, какой там у меня код...
Вообщем, необходимо заменить 

value='{option}'

 на

value='Заголовок {option}'

Это костыль, согласен. :)

И поставить "использовать опцию" (или как то так) необязательной, если она стоит как обязательная. Не помню уже, чего там у ИПБ есть.

 

Вообщем, дело в том, что в 

value='<...>'

Должно что-то находится. В текущей версии спойлера в 

value='<...>'

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

 

Если я правильно понял проблему, то решение отписал. :)

Ссылка на комментарий
Поделиться на другие сайты

  • 1 месяц спустя...

А у меня стили не приминяются что-то.. Вроде и кеш чистил - нифига... И инспектор кода не показывает что есть какие либо стили у дивов

Ссылка на комментарий
Поделиться на другие сайты

А тебе он и не нужен.

У тебя же 3.4

Там уже есть подобный спойлер.

Ссылка на комментарий
Поделиться на другие сайты

Присоединяйтесь к обсуждению

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

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...