Понедельников НЕТ!
Регистрация или вход Регистрация или вход Избранное на этом сайте | Главная | Анкета | Рекомендовать | Обратная связь | В избранное | Сделать домашней
Скачать SSDForums
Скачать SSDForums 1.0.1 Скачать SSDForums 1.0.1
Скачать SSDForums 1.0.1 SP1 Скачать SSDForums 1.0.1 SP1
Скачать SSDForums 1.0.1 SP2 Скачать SSDForums 1.0.1 SP2
SSD Forums 1.0.1 SP3 only Slaed 3.5 Pro SSD Forums 1.0.1 SP3 only Slaed 3.5 Pro
SSD Forums 1.0.1 SP4-beta only Slaed 4.1 Pro SSD Forums 1.0.1 SP4-beta only Slaed 4.1 Pro
Jewelry Сase Team
Скачать Ruby Chat 0.1.1 Скачать Ruby Chat 0.1.1
Меню
Главная
Форум
Магазин цифровых товаров

Новости
Подписка на новости
Темы новостей
Добавить новость

Каталог файлов
Карта файлового архива
Публикации
Вопросы и ответы

Опросы
Контакты
Рекомендовать
Анкета пользователя
Чат

BestMaker
Викторина
Архив новостей
Карманный оракул
Поиск по сайту с помощью Яндекс
Поиск по сайту с помощью Google
Фото дня
Для души
Погода на 3 дня
IndexCat
IndexTop
Map_Pages
Поиск по сайту









Интересное в сети

Sape — это система купли-продажи ссылок
с главных и внутренних страниц сайтов
Публикации
MooTools
Универсальный обработчик тега «спойлер»


Тег спойлер


В языках программирования HTML, java_!_sctipt и т.п. спойлером называют скрывающийся / показывающийся объект (текст, картинка и т.д.).

Пример работы

Функция универсальна для вёрстки, поскольку не требует прописывания уникальных id для спойлеров.

Работоспособность скрипта проверенна в mootools 1.11 и 1.2
Работоспособность скрипта проверенна в браузерах FF3.5.3, IE6, O10

Скачать пример




Установка:
1. В хедере после вызова библиотеки вызываем нашу функцию
Код
1
<script type="text/javascript" src="spoil.js"></script>

