X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Добавить ответ в эту тему
> Спойлер на joomla 1.5, Как сделать красивый, плавный спойлер?
taoren
taoren
Topic Starter сообщение 25.3.2012, 17:33; Ответить: taoren
Сообщение #1


Бывалый
****


Группа: User
Сообщений: 263
Регистрация: 19.4.2009
Из: Царское Село
Поблагодарили: 21 раз
Репутация:   10  


Не подскажите как можно сделать спойлер следущего вида:


http://s019.radikal.ru/i637/1203/91/24076bffbb16.bmp
Прикрепленный файл  пример_спойлера.bmp ( 1,87 мегабайт ) Кол-во скачиваний: 317

Под номером 2.
При нажатии плавно раскрывался.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Man1keN
Man1keN
сообщение 25.3.2012, 17:40; Ответить: Man1keN
Сообщение #2


Бывалый
****

Группа: User
Сообщений: 316
Регистрация: 31.8.2009
Из: Санкт-Петербург
Поблагодарили: 158 раз
Репутация:   22  


$('.spoiler').click( function() {
    $(this).slideToggle();
});


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
taoren
taoren
Topic Starter сообщение 25.3.2012, 17:46; Ответить: taoren
Сообщение #3


Бывалый
****


Группа: User
Сообщений: 263
Регистрация: 19.4.2009
Из: Царское Село
Поблагодарили: 21 раз
Репутация:   10  


На данный момент у меня такой скрипт спойлера:

CODE
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<style type="text/css">
/* Стили для спойлера */
.bar {
background:#B2BDCB url('http://lh5.ggpht.com/_3_wwcvitlLc/SlqyHLMerfI/AAAAAAAABKk/T3rgvkvrTZY/spoiler.png') no-repeat;
padding-left: 21px;
color: #1A3457;
height:21px;
font-weight:bold;
cursor:pointer;
}
/* Скрытый спойлер */
.spoiler-hidden .bar {
background-position: 0 0;
}
.spoiler, .spoiler-hidden .text {
display: none;
}
/* Открытый спойлер */
.spoiler-visible .bar {
background-position: 0 -23px;
}
.spoiler-visible .copy {
text-align:right; font-size:0.6em;
}
.spoiler-visible .text {
display:visible;
padding: 1 1em;
border: 1px dashed #B2BDCB;
border-top-width:0;
}
</style>


CODE
<script src='http://blogger.com.md/uploads/demo/spoiler/widget_spoiler.js' type='text/javascript'></script>
<script type='text/javascript'>
WidgetSpoilerManager.setOption("defaultTitleText", "Скрытый текст");
WidgetSpoilerManager.init();
</script>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
LoraDi
LoraDi
сообщение 25.3.2012, 17:58; Ответить: LoraDi
Сообщение #4


С Joomla на ты...
*****

Группа: Active User
Сообщений: 836
Регистрация: 11.12.2010
Из: Молдовы
Поблагодарили: 295 раз
Репутация:   73  


Тут скачать...

Тут демо...


--------------------


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
taoren
taoren
Topic Starter сообщение 25.3.2012, 18:02; Ответить: taoren
Сообщение #5


Бывалый
****


Группа: User
Сообщений: 263
Регистрация: 19.4.2009
Из: Царское Село
Поблагодарили: 21 раз
Репутация:   10  


Man1keN, не подскажите полный код/скрипт такого спойлера?

LoraDi, спасибо, буду пробовать...
ещё вопрос: можно ли сделать "матрёшку"? Спойлер в спойлере? Или аналог этого?

Сообщение отредактировал bum - 10.5.2012, 15:08
Причина редактирования: -overquotting
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
LoraDi
LoraDi
сообщение 25.3.2012, 18:07; Ответить: LoraDi
Сообщение #6


С Joomla на ты...
*****

Группа: Active User
Сообщений: 836
Регистрация: 11.12.2010
Из: Молдовы
Поблагодарили: 295 раз
Репутация:   73  


taoren, думаю что да, но сама не пробовала...

Сообщение отредактировал bum - 10.5.2012, 15:09
Причина редактирования: -overquotting


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Man1keN
Man1keN
сообщение 25.3.2012, 18:17; Ответить: Man1keN
Сообщение #7


Бывалый
****

Группа: User
Сообщений: 316
Регистрация: 31.8.2009
Из: Санкт-Петербург
Поблагодарили: 158 раз
Репутация:   22  


Не подскажите полный код/скрипт такого спойлера?


Допустим, будет такой html код спойлера:
<div class="spolier">
   <div class="spolier-title">Заголовок спойлера</div>
   <div class="spoiler-content">Контент спойлера</div>
</div>


Тогда в <head> засовываем
<script>
   $(document).ready( function() {
      $('.spoiler-title').click( function() {
         $(this).next('spoiler-content').slideToggle();
      });
   });
</script>


И еще в стили
.spoler-content { display: none; }
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
taoren
taoren
Topic Starter сообщение 25.3.2012, 18:24; Ответить: taoren
Сообщение #8


Бывалый
****


Группа: User
Сообщений: 263
Регистрация: 19.4.2009
Из: Царское Село
Поблагодарили: 21 раз
Репутация:   10  


Не работает sad.gif

Сообщение отредактировал bum - 10.5.2012, 15:08
Причина редактирования: -overquotting
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Добавить ответ в эту тему
Быстрый ответ
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Услуги по CMS Wordpress, DLE, Joomla!. Правки, ремонт, настройка.
Редактирование и правки. Низкие цены.
143 contex1 65205 Сегодня, 9:07
автор: contex1
Открытая тема (нет новых ответов) Не получается зайти в Joomla от имени админа
8 Bel_Ami 468 Вчера, 0:56
автор: anchous
Открытая тема (нет новых ответов) Адаптивная вёрстка и натяжка на Wordpress, DLE, Joomla и др. Создание мобильных версий.
Хороший код с оптимизацией по скорости. Сайты и лендинги "под ключ
15 Nell 1171 13.12.2017, 23:36
автор: Nell
Горячая тема (нет новых ответов) Вёрстка, натяжка на WordPress, Joomla, качественно, доступно
53 WhiteIce 23819 12.12.2017, 19:41
автор: WhiteIce
Горячая тема (нет новых ответов) Разработка сайтов Joomla Wordpress Opencart
Разработка, верстка, оптимизация веб сайтов.
48 WoWeb 7400 12.12.2017, 13:37
автор: serg5777


 



RSS Текстовая версия Сейчас: 17.12.2017, 14:42
Дизайн