Сначала хотел назвать этот пост «Стандартный юКозовский спойлер (uSpoiler) на новый лад», но, когда сохранял документ, передумал.
Но, не в этом дело. На форуме, «Сообщество uCoz», прозвучал вопрос: Quote (Anime-FS) Еще один вопрос возник, насчет спойлеров на форуме, возможно ли с помощью CSS сделать, чтобы они открывались по клику не только на кнопку но и по всему блоку...
П.С.: Принцип работы, чтобы был, как на рутракере(торрентс.ру)...
И, что самое интересно, ни одного более-менее толкового ответа на этот вопрос, я не припомнил... Хотя, думаю, что по вопросам HTML/CSS/JavaScript облазил этот форум досконально.
И это, конечно же, не значит, что именно эта статья - самый, что ни на есть преправильный ответ на этот вопрос.
Конечно нет.
Это - просто мой вариант изменения стандартного, для сайтов в uCoz, спойлера. Задача: - 1. Изменить, внешний вид спойлера.
- 2. Изменить событие «click()» и поведение при клике.
- 3. Всё это должно быть максимально просто, и при минимальном вмешательстве в исходный код.
Если вы не в курсе, стандартный спойлер выглядит вот так (с моими стилями «по умолчанию»):
А это его исходник: Code
<div class="uSpoilerClosed" id="uSpoiler38msMJ">
<div class="uSpoilerButBl"><input class="uSpoilerButton" onclick="if($('#uSpoiler38msMJ')[0]){if ($('.uSpoilerText',$('#uSpoiler38msMJ'))[0].style.display=='none'){$('.uSpoilerText',$('#uSpoiler38msMJ'))[0].style.display='';$('.uSpoilerButton',$('#uSpoiler38msMJ')).val('[\–] Оригиналы файлов');$('#uSpoiler38msMJ').attr('class','uSpoilerOpened');}else {$('.uSpoilerText',$('#uSpoiler38msMJ'))[0].style.display='none';$('.uSpoilerButton',$('#uSpoiler38msMJ')).val('[+] Оригиналы файлов');$('#uSpoiler38msMJ').attr('class','uSpoilerClosed');}}" value="[+] Оригиналы файлов" type="button"></div>
<div class="uSpoilerText" style="display: none;"><!--ust-->-=/ Здесь контент спойлера /=-<!--/ust--><!--usn(=Оригиналы файлов)--></div>
</div>
Задаём стилевое оформление.Ну, с этим всё просто.
Примерно вот так. Плюсы/минусы - стандартные юКозовские. Лежат у всех по адресу - «/.s/img/icon/pm.gif». У меня это будет так: Code <style type="text/css">
.posttdMessage .uSpoilerClosed,.posttdMessage .uSpoilerOpened{border:1px solid #c3cbd1;margin:5px 7px;clear:both;float:none;}
.posttdMessage .uSpoilerButBl{background:#e9e9e6;overflow:hidden;}
input.uSpoilerButton{font:bold 11px/1 Verdana,sans-serif;padding:3px 3px 3px 15px;margin-left:5px;cursor:pointer;width:100%;text-align:left;border:0 none;outline:0 none;color:#00C;background:transparent url('/.s/img/icon/pm.gif') no-repeat scroll left 5px;}
.posttdMessage input.uSpoilerButton::-moz-focus-inner{border:0 none;}
.posttdMessage .uSpoilerText{padding:3px 5px;background:#fcfdff;border-top:1px solid #c3cbd1;}
.posttdMessage .uSpoilerOpened input.uSpoilerButton{background-position:left -16px;color:#C30;}
</style>
Стили прописаны относительно ячейки «.posttdMessage» - это актуально, если у вас для тегов «input» уже прописаны стили по умолчанию, и, если у вас разные стили оформления спойлеров для форума и других модулей/страниц сайта. Пример:
Всё бы хорошо, но установленные по умолчанию значения для открытого [-] и закрытого [+] немного «не в кассу» ...
Хотя, можно оставить и так, и просто убрать из стилей фоновую картинку (плюс-минус) .... Если вам этого достаточно - установите прозрачный фон, и поправьте отступы. Примерно, вот так: Code <style type="text/css">
.posttdMessage .uSpoilerClosed,.posttdMessage .uSpoilerOpened{border:1px solid #c3cbd1;margin:5px 7px;clear:both;float:none;}
.posttdMessage .uSpoilerButBl{background:#e9e9e6;overflow:hidden;}
.posttdMessage input.uSpoilerButton{font:bold 11px/normal Verdana,sans-serif;padding:3px 3px 4px 7px;cursor:pointer;width:100%;text-align:left;border:0 none;outline:0 none;color:#00C;background:transparent;}
.posttdMessage input.uSpoilerButton::-moz-focus-inner{border:0 none;}
.posttdMessage .uSpoilerOpened input.uSpoilerButton{color:#C30;}
.posttdMessage .uSpoilerText{padding:3px 5px;background:#fcfdff;border-top:1px solid #c3cbd1;}
</style>
Пример:
Ну а если же нет, пишем скрипт, точнее, не пишем, а дорабатываем имеющийся. ヅ
Вот его законченная версия. Code <_?if($PAGE_ID$='threadpage')?_> /* если на форум, иначе не нужно */
<script type="text/javascript">
$('td.posttdMessage .uSpoilerButton').each(function (){
$(this).val($(this).val().replace(/\[[+-]]/g, '')).removeAttr('onclick');
$(this).click(function(){
$(this).parent().parent().toggleClass('uSpoilerOpened').find('.uSpoilerText').slideToggle('fast');
});
});
</script>
<_?endif?_>
Где: $('td.posttdMessage .uSpoilerButton').each(function () - проходимся по всем кнопкам «uSpoilerButton» в ячейке «posttdMessage» $(this).val($(this).val().replace(/\[[+-]]/g, '')) - убираем символы для открытого [-] или закрытого [+] значения ЭТОЙ $(this) кнопки. .removeAttr('onclick') - удаляем имеющийся по умолчанию атрибут «onclick» - от стандартного скрипта. $(this).click(function() - вешаем свою функцию на событие «onclick» $(this).parent().parent().toggleClass('uSpoilerOpened') - поднимаемся на два уровня вверх от кнопки «uSpoilerButton», то есть до родительского дива с классом «uSpoilerClosed» и вешаем на него функцию «.toggleClass()» - переключает класс указанный в скобках - если у элемента указанный class существует, то удаляет его, если не существует - добавляет. .find('.uSpoilerText').slideToggle('fast') - находим див контента «uSpoilerText» и устанавливаем для него функцию «.slideToggle()» Скрывает видимые элементы и показывает скрытые используя эффект изменения высоты. Скорость (в скобках) может быть «slow», «normal», или «fast». Либо задаваться числом в мс.
Пример:
По этому вопросу, у меня, на текущий момент, больше нет соображений. ヅ Если у вас остались вопросы, или что-то не получается - пишите на форум, и, если кратко, в комментариях. К статье, если можно так назвать, имеется пример. ☑ Пример. Все варианты на одной странице. Стили - минимальные. Смотрите исходник.
P.S.Всем удачи... ヅ
Flesh.
Источник: Оформляем стандартный спойлер (uSpoiler). Стили для форума юКоз, Сообщество uCoz, рутракер,торрент.ру,HTML, CSS, JavaScript | 