Spoiler + jQuery
|
|
Gaara | Дата: 13 Августа 2008, 14:35 | Сообщение # 1 | ● ● ● ● ● 1312 сообщений Статус: Offline | Решил сделать спойлеры, совместив с jQuery Общий вид страниц форума: Code <head> <script> function MakeSpoiler(id){ $("#SpoilerButton" + id).click(function(){ if($("#Spoiler" + id).is(":hidden")){ $("#Spoiler" + id).slideDown("slow") } else{ $("#Spoiler" + id).slideUp("fast") } }) } </script> </head> Вид материалов: Code <script> tds = document.getElementsByTagName('TD') for (i = 0; i < tds.length; i++){ if (tds[i].className == "posttdMessage"){ j=1 while (tds[i].innerHTML.indexOf('[spoiler]') != -1){ tds[i].innerHTML=tds[i].innerHTML.replace('[spoiler]', '<br><button id="SpoilerButton' + $ID$ + j + '">Спойлер</button><br><div id="Spoiler' + $ID$ + j + '" style="display:none;margin-left:10px;margin-top:10px;"><table border=1 bordercolor=black cellspacing=0 cellpadding=0><tr><td><div style="padding-left:10px;padding-top:10px;padding-bottom:10px;padding-right:15px;">') tds[i].innerHTML=tds[i].innerHTML.replace('[/spoiler]', '</div></td></tr></table></div>') MakeSpoiler('$ID$' + j.toString()) j=j+1 } } } </script> Но работает только последний спойлер Добавлено (2008-08-13, 14:32) --------------------------------------------- Тестовая страница: Code <script src="http://free-manga.3dn.ru/jquery-1.2.6.js"></script> <button id="SpoilerButton152">Спойлер</button> <div id="asd"> asdadsjkl[spoiler]spoiler[/spoiler]asdsdasda[spoiler]spoiler2[/spoiler] asddsa asdsda </div> <div id="Spoiler152" style="display:none;margin-left:10px;margin-top:10px;"><table border=1 bordercolor=black cellspacing=0 cellpadding=0><tr><td><div style="padding-left:10px;padding-top:10px;padding-bottom:10px;padding-right:15px;">Содержимое спойлера</div></td></tr></table></div> <script> function MakeSpoiler(id){ $("#SpoilerButton" + id).click(function(){ //alert(id) if($("#Spoiler" + id).is(":hidden")){ $("#Spoiler" + id).slideDown("slow") } else{ $("#Spoiler" + id).slideUp("fast") } }) } </script> <script> MakeSpoiler('152') var i=1 while (document.getElementById('asd').innerHTML.indexOf('[spoiler]') != -1){ document.getElementById('asd').innerHTML=document.getElementById('asd').innerHTML.replace('[spoiler]', '<br><button id="SpoilerButton' + i + '">Спойлер</button><br><div id="Spoiler' + i + '" style="display:none;margin-left:10px;margin-top:10px;"><table border=1 bordercolor=black cellspacing=0 cellpadding=0><tr><td><div style="padding-left:10px;padding-top:10px;padding-bottom:10px;padding-right:15px;">') document.getElementById('asd').innerHTML=document.getElementById('asd').innerHTML.replace('[/spoiler]', '</div></td></tr></table></div>') MakeSpoiler(i.toString()) i=i+1 } //MakeSpoiler('1') //MakeSpoiler('2') </script> Если закомментировать строку MakeSpoiler(i.toString()) и убрать комментарии из строк MakeSpoiler('2') и MakeSpoiler('2') то работают оба. А если оставить така как есть то будет работать только последний (и первый, потому что он создается не в цикле)Добавлено (2008-08-13, 14:35) --------------------------------------------- Вот как это на форуме | | |
|
Fluder | Дата: 13 Августа 2008, 14:38 | Сообщение # 2 | ● ● ● ● ● 705 сообщений Статус: Offline | Gaara, кнопкой спойлер не очень красиво выглядит... | | |
|
Gaara | Дата: 13 Августа 2008, 14:42 | Сообщение # 3 | ● ● ● ● ● 1312 сообщений Статус: Offline | не это важно... | | |
|
Бармалей | Дата: 13 Августа 2008, 14:48 | Сообщение # 4 | ● ● ● ● ● Тиран 7772 сообщения Статус: Offline | эмм... а не проще все это классами сделать? Code <script type="text/javascript"> tds = $('#post$ID$')[0]; td.innerHTML=tds[i].innerHTML.replace(/\[spoiler\]/, '<br /><input type="button" class="SpoilerButton" value="Спойлер" /><br /><div id="Spoiler' + $ID$ + '" style="display:none;margin-left:10px;margin-top:10px;"><table cellspacing="0" cellpadding="0"><tr><td><div style="padding:10px; padding-right:15px;">'); td.innerHTML=tds[i].innerHTML.replace(/\[\/spoiler\]/, '</div></td></tr></table></div>'); </script> где post$ID$ - id родительского элемента для $MESSAGE$ Code <script type="text/javascript"> $(document).ready( function(){ $('input.SpoilerButton').click(function() { $(this).next('div.Spoiler').slideToggle('fast'); }); }); </script> сам код. по аналогии со спойлером с торрентс.ру ЗЫ полность переписал исходный код со мной такое бывает
| | |
|
Fluder | Дата: 13 Августа 2008, 14:57 | Сообщение # 5 | ● ● ● ● ● 705 сообщений Статус: Offline | Gaara, просто если кто будет выбирать, то выберет более красивый... | | |
|
Бармалей | Дата: 13 Августа 2008, 15:00 | Сообщение # 6 | ● ● ● ● ● Тиран 7772 сообщения Статус: Offline | Fluder, сначала нужно написать основу, а потом уже красоту наводить
| | |
|
MindFreakTheMon | Отредактировал MindFreakTheMon - Среда, 13 Августа 2008, 15:06 Дата: 13 Августа 2008, 15:05 | Сообщение # 7 | ● ● ● ● ● 274 сообщения Статус: Offline | Общий вид страниц форума: Code <script type="text/javascript"> e=document.getElementsByTagName("TD"); for(k=0; k<e.length;k++) { if(e[k].className=='posttdMessage') { s=e[k].innerHTML; var q = 0; while (s.indexOf('[spoiler]') != -1){ s=s.replace(/\[spoiler\]([^\[]+)\[\/spoiler\]/ig,' <input type="button" onClick=\'if($(".spoiler:eq('+q+')").is(":hidden")){ $(".spoiler:eq('+q+')").slideDown("slow") }else{ $(".spoiler:eq('+q+')").slideUp("slow")}\' value="Спойлер" class="SpolButt"><div class="spoiler" style="display:none;">$1</div> '); q++; e[k].innerHTML=s; } } } </script> А в сообщении [spoiler] тхт [/spoiler] Настраивать кнопку можно классом "SpolButton", а вид спойлера классом "spoiler" | | |
|
Gaara | Дата: 13 Августа 2008, 15:28 | Сообщение # 8 | ● ● ● ● ● 1312 сообщений Статус: Offline | тогда Quote (Бармалей) <div id="Spoiler' + $ID id не нужен? Добавлено (2008-08-13, 15:28) --------------------------------------------- Бармалей, у мя теперь даже текст [spoiler] не заменился MindFreakTheMon, все кнопки скрывают и показывают только самый первый спойлер | | |
|
MindFreakTheMon | Дата: 13 Августа 2008, 15:40 | Сообщение # 9 | ● ● ● ● ● 274 сообщения Статус: Offline | Gaara, ага) там буковка "g" мешала. Держи новую версию: Code var q = -1; e=document.getElementsByTagName("TD"); for(k=0; k<e.length;k++) { if(e[k].className=='posttdMessage') { s=e[k].innerHTML; while (s.indexOf('[spoiler]') != -1){ q++; s=s.replace(/\[spoiler\]([^\[]+)\[\/spoiler\]/i,' <input type="button" onClick=\'if($(".spoiler:eq('+q+')").is(":hidden")){ $(".spoiler:eq('+q+')").slideDown("slow") }else{ $(".spoiler:eq('+q+')").slideUp("slow")}\' value="Спойлер" class="SpolButt"><div class="spoiler" style="display:none;">$1</div> '); e[k].innerHTML=s; } }} У меня работает: тест | | |
|
Gaara | Дата: 13 Августа 2008, 15:43 | Сообщение # 10 | ● ● ● ● ● 1312 сообщений Статус: Offline | Спасибо!! | | |
|
Бармалей | Дата: 13 Августа 2008, 17:03 | Сообщение # 11 | ● ● ● ● ● Тиран 7772 сообщения Статус: Offline | Quote (Gaara) Бармалей, у мя теперь даже текст [spoiler] не заменился значит не присвоил родительскому элементу id Quote (MindFreakTheMon) Gaara, ага) там буковка "g" мешала. Держи новую версию: при таком построении она и не нужна. достаточно цикла while
| | |
|
MindFreakTheMon | Дата: 13 Августа 2008, 17:23 | Сообщение # 12 | ● ● ● ● ● 274 сообщения Статус: Offline | Quote (Бармалей) при таком построении она и не нужна. достаточно цикла while Поэтому ее и убрал.. | | |
|
Gaara | Дата: 14 Августа 2008, 12:11 | Сообщение # 13 | ● ● ● ● ● 1312 сообщений Статус: Offline | Quote (Бармалей) значит не присвоил родительскому элементу id присвоил | | |
|
MindFreakTheMon | Отредактировал MindFreakTheMon - Среда, 20 Августа 2008, 11:49 Дата: 20 Августа 2008, 11:47 | Сообщение # 14 | ● ● ● ● ● 274 сообщения Статус: Offline | Вот еще версия, где можно давать имя кнопке спойлера: (Это в общий вид страниц форума, после $BODY$) Code <script type="text/javascript" src="http://ubisoft.com.ua/js/spoiler.js"></script> <script type="text/javascript">dospoiler();</script> А кнопка для добавления вот: (добавлять в конец "Формы добавления сообщений") Code <script type="text/javascript"> if(document.getElementById('bc1')) { x="<input value='spoiler' onclick=\"tag_spoiler('message','')\" class='codeButtons' style='width: 45px;' name='spoiler' type='button' />" x+=document.getElementById('bc1').innerHTML; // То что было в bc1 - дописали. document.getElementById('bc1').innerHTML=x; // А теперь - все отдали обратно в bc1. } </script> | | |
|
Gaara | Дата: 20 Августа 2008, 11:58 | Сообщение # 15 | ● ● ● ● ● 1312 сообщений Статус: Offline | Code if(document.getElementById('bc1')) { x="<input value='spoiler' onclick=\"simpletag('spoiler','','','message','')\" class='codeButtons' style='width: 45px;' name='spoiler' type='button' />" x+=document.getElementById('bc1').innerHTML; document.getElementById('bc1').innerHTML=x; } Вот так заработало | | |
|
MindFreakTheMon | Дата: 20 Августа 2008, 12:01 | Сообщение # 16 | ● ● ● ● ● 274 сообщения Статус: Offline | Gaara, хм. не наю. я сделал функцию, которая спрашивает также как и http:// ...а симплтег, по моему, только вставляет..или нет? | | |
|
Gaara | Дата: 20 Августа 2008, 12:04 | Сообщение # 17 | ● ● ● ● ● 1312 сообщений Статус: Offline | Не знаю, я сначала сделал Quote (MindFreakTheMon) onclick=\"tag_spoiler('message','')\" не сработало. тогда я скопировал onclick у кнопки b | | |
|
MindFreakTheMon | Дата: 20 Августа 2008, 12:05 | Сообщение # 18 | ● ● ● ● ● 274 сообщения Статус: Offline | Gaara, может на странице не присутствует <script type="text/javascript" src="http://ubisoft.com.ua/js/spoiler.js"></script>? Там эта функция и описана.. | | |
|
Gaara | Дата: 20 Августа 2008, 12:10 | Сообщение # 19 | ● ● ● ● ● 1312 сообщений Статус: Offline | Кстати,Quote (MindFreakTheMon) s=s.replace(/\[spoiler\]([^\[]+)\[\/spoiler\]/ig,' <input type="button" onClick=\'if($(".spoiler:eq('+q+')").is(":hidden")){ $(".spoiler:eq('+q+')").slideDown("slow") }else{ $(".spoiler: eq('+q+')").slideUp("slow")}\' value="Спойлер" class="SpolButt"><div class="spoiler" style="display:none;">$1</div> '); работает, но тогда нельзя спойлер в спойлер вставить. АCode s=s.replace('[spoiler]', '<br><a href="javascript://" onClick=\'if($(".spoilerMessage:eq('+q+')").is(":hidden")){ $(".spoilerMessage:eq('+q+')").slideDown("slow") }else{ $(".spoilerMessage:eq('+q+')").slideUp("slow")}\'class="SpoilerOpenLink">Спойлер</a><br><br> <div class="spoilerMessage"><br>') s=s.replace('[/spoiler]', '<br><br></div><br>') можно Добавлено (2008-08-20, 12:10) ---------------------------------------------
Quote (MindFreakTheMon) Gaara, может на странице не присутствует <script type="text/javascript" src="http://ubisoft.com.ua/js/spoiler.js"></script>? | | |
|
MindFreakTheMon | Дата: 20 Августа 2008, 12:14 | Сообщение # 20 | ● ● ● ● ● 274 сообщения Статус: Offline | Quote (Gaara) работает, но тогда нельзя спойлер в спойлер вставить. Угу. Ибо оно заменяет первый попавшийся [/spoiler] но это можно устранить.) Что я и вскоре сделаю, как не впадло будет.. | | |
|