Забыли пароль?
Запросите новый здесь.

Автор темы: Truth_Explorer
ID темы: 647
Информация:
Тема содержит 3 сообщения, была просмотрена 2694 раз.
Просмотр темы
PHP-Fusion Russia » Поддержка 7 версии » Народное творчество
 Распечатать тему
Кроссбраузерный Спойлер в любом месте сайта. НЕ bb-код
Truth_Explorer
Итак, предлагаю реализацию спойлера. Его можно использовать не только на форумах, но и в любом месте на сайте. bb-коды НЕ используются.

Пример реализации можно посмотреть на одном из моих сайтов, например здесь http://www.kkm-sp.../scanners/ (нажмите на СПРАВОЧНАЯ ИНФОРМАЦИЯ ПО СКАНЕРАМ ШТРИХКОДОВ)

Сделаем аккуратный и простой спойлер на основе библиотеки jQuery. Спойлер - это способ прикрыть некоторую информацию от глаз посетителя, чтоб не отвлекать его от основного материала. Пользователь может посмотреть, что находится в спойлере одним кликом мыши и так же может его снова закрыть.

Открываем директорию

Скачать исходники  Код
themes/templates


и в header.php прописываем следующий скрипт:

Скачать исходники  Код
echo "<script type='text/javascript'>
  $(document).ready(function(){
    $('.splLink').click(function(){
      $(this).parent().children('div.splCont').toggle('normal');
      return false;
    });
  });
</script></head>n<body>n";





ВАЖНО: прописать скрипт необходимо после объявления jquery.js. В идеале в самом конце, перед закрывающим </head>

Теперь нужно подготовить класс, который будет скрывать содержимое спойлера. Его нужно вписать в файл css-стилей:

Открываем

Скачать исходники  Код
themes/ВАША_ТЕМА/styles.css




и в самый конец добавляем

Скачать исходники  Код
.splCont {
   display:none;border:1px solid #cccccc;padding:3px 5px;
}




Ремарочка: естественно, стиль спойлера можно изменить :)

Теперь всё готово. Для вставки в любое место используем следующий код:

Скачать исходники  Код
<div><a href="javascript://" class="splLink">Спойлер...</a><div class="splCont">
  тут текст, спрятанный внутри спойлера...
</div></div>



Изменил(а) Truth_Explorer, 29.05.2011 13:18
 
yury
не хватает, плюсика, когда спойлер свернут и минусика, когда спойлер развернут. всеже для визуального восприятия это будет понятнее, а то я бы не понял, что его можно развернуть
 
Alipapa
Не надо лишний раз модить header.php, используйте add_to_head().
 
Web

Поделиться этой темой
Социальные закладки: Vkontakte Odnoklassniki Mail.ru Facebook Google Tweet This
URL:
BBcode:
HTML:

Перейти на форум:
Похожие темы
Темы Форум Ответов / Просмотров Последние сообщения
У нас есть простейшая форма заказа дл сайта?  →  Пожелания и предложения 3 / 780 16.03.2020 12:35
Какой плагин PHP-Fusion уместно использовать для создания сайта КВИЗа?  →  Пожелания и предложения 1 / 463 18.02.2020 15:14
Восстановление сайта  →  Книга жалоб и предложений 130 / 60162 24.01.2020 06:23
Дизайн сайта  →  Книга жалоб и предложений 59 / 16374 24.01.2020 06:12
Панель "последние статьи" в зависимости от языка сайта и категории статьи  →  Моды 9 / 655 31.10.2019 22:59
Создание сайта на семерке  →  Платные услуги 1 / 657 22.05.2019 14:10
Мобильная версия сайта  →  Моды 4 / 701 08.03.2019 12:14
Я скачал адаптивные темы с оф.сайта  →  Темы оформления 7 версии 8 / 1613 08.12.2018 10:44
Индекс качества сайта (ИКС) - новый показатель оценки сайта от Яндекс  →  Разное 4 / 1417 20.11.2018 02:29
Добавление стороннего php кода в страницу сайта или панель  →  PHP 5 / 2611 11.11.2018 07:55
Топ 5 пользователей форума
Alex Alex (1,219)   Zaxap Zaxap (1,090)   Vova Vova (877)   Pisatel Pisatel (678)   util util (666)