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



 

Здравствуйте, гость (

| Вход | Регистрация )

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


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


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

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


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


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


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

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


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

Тут демо...


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


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


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

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

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


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

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


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


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


Допустим, будет такой 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


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

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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Разработка сайтов Joomla Wordpress Opencart
Разработка, верстка, оптимизация веб сайтов.
77 WoWeb 40298 3.9.2023, 16:52
автор: Sawich
Открытая тема (нет новых ответов) [Продам] базы сайтов на CMS Wordpress/Joomla/Drupal/Magento/...
14 phosphoruss 13674 16.8.2023, 15:27
автор: SmmPanelUS
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыТехподдержка сайтов на движках Joomla, Netcat, Opencart
5 54web 4259 22.1.2023, 13:27
автор: kikimora17
Открытая тема (нет новых ответов) Доработка сайта Joomla + VirtuMart
0 Intuit_Design 1170 4.2.2021, 15:05
автор: Intuit_Design
Горячая тема (нет новых ответов) ВНИМАНИЕ: Тема имеет прикрепленные файлыКомплекс услуг по движку Joomla и верстка
61site.ru - Верстаем и делаем сайты под ключ
321 lostprophet 434648 1.7.2020, 12:02
автор: shamil918


 



RSS Текстовая версия Сейчас: 29.3.2024, 11:54
Дизайн