Стили для спойлеров

[Vanofuture]

Кому не лень, выкладывайте в эту тему стили и всякие моды для нового спойлера. Начну.

uSpoiler nice style
В css:

Код: Выделить всё

/* version 1.4 */
input.uSpoilerButton {
   border: 0;
   padding: 0 0 0 13px;
   outline: 0;
   font-size: 8pt;
   background-color: inherit !important;
   cursor: pointer;
}

input.uSpoilerButton::-moz-focus-inner {
   border: 0;
}

div.uSpoilerClosed input.uSpoilerButton {
   background: url('http://alexeenko.org/public/img/spoiler_plus.gif') no-repeat left center;
}

div.uSpoilerOpened input.uSpoilerButton {
   background: url('http://alexeenko.org/public/img/spoiler_minus.gif') no-repeat left center;
}

После $B0DY$:

Код: Выделить всё

<script type="text/javascript">
/* by Vanofuture — webcodes.ru | v1.4 */
$('input.uSpoilerButton').removeAttr('onclick').click(function () {
   // Это нужно менять ТОЛЬКО если вы изменяли тексты спойлера в замене стандартных надписей
   var toOpen='Открыть спойлер';
   var toClose='Закрыть спойлер';
   $(this).val(this.value == toClose ? toOpen: toClose).parent().parent().attr('class', $(this).parent().parent().attr('class') == 'uSpoilerClosed' ? 'uSpoilerOpened': 'uSpoilerClosed').find('div:last').slideToggle('normal');
});
</script>

CSS код даёт нам стиль, а js — плавность открытия. Если убрать один из них, второй все равно будет работать.

Demo ? http://xcinema.ucoz.net/forum/2-1-2-16-1251796198

[Tim]

а js — плавность открытия

А где скачать JS и как его установить на сайт ?
у меня не плавно открывается

[Tilos]

Vanofuture, на этом спойлере у меня плавность не пашет

[uWeb]

Tim,

JS

<script type="text/javascript">/* by Vanofuture — webcodes.ru | v1.3 */$('input.uSpoilerButton').removeAttr('onclick').click(function () {   // Это нужно менять ТОЛЬКО если вы изменяли тексты спойлера в замене стандартных надписей   var toOpen='Открыть спойлер';   var toClose='Закрыть спойлер';   $(this).val(this.value == toClose ? toOpen: toClose).parent().parent().attr('class', $(this).parent().parent().attr('class') == 'uSpoilerClosed' ? 'uSpoilerOpened': 'uSpoilerClosed').find('div:last').slideToggle('normal');});</script>

как его установить на сайт ?

После $B0DY$:

[Tilos]

Vanofuture, всё нашел ошибку

[Tilos]

Можно вопрос задать? Как изменить ширину и высоту перевого спойлера?
http://s44.radikal.ru/i103/0909/19/5f195a0c40be.jpg

[VeRoN]

Каким образом можно убрать в ФФ фокусировку (точки во круг) на кнопке спойлера?

[Vanofuture]

VeRoN, обновил код, теперь в ff нету этого.
Tilos, стилями: width, height, margin, padding
По сути это та-же кнопка(input type="button")

[ZheKA]

А можно сделать стиль спойлера как на torrents.ru?
пример

[Vanofuture]

ZheKA, да.

Код: Выделить всё

input.uSpoilerButton {
   width: 100%;
   border: 0;
   padding: 0 0 0 13px;
   outline: 0;
   font-size: 8pt;
   background-color: inherit !important;
   cursor: pointer;
   font-weight: bold;
   text-align: left;
}

input.uSpoilerButton::-moz-focus-inner {
   border: 0;
}

div.uSpoilerClosed input.uSpoilerButton {
   background: url('http://alexeenko.org/public/img/spoiler_plus.gif') no-repeat left center;
}

div.uSpoilerOpened input.uSpoilerButton {
   background: url('http://alexeenko.org/public/img/spoiler_minus.gif') no-repeat left center;
}

div.uSpoilerClosed, div.uSpoilerOpened {
   padding: 3px;
   border: 1px solid #CBCBCB;
   border-left-width: 3px;
   background: #E9EAE6;
}

div.uSpoilerText {
   padding-top: 5px;
   padding-left: 3px;
}