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

gruz
Дата: 12.01.2010 | Комментарий: 15
gruzSerg_pnz, Вот весь код который есть в файле header.php, находящегося в корне сайта -
Код
1
2
3
4
5
<?php
if (!defined("FUNC_FILE")) die("Illegal File Access"); else head();
echo  "\n<script type=\"text/javascript\" src=\"javascripts/mootools-1.2-core.js\"></script>";
echo  "\n<script type=\"text/javascript\" src=\"javascripts/spoil.js\"></script>";
?>

Или я не туда вставил? Или код неправильный?
Serg_pnz
Дата: 12.01.2010 | Комментарий: 14
Serg_pnzgruz, не вижу я в хедере ссылки на js-скрипты
Не все кальсоны с оторванными пуговицами - брюки. © Serg_pnz
"...даме водки? Это чистый спирт!" © кот Бегемот
gruz
Дата: 12.01.2010 | Комментарий: 13
gruzПеренес код
Код
1
2
echo  "\n<script type=\"text/javascript\" src=\"javascripts/mootools.js\"></script>";
echo  "\n<script type=\"text/javascript\" src=\"javascripts/spoil.js\"></script>";

из конфиг_хедера в хедер. модификация наполовину заработала, при добавлении через Новости, Статьи и тд... заголовок спойлера "кликабельный", но текст не рскрывается.
Вот пример - Текст под спойлером.
Где я ошибся?
gruz
Дата: 11.01.2010 | Комментарий: 12
gruzПочему у меня не получается?
1) Вставил в config/config_header
Код
1
2
3
echo  "\n<script type=\"text/javascript\" src=\"javascripts/mootools.js\"></script>";
echo  "\n<script type=\"text/javascript\" src=\"javascripts/spoil.js\"></script>";

2)Вставил в style.css темы
Код
1
2
.spoil_title { background-color: #f96; cursor: pointer;}
.spoil_body { background-color: #9a6; display: none;}

3) Вставил в sources.php в конце // Decode BB
Код
1
2
3
$bb[] = "#\[spoiler=(.*?)\](.*?)\[/spoiler\]#is";
   $html[] = "<div class=\"spoil\"><div class=\"spoil_title\">\\1</div><div class=\"spoil_body\">\\2</div></div>";


Результата нет, где я ошибся? Помогите.
BugsTracker
Дата: 13.11.2009 | Комментарий: 11
BugsTrackerой, спасибо! помогло!
Serg_pnz
Дата: 13.11.2009 | Комментарий: 10
Serg_pnzВспомнил!!! На чате был такой же глюк, в связи с чем пришлось отказаться от "аркадиона" и писать своё.

Вобщем поставь такое начало страницы
Код
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">


И в блоке удали </td></tr>
Код
1
2
3
<div class="spoil_body">
      <img src="http://days.pravoslavie.ru/img/feofan.gif" align="left" hspace=10 vspace=10><p align="justify"><script language="Javascript">print_feofan();</script></p></td></tr>
   </div>

Не все кальсоны с оторванными пуговицами - брюки. © Serg_pnz
"...даме водки? Это чистый спирт!" © кот Бегемот
Serg_pnz
Дата: 13.11.2009 | Комментарий: 9
Serg_pnzПонял - дело в том, что инфа набирается с помощью js и ИЕ не может определить высоту.
Попробую придумать как это пофиксить.
Не все кальсоны с оторванными пуговицами - брюки. © Serg_pnz
"...даме водки? Это чистый спирт!" © кот Бегемот
BugsTracker
Дата: 13.11.2009 | Комментарий: 8
BugsTrackerна главной "Святитель Феофан Затворник. Мысли на каждый день года"
Serg_pnz
Дата: 13.11.2009 | Комментарий: 7
Serg_pnz
Цитата
ссылку на сайт я оставлял, вроде

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

что Вы имеете в виду? ссылку на сайт я оставлял, вроде

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

Rambler's Top100

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