Понедельников НЕТ!
Регистрация или вход Регистрация или вход Избранное на этом сайте | Главная | Анкета | Рекомендовать | Обратная связь | В избранное | Сделать домашней
Скачать 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
Публикации
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
Прочитано: 23731 раз
[ Назад | Начало | Наверх ]
Комментарии

Serg_pnz
Дата: 13.11.2009 | Комментарий: 5
Serg_pnzBugsTracker, а стили в тему добавил?
Код
1
2
.spoil_title { background-color: #f96; cursor: pointer;}
.spoil_body { background-color: #9a6; display: none;}


Еще есть вероятность, что конфликтуют с календарем переменные.
Посмотреть бы в работе...
Не все кальсоны с оторванными пуговицами - брюки. © Serg_pnz
"...даме водки? Это чистый спирт!" © кот Бегемот
BugsTracker
Дата: 13.11.2009 | Комментарий: 4
BugsTrackerИ на всякий случай цепляю скрипт

Прикрепленные файлы:

Скачать: 1.19 KB




_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
отредактированно 13.11.2009г.
BugsTracker
Дата: 13.11.2009 | Комментарий: 3
BugsTrackerhttp://klenovhram.ru построен на Open Slaed 1.2, в данный момент используется mootools 1.2, пробовал mootools 1.11, получается еще интереснее: при открытии сайта спойлер открыт, после клика закрывается и уже не открывается на последующие клики.
Serg_pnz
Дата: 13.11.2009 | Комментарий: 2
Serg_pnzBugsTracker, дайте ссылку на проект или прикрепите наработки к посту, что бы на денвере можно было протестировать.
Не все кальсоны с оторванными пуговицами - брюки. © Serg_pnz
"...даме водки? Это чистый спирт!" © кот Бегемот
BugsTracker
Дата: 12.11.2009 | Комментарий: 1
BugsTrackerчто-то финт ушам не работает у меня на IE8 WinXP, спойлер изначально открытый, закрывается после второго клика, интересно, что в Вашем примере работает все нормально

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
отредактированно 12.11.2009г.
Всего 25 на 3 страницах по 10 на каждой странице
[<<] [ 1 | 2 | 3 ]
Вы не можете отправить комментарий анонимно, пожалуйста зарегистрируйтесь.
Календарь 3 в 1
- М - Г + Г + М
Июль, 2025
пнвтсрчтптсбвс
123456
78910111213
14151617181920
21222324252627
28293031
Купить.
Можно в кредит на 90 дней!
Навигация
»» RSS
Главная | Форум | Новости | Подписка на новости | Темы новостей | Добавить новость | Каталог файлов | Карта файлового архива | Публикации | Опросы | Анкета пользователя | Чат | BestMaker | Викторина | Архив новостей | Карманный оракул | Поиск по сайту с помощью Яндекс | Поиск по сайту с помощью Google | Фото дня | Для души | Погода на 3 дня | IndexCat | IndexTop | Map_Pages | Весь Оракул


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