Спойлер для сайта ucoz - Форум о сайтостроении


  • Страница 1 из 1
  • 1
Форум о сайтостроении » Форум аниме клона » Яваскрипты - Фреймворки - Слайдеры и прочие фени » Спойлер для сайта ucoz
Спойлер для сайта ucoz
Alexiya Дата: Понедельник, 06.04.2015, 19:32 | Сообщение # 1
Группа: Администраторы
Сообщений: 179
Репутация: 11
Статус: Offline
Спойлеры для сайта используют для компоновки информации страниц. И зачастую чтобы не перегружать своих пользователей информативностью сайта вебмастера убирают второстепенную информацию в спойлеры.

В данной теме мы рассмотрим скрипт простейшего спойлера, который поддерживает все платформы cms, включая ucoz.
И для начала мы рассмотрим разметку спойлера

Код
<!--dle_spoiler--><div class="title_spoiler">
<a href="javascript:ShowOrHide('asd01')">
<!--spoiler_title--><div class="catsTd1"><b>Заголовок спойлера</b> </div>
<!--spoiler_title_end--></a></div>
<div id="asd01" class="text_spoiler" style="display: none;">
<!--spoiler_text-->
текст спойлера
</div></div><!--spoiler_text_end--><!--/dle_spoiler-->

Как мы видим разметка имеет css классы и с помощью них вы можете задать любой вид спойлера для вашего сайта, а мы приступаем к изучению скрипта, с помощью которого наш спойлер будет открывать или закрывать информационный текст при нажатии на заголовок.

Код
<script type="text/javascript">
function initEffects()
{
heightEffect = new fx.Height($("contentHeight"), {duration:750,    
transition:fx.cubic};);
}
       
function ShowOrHide(d1, d2) {
if (d1 != '') DoDiv(d1);
if (d2 != '') DoDiv(d2);
}
       
    function DoDiv(id) {
    var item = null;
    if (document.getElementById) {
    item = document.getElementById(id);
    } else if (document.all){
    item = document.all[id];
    } else if (document.layers){
    item = document.layers[id];
    }
    if (!item) {
    }
    else if (item.style) {
    if (item.style.display == "none"){ item.style.display = ""; }
    else {item.style.display = "none"; }
    }else{ item.visibility = "show"; }
    }
</script>

Данный скрипт мы можем вывести отдельно от html разметки и подключить его

Код
<script src="http://anime-clone.my1.ru/jss/clon_spol.js" type="text/javascript"></script>

Пример спойлера

p/s Будьте внимательны при использовании нескольких, однотипных спойлеров на одной страничке и каждому из них задайте свой идентификационный номер! Например для первого asd01, для второго asd02 и т.д.


аниме топ сайтов + статья о вашем сайте
Оставь на форуме 50 сообщений и получи анкорную ссылку в подписи!
 
Форум о сайтостроении » Форум аниме клона » Яваскрипты - Фреймворки - Слайдеры и прочие фени » Спойлер для сайта ucoz
  • Страница 1 из 1
  • 1
Поиск:



Copyright Аниме Клон © 2020

Привет!
Меню пользователя
Суббота, 15.08.2020, 08:47

Приветствую Вас Гость

Главная | Регистрация | Вход | RSS