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

[DacentGS]

Помогите доделать очень хороший тег! Скрытие текста, вот что у меня пока есть:

 

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

 

ББ код:

<a class='show_hide_button' id='show_hide_button'>-</a> <span class='hidden_block_title'>{option}</span>

<div class='hidden_block' id='hidden_block'>{content}</b></div>

<script type='text/javascript'>assign_show_hide_button('hidden_block', 'show_hide_button')</script>

 

ЦСС:

.show_hide_button { 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; }

 

Добавление функции в ips_topics.js: (не уверен, но вроде так работает)

function assign_show_hide_button(element_id, button_id, show_text, hide_text, show_display_style, current_display, onshow)
{
if (!show_text)
	show_text = '+';
if (!hide_text)
	hide_text = '-';
if (!show_display_style)
	show_display_style = 'block';

var button = document.getElementById(button_id);
var element = document.getElementById(element_id);

button.style.textDecoration = 'none';

if (current_display)
{
	element.style.display = show_display_style;
	button.innerHTML = hide_text;
}
else
{
	element.style.display = 'none';
	button.innerHTML = show_text;
}

button.href = "java script:void(null)";
button.onclick = function()
{
	if (element.style.display == 'none')
	{
		element.style.display = show_display_style;
		button.innerHTML = hide_text;
		onshow && onshow();
	}
	else
	{
		element.style.display = 'none';
		button.innerHTML = show_text;
	}

	return false;
}
}

 

Тег вроде работает, но вот в чём дело, когда добавляешь два тега, то второй не работает и по умолчанию открыт!

Пример: http://img87.imageshack.us/img87/4733/20852925ne6.gif

Причём он не то что бы просто открыт, он просто тупо не работает, как это исправить? Может просто я что то не то сделал? Вообщем надеюсь Вы мне поможете.

[xRay]

Зачем изобретать велик если есть (хак) тег spoiler?

[DacentGS]

Мне нужен именно этот тег.

[xRay]

Имхо не пашет с несколькими блоками потому как IDшники у DIV-ов одинаковые.

У тебя же JS-код по ID-шнику ищет эелемнт странички. вот отседа и проблема и вылезает.

[DacentGS]

Тоесть.

Что сделать то надо?

[FatCat]

Тоесть.

Что сделать то надо?

Либо обращение по this (не на всех браузерах будет работать), либо создавать динамические объекты с динамическими айдишниками (геморрно писать код).

[DacentGS]

Первый вариант в IE работать будет? Как вообще это сделать? Сори что так много вопросов

[Sannis]

А чем тебе код из другой темы не понравился(там как раз динамические id)?

[DacentGS]

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

Вообщем нужен именно это, ну или хотя бы что бы очень похож был, стиль тот же и вышеперечисленное работало.

[xRay]

Насколько мне помнится со спойлером вложеность пашет

[DacentGS]

Что за спойлер, дайте ссылку, хоть посмотрю что это.

[DacentGS]

Можно ли как то этот код изменить что бы в нём работали ББ теги? Просто очень надо что бы это было.

<script type='text/javascript'>

mytagid = Math.floor( Math.random() * 100 );

document.write("<a class='show_hide_button' id='show_hide_button' onclick='toggleview("+'"'+mytagid+'_closed'+'"'+");return false;'>+</a> <span class='hidden_block_title'>{option}</span><div class='hidden_block' id='"+mytagid+"_closed' style='display:none'>{content}</div>");

document.close();

</script>

[DacentGS]

Вот нашёл альтернативу, но опять таки хочеться кое о чём попросить, т.е. спросить.

 

ББ

<div>

<div style="cursor: pointer; color: #000; font-size: 12px; font-family: Verdana, Tahoma, Helvetica, sans-serif; text-decoration: none" onclick="show_hide_text(this,'{option}')"><a class='show_hide_button' id='show_hide_button'>+</a> <span class='hidden_block_title'>{option}</span></div>

<div style="display: none">

{content}

</div>

