Страница 1 из 5
Стили для спойлеров
Добавлено: 01 сен 2009, 20:32
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 
Re: Стили для спойлеров
Добавлено: 02 сен 2009, 19:18
Tim
Vanofuture писал(а):а js — плавность открытия
А где скачать JS и как его установить на сайт ?
у меня не плавно открывается
Re: Стили для спойлеров
Добавлено: 02 сен 2009, 21:20
Tilos
Vanofuture, на этом спойлере у меня плавность не пашет
Re: Стили для спойлеров
Добавлено: 02 сен 2009, 21:23
uWeb
Tim,
Tim писал(а):JS
Vanofuture писал(а):<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>
Tim писал(а):как его установить на сайт ?
Vanofuture писал(а):После $B0DY$:
Re: Стили для спойлеров
Добавлено: 02 сен 2009, 21:36
Tilos
Vanofuture, всё нашел ошибку
Re: Стили для спойлеров
Добавлено: 02 сен 2009, 21:51
Tilos
Можно вопрос задать? Как изменить ширину и высоту перевого спойлера?
http://s44.radikal.ru/i103/0909/19/5f195a0c40be.jpg
Re: Стили для спойлеров
Добавлено: 02 сен 2009, 22:19
VeRoN
Каким образом можно убрать в ФФ фокусировку (точки во круг) на кнопке спойлера?
Re: Стили для спойлеров
Добавлено: 03 сен 2009, 00:02
Vanofuture
VeRoN, обновил код, теперь в ff нету этого.
Tilos, стилями: width, height, margin, padding
По сути это та-же кнопка(input type="button")
Re: Стили для спойлеров
Добавлено: 03 сен 2009, 10:17
ZheKA
А можно сделать стиль спойлера как на torrents.ru?
пример
Re: Стили для спойлеров
Добавлено: 03 сен 2009, 14:01
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;
}
