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

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
- М - Г + Г + М
Ноябрь, 2017
пнвтсрчтптсбвс
12345
6789101112
13141516171819
20212223242526
27282930
Купить.
Можно в кредит на 90 дней!
Навигация
»» RSS
Главная | Форум | Новости | Подписка на новости | Темы новостей | Добавить новость | Каталог файлов | Карта файлового архива | Публикации | Вопросы и ответы | Опросы | Контакты | Рекомендовать | Анкета пользователя | Чат | BestMaker | Викторина | Архив новостей | Карманный оракул | Поиск по сайту с помощью Яндекс | Поиск по сайту с помощью Google | Фото дня | Для души | Погода на 3 дня | IndexCat | IndexTop | Map_Pages | Весь Оракул

Rambler's Top100

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