</div>

 

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' id='show_hide_button'>-</a> <span class='hidden_block_title'>" + text;
} else {
	div.style.display = 'none';
	divObj.innerHTML = "<a class='show_hide_button' id='show_hide_button'>+</a> <span class='hidden_block_title'>" + text;
}
}

 

И так вопрос: как сделать что ссылка была в виде кнопки? (т.е. кнопка уже есть но нажать можно по всей длинне сообщения, а мне надо что бы только когда нажимаешь на кнопку).

Скажите хоть как тут сделать.

[FatCat]

Посмотри, какой скрипт используется для спойлера на torrents.ru

ИМХО, там лучший. Работает во всех браузерах, позволяет складывать спойлер в спойлер.

[Arhar]

так там пыхпыхбебе и злостное требование зарегится...

вот еслиб ты привел html код его

[FatCat]

так там пыхпыхбебе и злостное требование зарегится...

вот еслиб ты привел html код его

Если разберешь закомпреснутый код, вот, держи: http://slil.ru/24987963

[olmer2002]

удалите. Изменено 16 Октября 2007 пользователем olmer2002

[DacentGS]

Так есть возможность обойтись без div? Что бы только на кнопку нажимать можно было?

[xRay]

По поводу того как с this сделать можно:

http://www.ibresource.ru/forums/index.php?showtopic=40983

 

А вот и тег SPOILER:

http://www.ibresource.ru/forums/index.php?...60&start=60

[DacentGS]

Не думаю что я пойму что делать...

[DacentGS]

xRay к сожалению я в этом не разбираюсь (оно и понятно, тема то уже созданна), поэтому прошу людей которые точно знают что делать.

[Arhar]

А зачем мне разбирать копреснутый яваскрипт, если я его тупо копипасте в отдельный файл, который благополучно закешируется в браузере, а ббкод создаваться будет чисто

<div class="sp-wrap"> <div class="sp-head-wrap"><div class="sp-head folded clickable">{option}</div></div> <div class="sp-body">
<div class="sp-content">{content}<div class="clear"></div> </div></div>

правда компреснуто ацки)

 

torrents.ru не запрещают использовать этот код?

или они тож его откуда-то стырили?

[FatCat]

А зачем мне разбирать копреснутый яваскрипт, если я его тупо копипасте в отдельный файл

На торрентсах так и сделано.

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

 

 

 

torrents.ru не запрещают использовать этот код?

или они тож его откуда-то стырили?

Не знаю.

По-хорошему, надо бы расшифровать код и убрать нафиг плавность своротов-разворотов: это потенциальный отказ в новых браузерах.

Но лень гемороиться...

[Arhar]

вот я нашел настоящего автора, торрентс может идти фтопку

/*

* jQuery 1.1.4 - New Wave Javascript

*

* Copyright © 2007 John Resig (jquery.com)

* Dual licensed under the MIT (MIT-LICENSE.txt)

* and GPL (GPL-LICENSE.txt) licenses.

*

* $Date: 2007-08-23 21:49:27 -0400 (Thu, 23 Aug 2007) $

* $Rev: 2862 $

*/

за выплывание отвечает незакомпресованный

function initSpoilers(context)
{
var context = context || 'body';
$('div.sp-head-wrap', $(context)).click(function(){
	$(this).find('div.sp-head').toggleClass('unfolded');
	$(this).next('div.sp-body').slideToggle('fast');
});
}

 

...

 

короче это jQuery

http://code.google.com/p/jqueryjs/download...jquery-1.2.1.js

 

если заменить всю компреснутую фигню этим файлом, то ничего не изменится

 

все, нашел как сделать без выплывания

function initSpoilers(context)
{
var context = context || 'body';
$('div.sp-head-wrap', $(context)).click(function(){
	$(this).find('div.sp-head').toggleClass('unfolded');
	$(this).next('div.sp-body').toggle();
});
}

[DacentGS]

Я надеюсь Вы не забыли зачем эта тема?!