Раздер Название темы Ответов Последний
Графика для сайта Shareman 3.70 RUS/2010 0 mandelsonsouggisse
Изготовление контента Нужен контент 10 ali7875
DataLife Engine Проблема регистрации. 1 JimaX
DataLife Engine Модальное окно в DataLife Engine 3 lionprizrak
DataLife Engine Настройка robots.txt 8 Prizrak_2012
Стол заказов на cmsko.ru Мини-чат. 2 JimaX
Общение пользователей Статьи 3 nastroenie
Хостинг TneHost - Хстинг провайдер 10 ali7875
DataLife Engine Установка банеров 9 JimaX
DataLife Engine Помогите с установой. dle95 2 nastroenie
Яндекс Apdate
Апдейты Яndex тИЦ
13.04.2012Последний |
16.02.2012
04.02.2012
Апдейты Яndex выдачи
17.05.2012Последний |
15.05.2012
12.05.2012
Апдейты ЯКаталога
21.05.2012Последний |
18.05.2012
16.05.2012
JimaX: Насчет оптимизации это все зависит от твоего сайта, ну примерная цена хорошей оптимизации от 700 рублей. ab
JimaX: ali7875, уникализировать в каком смысле ? Для поисковиков или для людей, то есть сам шаблон изменить. laughing
ali7875: да и сделать внутреннюю оптимизацию сайта?
ali7875: JimaX: Привет, сколько примерно будет стоить уникализировать шаблон?
lionprizrak: написал на форуме http://cmsko.ru/forum/topic_29
JimaX: lionprizrak,в чате просто не изложишь всю суть поставленного вопроса.
JimaX: lionprizrak, не надо постоянно засорять чат мусором который вы здесь пишите, создайте просто тему на форуме и все, ждите пока ответят. В следующий раз получите Бан. banned
lllekojladka: без \\
lllekojladka: lionprizrak: scroll=\"yes\"
lllekojladka: scroll=\"yes\"
lionprizrak: help_mehelp_mehelp_me
lionprizrak: Мне здесь кто нибудь ответит плиз (Модальное окно в DataLife Engine) А как сделать что бы внутри появлялась справа прокрутка, при большом объёме текста.
Prizrak_2012: JimaX нужна помошь по одному делу .... не бесплатно конечно. если можешь помочь отпишись на ящик мне.
Frenk: lionprizrak, я себе тоже его установил, и нечего не слетело smile-15 просто ты может что то не так сделал fellow
lionprizrak: После установки этого модуля dude Smart Leech у меня слетело подтверждение сайта на yandexe
JimaX: ali7875,тегов noindex будет достаточно, ну мы еще используем модуль dude Smart Leech, для скрытия и обработки внешних ссылок.
ali7875: JimaX: тегов noindex и nofollow хватит или еще что-то надо?
ali7875: JimaX: как правильно отредактировать код в витрине ссылок, чтобы поисковики не ругались?
lionprizrak: (Модальное окно в DataLife Engine) А как сделать что бы внутри появлялась справа прокрутка, при большом объёме текста.
ali7875: nastroenie: для начала нужно в админпанели создать категории, а вообще создай темку в форуме, там проще будет писать))
Информация
Главная страница » DLE » Как сделать спойлер на jQuery
Как сделать спойлер на jQuery
» Просмотров: 1147 » Дата: 22-08-2011, 18:51 » Автор: JimaX
Как сделать спойлер на jQuery

Спойлер — это данное слово не славянское. Спойлером в вебе называют то, что заранее рассказывает нам о том, что по сути должно было быть неизвестным до определенного времени, но появляется под этой завесой. В общем случае, его простая задача просто скрывать/показывать любой объект.

Итак. Спойлер простейший, на jQuery, кроссбраузерный.

<div class="spoiler-wrap">
    <div class="spoiler-head folded">Внимание, спойлер!</div>
    <div class="spoiler-body">
    Текст спойлера
    </div>
</div>

javascript

// Подключаем jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    jQuery(document).ready(function(){
        // Скрываем все спойлеры
        jQuery('.spoiler-body').hide()
        // по клику отключаем класс folded, включаем unfolded, затем для следующего
        // элемента после блока .spoiler-head (т.е. .spoiler-body) показываем текст спойлера
        jQuery('.spoiler-head').click(function(){
            jQuery(this).toggleClass("folded").toggleClass("unfolded").next().toggle()
        })
    })
</script>

Вот такой получился ерундовый бриф-пост. Демо прилагается. Стили для него я взял из известного всем форума phpbb.

Второй способ спойлера на HTML+JS

1.Первым делом подключаем используемую библиотеку jQuery и еще JS приблуду, которая отвечает за плавное сворачивание и разворачивание. Приведенный код нужно разместить на web-странице между

<head>...</head>

Сам код:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"> </script>
<script type="text/javascript">
$(document).ready(function(){
$('.splLink').click(function(){
$(this).parent().children('div.splCont').toggle('normal');
return false;
});
});
</script>

2.Добавляем в CSS-файл строчку, чтобы по-умолчанию спойлер был закрыт:

.splCont{display:none; padding:3px 5px;}

Если у Вас нет CSS-файла или Вы не знаете как его туда вставить, то можно прямо в самом тексте помещаем (главное разместить до спойлера):

<style type="text/css">
.splCont{display:none; padding:3px 5px;}
</style>

3.Далее размещаем между тегами

<body>...</body>

в любом месте код самого спойлера. Для моего примера это код такой:

<a href="javscript://" class="splLink"><strong>Спойлер:</strong> пример</a>
<div class="splCont">
Это примерный текст!
</div>

Ну вот и всё !



Комментарии: 0
 (голосов: 2)
Уважаемый посетитель, Вы зашли к нам на сайт как незарегистрированный пользователь. Мы рекомендуем Вам бесплатно зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.