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

Автор темы: Truth_Explorer
ID темы: 647
Информация:
Тема содержит 3 сообщения, была просмотрена 2311 раз.
Просмотр темы
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:

Перейти на форум:
Похожие темы
Топ 5 пользователей форума
Alex Alex (1,167)   Zaxap Zaxap (1,078)   Vova Vova (877)   Pisatel Pisatel (678)   util util (666)