Добро Пожаловать на сайт Clana C.S.R.IP Role Play: 46.174.48.27:27275 IP DM: 212.76.130.197:27281

Главная Файлы Форум Чат Новости Регистрация Вход

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум » Всё для Ucoz » Статьи » Оформляем стандартный спойлер (uSpoiler) (Оформляем стандартный спойлер (uSpoiler))
Оформляем стандартный спойлер (uSpoiler)
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». Либо задаваться числом в мс.


 
Форум » Всё для Ucoz » Статьи » Оформляем стандартный спойлер (uSpoiler) (Оформляем стандартный спойлер (uSpoiler))
Страница 1 из 11
Поиск:

Мини-чат
200
Облако тегов
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные Новые участники
  • Shock-World (0)
  • hi (0)
  • КВ (2)
  • Скрипт вид фотографий Под ЗП (2)
  • Новая лига RUSHCENS.RU (0)
  • Круглое меню на CSS (0)
  • Крутая Менюшка для тёмных дизайнов для Ucoz (0)
  • Горизонтальное меню для uCoz на тему Windows (0)
  • Темное горизонтальное меню с подкатегориями (0)
  • Мега панель (0)
  • заявка в вступление в клан (3)
  • банерообмен (3)
  • КВ (2)
  • Скрипт вид фотографий Под ЗП (2)
  • Цветные шкурки с зонами пробития (1)
  • Arhangel (1)
  • Заявки на дружбу (1)
  • Правила cw (1)
  • JorDaN_____/-5k/ (1)
  • Вступление в клан! SorrY :D (1)
  • Priboy
  • KReeD
  • hrushkaaaaa
  • vlad
  • Кл
  • levarub
  • DEX
  • [Limper]
  • БАБУСЯ
  • John_doe
  • forbetalzzz212:07
    shakirovazat7223:09
    shramogin1515:59
    yrakhorev9615:05
    snapkovsasha17:56
    rayxxs17:33
    strike177rus04:27
    temawild9917:26
    Snap18:49
    dimas2241302:15


    Clan.::[C.[S].R.]::. © 2017

    CSR-TEAM