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 мегабайт ) Кол-во скачиваний: 459

Под номером 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
Из: Молдовы
Поблагодарили: 296 раз
Репутация:   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
Из: Молдовы
Поблагодарили: 296 раз
Репутация:   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/Joomla/Drupal/OpenCart и т.д.
10 phosphoruss 2502 6.9.2019, 22:06
автор: phosphoruss
Открытая тема (нет новых ответов) Перенос сайта с Joomla 1.5 на WordPress
1 seowhite 297 20.8.2019, 20:24
автор: SongaerDev
Открытая тема (нет новых ответов) Верстка HTML + CSS, любые работы по Wordpress, DLE, JOOMLA, Open Cart
1 mtv1984 507 30.7.2019, 23:09
автор: MechanicalPie
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыСоздание недорогих сайтов под ключ на CMS Joomla!
Качественное и недорогое создание сайтов на CMS Joomla
113 LoraDi 52397 2.6.2019, 17:24
автор: w3bnys
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВерстка шаблонов на joomla, WP, html
32 skiv86 13269 22.5.2019, 15:31
автор: ntup


 



RSS Текстовая версия Сейчас: 19.9.2019, 4:43
Дизайн