2. Добавьте в стили следующее
Код
1
2
.spoil_title { background-color: #f96; cursor: pointer;}
.spoil_body { background-color: #9a6; display: none;}


Вёрстка в html:
Конструкция выглядит следующим образом
Код
1
2
3
4
5
6
7
8
9
10
11
<div class="spoil">

   <div class="spoil_title">
   title1 spoil1
   </div>

   <div class="spoil_body">
   body spoil
   </div>

</div>


Вёрстка при помощи bb-тегов:
[spoiler=заголовок спойлера тег]тело спойлера тег[/spoiler]

Дешифратор для slaed cms:
Код
1
2
$bb[] = "#\[spoiler=(.*?)\](.*?)\[/spoiler\]#is";
$html[] = "<div class=\"spoil\"><div class=\"spoil_title\">\\1</div><div class=\"spoil_body\">\\2</div></div>";


И одним куском, для тех, кто не знаком со слаед:
Код
1
2
3
4
5
6
7
8
9
<?php

$str = '[spoiler=заголовок спойлера тег]тело спойлера тег[/spoiler]';

   $bb[] = "#\[spoiler=(.*?)\](.*?)\[/spoiler\]#is";
   $html[] = "<div class=\"spoil\"><div class=\"spoil_title\">\\1</div><div class=\"spoil_body\">\\2</div></div>";

   echo preg_replace($bb, $html, $str);
?>


Принцип работы:
1. После загрузки страницы скрипт пробегает по странице и расставляет id всем объектам, находящимся внутри слоёв с классом spoil.
Причем у заголовка спойлера префикс st, а у тела - sb
Разделение происходит на основании "назначенности" классов spoil_title и spoil_body
2. Скрипт следит за кликом по заголовку и показывает или скрывает тело спойлера.
3. Финт ушам
Код
1
2
3
4
5
6
7
if ($('sb'+idsb).getStyle('display') == 'none')
{
      myVerticalSlide.toggle();
      (function(){
         $('sb'+idsb).setStyle('display', 'block');
      }).delay(100);
}

нужен для того, что бы при загрузке спойлер пришел к пользователю в свёрнутом состоянии.
В ИЕ6 кстати всё равно немного дёргается тело спойлера. Что бы избавится от этого подёргивания попробуйте увеличить тайм-аут delay до 500 (полсекунды)


Дата публикации: 12.10.2009
Прочитано: 15262 раз
[ Назад | Начало | Наверх ]
Комментарии

MUSTANG651
Дата: 06.11.2013 | Комментарий: 25
MUSTANG651а вложеные спойлеры должны работать? если нет, то как их заставить?
name
Дата: 21.09.2013 | Комментарий: 24
nameпонятно
ну с jquery было бы ещё лучше, но найти или сделать спойлер не получается

если интересно: тут, загрузить аватар с компьютера или по ссылке, не удаётся.

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
отредактированно 22.09.2013г.
Serg_pnz
Дата: 21.09.2013 | Комментарий: 23
Serg_pnzname, в данном случае хакнуть означает периписать всё целиком.
А что, еще кто-то пользуется mootools 1.11?
Не все кальсоны с оторванными пуговицами - брюки. © Serg_pnz
"...даме водки? Это чистый спирт!" © кот Бегемот
name
Дата: 20.09.2013 | Комментарий: 22
nameSerg_pnz здравствуйте
воспользовался вашим кодом (первым вариантом, не "Вёрстка при помощи bb-тегов")
всё работает, спасибо!

но могли бы подсказать,
как показать/скрыть один и тот же спойлер, несколькими, в данном случае, блоками
<div class="spoil_title">title1 spoil1</div>

например спойлер вверху страницы, с кнопкой/блоком "title1 spoil1", всё как у Вас, но помимо этого, в середине страницы должна быть ещё одна кнопкой/блоком "title1 spoil1", которая будет показывать/скрывать, верхний спойлер.
(! ну и ещё несколько, спойлеров с одной кнопкой/блоком "title1 spoil1", как у Вас)

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
отредактированно 20.09.2013г.
Serg_pnz
Дата: 13.01.2010 | Комментарий: 21
Serg_pnzПро плюсик тут
Про кнопку тут
Не все кальсоны с оторванными пуговицами - брюки. © Serg_pnz
"...даме водки? Это чистый спирт!" © кот Бегемот
gruz
Дата: 12.01.2010 | Комментарий: 20
gruzВ templates/Admin/index вставил код на скрипты, вроде заработало и в Адинке.
А как бы сделать вставку в source.php в функцию // Format BB Code, чтоб вставлять код спойлера?
Был вот такой код
Код
1
."<div class=\"editorbutton\" OnClick=\"InsertCode('spoiler', '', '', '', '".$id."')\"><img title=\"Убрать текст под спойлер\" src=\"images/editor/spoiler.gif\"></div>"

но он вставлял типа [spoiler][/spoiler], а надо бы [spoiler=][/spoiler]
Не поможите Серж?
И уж совсем было бы хорошо чтоб с левой стороны появлялся "плюс" (+) в нераскрытом спойлере и "минус" (-) в рскрытом виде чтоб было понятно что есть некий скрытый текст под заголовком и его можно прочитать.

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
отредактированно 12.01.2010г.
Serg_pnz
Дата: 12.01.2010 | Комментарий: 19
Serg_pnzgruz, в админке нужно по-новый подключать оба js-скрипта
Не все кальсоны с оторванными пуговицами - брюки. © Serg_pnz
"...даме водки? Это чистый спирт!" © кот Бегемот
gruz
Дата: 12.01.2010 | Комментарий: 18
gruzХотя после проверки админом, при появлении публикации на главной код начинает работать. Т.Е. не получается проверить в админке какой текст находится под спойлером.
gruz
Дата: 12.01.2010 | Комментарий: 17
gruzSerg_pnz, Переставил - в указаноом мною примере текст стал раскрываться, а вот в Админке(при добавлении новости к примеру) не хочет работать; почему так?
Serg_pnz
Дата: 12.01.2010 | Комментарий: 16
Serg_pnzВ config/config_header.php надо вставлять ссылки на скрипты
Не все кальсоны с оторванными пуговицами - брюки. © Serg_pnz
"...даме водки? Это чистый спирт!" © кот Бегемот
Всего 25 на 3 страницах по 10 на каждой странице
[ 1 | 2 | 3 ] [>>]
Вы не можете отправить комментарий анонимно, пожалуйста зарегистрируйтесь.
цифровая печать в краснодаре в типографии и студии дизайна Artworkshop.
artworkshop.pro
Календарь 3 в 1
- М - Г + Г + М
Май, 2017
пнвтсрчтптсбвс
1234567
891011121314
15161718192021
22232425262728
293031
Купить.
Можно в кредит на 90 дней!
Навигация
»» RSS
Главная | Форум | Новости | Подписка на новости | Темы новостей | Добавить новость | Каталог файлов | Карта файлового архива | Публикации | Вопросы и ответы | Опросы | Контакты | Рекомендовать | Анкета пользователя | Чат | BestMaker | Викторина | Архив новостей | Карманный оракул | Поиск по сайту с помощью Яндекс | Поиск по сайту с помощью Google | Фото дня | Для души | Погода на 3 дня | IndexCat | IndexTop | Map_Pages | Весь Оракул

Rambler's Top100

Генерация страницы: 0.084 сек. и 18 запросов к базе данных за 0.007 сек.
Web site engine code is Copyright © 2006 by SLAED CMS. All rights reserved.