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









Интересное в сети
  • Топ 30 лучших средств для посудомоечных машин.
  • Публикации
    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
    Прочитано: 22377 раз
    [ Назад | Начало | Наверх ]
    Комментарии

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

    Rambler's Top100

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