Универсальный обработчик тега «спойлер»
Тег спойлер
В языках программирования 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
Прочитано: 23736 раз |
