| Priboy | Дата: Пятница, 22.06.2012, 13:15 | Сообщение # 1 |
 Генералиссимус
Группа: Администраторы
Сообщений: 142
Награды: 1
Репутация: 953
Статус:  | Задача:
1. Изменить, внешний вид спойлера.
2. Изменить событие «click()» и поведение при клике.
3. Всё это должно быть максимально просто, и при минимальном вмешательстве в исходный код.
А это его исходник:
[green]<!--uSpoiler-->
<div class="uSpoilerClosed" id="uSpoiler38msMJ"> /* Мняет класс при клике на «uSpoilerOpened», id - разное */
<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>
<!--/uSpoiler-->[/green]
Задаём стилевое оформление.
Ну, с этим всё просто.
[blue]Примерно вот так. Плюсы/минусы - стандартные юКозовские. Лежат у всех по адресу - «/.s/img/icon/pm.gif».[/blue]
У меня это будет так:
[green]<style type="text/css">
/* StartStyle */
.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;}
/* EndStyle */
</style>
[/green]
[blue]Стили прописаны относительно ячейки «.posttdMessage» - это актуально, если у вас для тегов «input» уже прописаны стили по умолчанию, и, если у вас разные стили оформления спойлеров для форума и других модулей/страниц сайта.[/blue]
[blue]Всё бы хорошо, но установленные по умолчанию значения для открытого [-] и закрытого [+] немного «не в кассу» ...
Хотя, можно оставить и так, и просто убрать из стилей фоновую картинку (плюс-минус) .... [/blue]
Если вам этого достаточно - установите прозрачный фон, и поправьте отступы.
Примерно, вот так:
[green]<style type="text/css">
/* StartStyle */
.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;}
/* EndStyle */
</style>
[/green]
Ну а если же нет, пишем скрипт, точнее, не пишем, а дорабатываем имеющийся. ヅ
Вот его законченная версия.
[green]<_?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?_>
[/green]
Где:
[red]$('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 существует, то удаляет его, если не существует - добавляет. [/red]
.find('.uSpoilerText').slideToggle('fast') - находим див контента «uSpoilerText» и устанавливаем для него функцию «.slideToggle()» Скрывает видимые элементы и показывает скрытые используя эффект изменения высоты. Скорость (в скобках) может быть «slow», «normal», или «fast». Либо задаваться числом в мс.
|
| |
|
|
