Создание ББ кода

[FatCat]

Я могу сделать так, как нарисовано в скриншоте, на своем форуме; но мне это не нужно.

Давай неспешно попробуем. Начни с чего-нибудь; как только что-то не получается - описываешь проблему: что хотел, что делал, что получилось, и что не устраивает в получившемся.

 

Пока мысли на бегу:

Если в приведенном мной коде не устраивает в основном растяжка блока <div> на всю ширину страницы - это не очень большая проблема. Сделай <div> внутри таблицы, не прописывая ширину таблицы, и таблица "ужмет" <div> на ширину строки текста.

 

Если нужен плюсик и минусик перед спойлером, залезь-таки на торрентс-ру; у них как-то это сделано и работает через css. Если не получится сразу разобраться (я с налету не понял), сохрани страницу на винт и проверяй когда исчезнет плюсик, последовательно удаляя по одному описанию в стилях. Когда найдешь стилевой элемент, при удалении описания которого плюсик исчезнет - это описание тебе и нужно, изучай его.

 

Если все же так хочется сделать скрипт через конструкцию id_uniqvalue.innerHTML - обоснуй. Сложностей там предвидится много. Если только ради плюсика и минусика - я думаю, эффект можно получить более простым способом.

[FatCat]

Вот, http://slil.ru/25003251 , глянь. Может это как раз то, что тебе нужно?

Это действующая моделька, но разобрать ее и причепить к форуму будет не очень сложно.

[DacentGS]

Я могу сделать так, как нарисовано в скриншоте, на своем форуме; но мне это не нужно.

Ну ладно тогда, что мне тогда вас мучать, можно думаю тогда темку прикрывать.

 

FatCat, спасибо тебе, ты с этой проблеммой единственный помогал, за что тебе огромнейшее спасибо! Оставлю всё как есть и фиг с ним...

[FatCat]

Модельку посмотри. Может это то, что нужно?

[Arhar]

FatCat, уже почти все сделал, может выложишь как мод?

Оч хороший спойлер получается

[DacentGS]

Модельку посмотри. Может это то, что нужно?

Посмотрел, сделано хорошо, просто не подходит потому что можно сказать "влюбился" в тот тег.

[FatCat]

FatCat, уже почти все сделал, может выложишь как мод?

Оч хороший спойлер получается

У меня сделано на 1.3, что наверное малоактуально.

Не хочешь сам сделать модом под "двушки"?

 

Тогда два дополнения, которые впрямую в этом топике не звучали:

 

1.

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

 

 

2.

Чтобы перед спойлером отображались пиктограммы "плюс/минус" или любые другие пары рисунков, нужно добавить в стили:

.folded, .folded2 { display: block;
background: transparent url(plus.gif) no-repeat left center; padding-left: 14px; }
.unfolded, .unfolded2 { display: block;
background: transparent url(minus.gif) no-repeat left center; padding-left: 14px; }

Гифки, соответственно, должны наличествовать.

[Sannis]

Разве для отсутствия растяжения не достаточно заменить div на span?

[DacentGS]

А Джаваскрипт?!!

[Sannis]

На спан нельзя повесить событие или изменить видимость?

[DacentGS]

Что в скрипте то прописывать?

[FatCat]

На спан нельзя повесить событие или изменить видимость?

style="dysplay:..." применимо только к блоковым объектам.

 

 

DacentGS

По ссылке Архара можно скачать скриптовой файл jQuery: http://code.google.com/p/jqueryjs/download...jquery-1.2.1.js . Его положить и прилинковать.

[Sannis]

На спан нельзя повесить событие или изменить видимость?

style="dysplay:..." применимо только к блоковым объектам.

Жаль

[DacentGS]

FatCat, а что это за скрипт, что он даёт то вообще?

 

Кстати, наконец удалось сделать то что я задумывал! В)) Только немножечко конечно ещё осталось доделать вашими ручками)))

Осталось сделать только что бы высвечивался плюс и минус!

Вот бб:

<table><a class="show_hide_button" onclick="show_hide_text(this,'{option}')">+</a> <span class="hidden_block_title">{option}</span><div onclick="show_hide_text(this,'{option}')"></div>

<div class="hidden_block" style="display: none">{content}</div></table>

 

 

Expand.js(но он уже его не читает, так как строчки див по идее уже как бы нету))

function show_hide_text(divObj,text) {

var div = divObj.parentNode.getElementsByTagName('div')[1];

if (div.style.display == 'none') {

div.style.display = 'block';

divObj.innerHTML = "<a class='show_hide_button'>-</a> <span class='hidden_block_title'>" + text;

} else {

div.style.display = 'none';

divObj.innerHTML = "<a class='show_hide_button'>+</a> <span class='hidden_block_title'>" + text;

}

}

 

Ну и как всегда ЦСС:

.show_hide_button { cursor: pointer; font-family: Courier New, Courier, Sans-Serif; border: 1px solid #888; background-color: #FFF; padding: 0 4px 0 4px; }

.show_hide_button:hover { background-color: #BCD0ED; }

.hidden_block_title { border-bottom: 1px dashed #888; padding: 0 0 1px 0; }

.hidden_block { margin-left: 8px; margin-top: 5px; }

.bottomborder { border-bottom: 1px dashed #D2D2D0 }

 

Сделайте милости прошу, вот уже финал практически, дело за малым, но главное что структура осталось той что сейчас, но что бы + и - внутри отображались.

[FatCat]

Осталось сделать только что бы высвечивался плюс и минус!

Осталось начать и кончить: написать работающий джаваскрипт.

 

Собрал из твоего кода модельку, она не работает.

Сам попробуй:

<html>
<head>
<style>
.show_hide_button { cursor: pointer; font-family: Courier New, Courier, Sans-Serif; border: 1px solid #888; background-color: #FFF; padding: 0 4px 0 4px; }
.show_hide_button:hover { background-color: #BCD0ED; }
.hidden_block_title { border-bottom: 1px dashed #888; padding: 0 0 1px 0; }
.hidden_block { margin-left: 8px; margin-top: 5px; }
.bottomborder { border-bottom: 1px dashed #D2D2D0 }
</style>
<script type="text/javascript">
function show_hide_text(divObj,text) {
var div = divObj.parentNode.getElementsByTagName('div')[1];
if (div.style.display == 'none') {
div.style.display = 'block';
divObj.innerHTML = "<a class='show_hide_button'>-</a> <span class='hidden_block_title'>" + text;
} else {
div.style.display = 'none';
divObj.innerHTML = "<a class='show_hide_button'>+</a> <span class='hidden_block_title'>" + text;
}
}
</script>
</head>
<body>
<table><a class="show_hide_button" onclick="show_hide_text(this,'{option}')">+</a> <span class="hidden_block_title">{option}</span><div onclick="show_hide_text(this,'{option}')"></div>
<div class="hidden_block" style="display: none">{content}</div></table>
</body>
</html>

[DacentGS]

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

 

<style>.show_hide_button { cursor: pointer; font-family: Courier New, Courier, Sans-Serif; border: 1px solid #888; background-color: #FFF; padding: 0 4px 0 4px; }
.show_hide_button:hover { background-color: #BCD0ED; }
.hidden_block_title { border-bottom: 1px dashed #888; padding: 0 0 1px 0; }
.hidden_block { margin-left: 8px; margin-top: 5px; }
.bottomborder { border-bottom: 1px dashed #D2D2D0 }</style>
<script type="text/javascript">
function show_hide_text(divObj,text) {
var div = divObj.parentNode.getElementsByTagName('div')[1];
if (div.style.display == 'none') {
	div.style.display = 'block';
	divObj.innerHTML = "<a class='show_hide_button'>-</a> <span class='hidden_block_title'>" + text;
} else {
	div.style.display = 'none';
	divObj.innerHTML = "<a class='show_hide_button'>+</a> <span class='hidden_block_title'>" + text;
}
}
</script>
<table>
<a class="show_hide_button" onclick="show_hide_text(this,'{option}')">+</a> <span class="hidden_block_title">{option}</span><div onclick="show_hide_text(this,'{option}')"></div>
<div class="hidden_block" style="display: none">{content}</div></table>

[FatCat]

http://img528.imageshack.us/img528/9752/11...uziru669dw0.gif

[DacentGS]

Это происходит из за этой строчки <div onclick="show_hide_text(this,'{option}')"></div>, но и убирать её тоже нельзя.

[FatCat]

У меня в IE6 не разворачивается скрытый текст.

Ошибка очевидна: divObj.innerHTML - недопустимая конструкция.

divObj - передается по this, то есть не содержит в себе id-а объекта, а содержит обращение к элементу через DOM;

innerHTML - оператор, требующий id, не предназначенный для работы с DOM...

[DacentGS]

Но такой код у меня был с самого начала и всё прекрасно работало.

[FatCat]

Работа с сообщением об ошибке и не во всех браузерах я бы не стал называть "прекрасной" работой.

 

Я так и не понял, что нужно:

 

Довести этот джаваскрипт до рабочего состояния? Нафига? Есть же корректные коды.

 

Заставить работать innerHTML? Согласен, нравится мне эта идея; но тогда уж и сам спойлер тоже на этот метод ставить.

[DacentGS]

Что ты предлагаешь?

[FatCat]

Я не предлагаю, я ищу интересные идеи.

Спасибо тебе, у меня наконец дошли руки разобраться в коде спойлера на "торрентсах" и сделать такое же себе.

Жду, может еще какие-то свежие мысли промелькнут, которые можно будет использовать если не впрямую, то как "затравку".

[memo]

Напишите готовый код спойлера, такой как на торрентсах. Заранее спасибо.

А то из всей этой темы ничего не понятно.

[FatCat]

Напишите готовый код спойлера, такой как на торрентсах. Заранее спасибо.

А то из всей этой темы ничего не понятно.

ОК, напишу для IPB 1.3 + mJournal 1.05

Посмотреть в действии можно здесь: http://vesvalo.net/journal.php?user=1&comm=2620

 

Я решил не создавать новый ББ-код, а переделать под свои нужды кнопку вставки звука, все равно вставка звука у меня запрещена и в парсере отключено.

 

1. Перерисовал кнопку звука: http://vesvalo.net/html/UBBC/sound.gif

 

2. ubbc.js

Найти дважды:

$txt = preg_replace( "#\[more\](.+?)\[/more\]#is", "<!--spoilerstart--><div class='sp-wrap'><div class='sp-head-wrap'><div class='sp-head folded clickable'><b><u>Свернутый текст</u></b></div></div><div class='sp-body'><div class='sp-content'>\\1</div></div></div><!--spoilerstend-->", $txt );
$txt = preg_replace( "#\[more=(.*?)\](.*?)\[\/more\]#is", "<!--spoilerstart--><div class='sp-wrap'><div class='sp-head-wrap'><div class='sp-head folded clickable'><b><u>\\1</u></b></div></div><div class='sp-body'><div class='sp-content'>\\2</div></div></div><!--spoilerstend-->", $txt );
$txt = preg_replace( "#\[more\](.+?)\[/more\]#is", "<!--spoilerstart--><div class='sp-wrap'><div class='sp-head-wrap'><div class='sp-head folded clickable'><b><u>Свернутый текст</u></b></div></div><div class='sp-body'><div class='sp-content'>\\1</div></div></div><!--spoilerstend-->", $txt );
$txt = preg_replace( "#\[more=(.*?)\](.*?)\[\/more\]#is", "<!--spoilerstart--><div class='sp-wrap'><div class='sp-head-wrap'><div class='sp-head folded clickable'><b><u>\\1</u></b></div></div><div class='sp-body'><div class='sp-content'>\\2</div></div></div><!--spoilerstend-->", $txt );

А после кода:

$txt = preg_replace( "#(<!--spoilerstart--><div class='sp-wrap'><div class='sp-head-wrap'><div class='sp-head folded clickable'><b><u>Свернутый текст</u></b></div></div><div class='sp-body'><div class='sp-content'>)(.+?)(</div></div></div><!--spoilerstend-->)#is", "\[more\]\\2\[\/more]", $txt );
$txt = preg_replace( "#(<!--spoilerstart--><div class='sp-wrap'><div class='sp-head-wrap'><div class='sp-head folded clickable'><b><u>)(.+?)(</u></b></div></div><div class='sp-body'><div class='sp-content'>)(.+?)(</div></div></div><!--spoilerstend-->)#is", "\[more=\\2\]\\4\[/more\]", $txt );
$txt = preg_replace( "#(<!--spoilerstart--><div class='sp-wrap'><div class='sp-head-wrap'><div class='sp-head folded clickable'><b><u>Свернутый текст</u></b></div></div><div class='sp-body'><div class='sp-content'>)(.+?)(</div></div></div><!--spoilerstend-->)#is", "\[more\]\\2\[\/more]", $txt );
$txt = preg_replace( "#(<!--spoilerstart--><div class='sp-wrap'><div class='sp-head-wrap'><div class='sp-head folded clickable'><b><u>)(.+?)(</u></b></div></div><div class='sp-body'><div class='sp-content'>)(.+?)(</div></div></div><!--spoilerstend-->)#is", "\[more=\\2\]\\4\[/more\]", $txt );

 

 

5.

В стили через админку добавил описания классов:

.sp-body	  { display: none; font-weight: normal; background: #F5F5F5; border-top-width: 0; }
.clickable { cursor: pointer; }
.sp-content{border: 1px solid Gray;  margin-left: 10px;}
.folded { display: block;
background: transparent url(style_images/<#IMG_DIR#>/plus.gif) no-repeat left center; padding-left: 14px; }
.unfolded { display: block;
background: transparent url(style_images/<#IMG_DIR#>/minus.gif) no-repeat left center; padding-left: 14px; }

 

 

6. И файл skin_jinfo.php (для журналов):

После кода:

<script language="javascript" type="text/javascript"><!--
document.cookie="journal=1; path=/";
//--></script>

Добавить:

<script language="JavaScript" type="text/javascript" src="./html/quote.js"></script>
<style>
.sp-body	  { display: none; font-weight: normal; background: #F5F5F5; border-top-width: 0; }
.clickable { cursor: pointer; }
.sp-content{border: 1px solid Gray;  margin-left: 10px;}
.folded { display: block;
background: transparent url(style_images/1/plus.gif) no-repeat left center; padding-left: 14px; }
.unfolded { display: block;
background: transparent url(style_images/1/minus.gif) no-repeat left center; padding-left: 14px; }
</style>

 

 

7.

Добавить в style_images/х/ изображения плюсика и минусика:

http://vesvalo.net/style_images/1/plus.gif и http://vesvalo.net/style_images/1/minus.gif

Изменено 1 Ноября 2007 пользователем FatCat