Кодировка HTML | Демо-сайт CMS uCoz | Почта

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

Все что связано с HTML и CSS.
Правила форума
1. Темы с названиями Помогите, Как сделать, Хелп, Не могу найти и так далее будут перенесении в мусорку без предупреждения!
2. Любой транс-лит будет удален, так что подумайте стоит ли писать транс-литом.
3. Темы не по тематике этого раздела будут также перенесены в мусорку. (Например по DLE, phpBB, php скриптам и так далее...)
4. Не забываем про Общие правила форума!

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

Сообщение Vanofuture » 01 сен 2009, 20:32

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

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 ;)
Последний раз редактировалось Vanofuture 02 сен 2009, 23:05, всего редактировалось 3 раз(а).
Причина: v1.4 — remove inner border in firefox
Аватара пользователя
Vanofuture
Супермодератор
Супермодератор
 
Автор темы
Сообщения: 1411
Зарегистрирован: 20 апр 2008, 09:36
Карма: + 48 -

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

Сообщение Tim » 02 сен 2009, 19:18

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

А где скачать JS и как его установить на сайт ?
у меня не плавно открывается :(
Tim
Салага
Салага
 
Сообщения: 15
Зарегистрирован: 28 сен 2008, 18:07
Карма: + 1 -
Откуда: Москва

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

Сообщение Tilos » 02 сен 2009, 21:20

Vanofuture, на этом спойлере у меня плавность не пашет
Аватара пользователя
Tilos
Майор
Майор
 
Сообщения: 104
Возраст: 29
Зарегистрирован: 29 апр 2009, 20:22
Карма: + 0 -
Откуда: Из города

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

Сообщение uWeb » 02 сен 2009, 21:23

Tim, :? :shock: :shock:
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$:
Аватара пользователя
uWeb
Подполковник
Подполковник
 
Сообщения: 188
Возраст: 29
Зарегистрирован: 09 июл 2009, 23:02
Карма: + 29 -
Откуда: Ростов на дону

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

Сообщение Tilos » 02 сен 2009, 21:36

Vanofuture, всё нашел ошибку
Аватара пользователя
Tilos
Майор
Майор
 
Сообщения: 104
Возраст: 29
Зарегистрирован: 29 апр 2009, 20:22
Карма: + 0 -
Откуда: Из города

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

Сообщение Tilos » 02 сен 2009, 21:51

Можно вопрос задать? Как изменить ширину и высоту перевого спойлера?
http://s44.radikal.ru/i103/0909/19/5f195a0c40be.jpg
Аватара пользователя
Tilos
Майор
Майор
 
Сообщения: 104
Возраст: 29
Зарегистрирован: 29 апр 2009, 20:22
Карма: + 0 -
Откуда: Из города

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

Сообщение VeRoN » 02 сен 2009, 22:19

Каким образом можно убрать в ФФ фокусировку (точки во круг) на кнопке спойлера?
VeRoN
Салага
Салага
 
Сообщения: 4
Зарегистрирован: 25 май 2009, 09:54
Карма: + 0 -

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

Сообщение Vanofuture » 03 сен 2009, 00:02

VeRoN, обновил код, теперь в ff нету этого.
Tilos, стилями: width, height, margin, padding
По сути это та-же кнопка(input type="button")
Аватара пользователя
Vanofuture
Супермодератор
Супермодератор
 
Автор темы
Сообщения: 1411
Зарегистрирован: 20 апр 2008, 09:36
Карма: + 48 -

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

Сообщение ZheKA » 03 сен 2009, 10:17

А можно сделать стиль спойлера как на torrents.ru? :)
пример
Аватара пользователя
ZheKA
Салага
Салага
 
Сообщения: 2
Возраст: 32
Зарегистрирован: 03 июн 2009, 22:37
Карма: + 0 -
Откуда: Ukraine

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

Сообщение Vanofuture » 03 сен 2009, 14:01

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;
}
Аватара пользователя
Vanofuture
Супермодератор
Супермодератор
 
Автор темы
Сообщения: 1411
Зарегистрирован: 20 апр 2008, 09:36
Карма: + 48 -

След.

Вернуться в HTML и CSS

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 2

cron