Спойлер на основе jQuery

Скрипты

Рисунок Спойлер на основе jQuery
Спойлер на основе jQuery Спойлер на основе jQuery
оценка: 4.3 из 5
оценок: 101, отзывов: 62
Спойлер...
тут текст внутри спойлера 1...
Спойлер...
тут текст внутри спойлера 2...
Спойлер...
тут текст внутри спойлера 3...
Спойлер...
тут текст внутри подспойлера 1...

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

В самом начале нужно подключить к странице модуль jQuery.

Внимание! Если ваш сайт создан на основе UCOZ, то подключать jQuery не нужно, и вы можете пропустить этот шаг. Остальным дизайнерам рекомендуется узнать, установлен ли у вас плагин jQuery. Если не установлен, то пропишите в разделе HEAD следующий код:

Code
<script type="text/javascript" src="http://szenprogs.ru/scripts/jquery-1.3.2.js"></script>

Теперь jQuery подключен и можно приступать к внедрению скрипта. Код скрипта нужно разместить также в теле HEAD уже после объявления jQuery. Если поставите код перед тегом </head>, то не ошибетесь. Сам код выглядит так:

Code
<script type="text/javascript">
  $(document).ready(function(){
    $('.splLink').click(function(){
      $(this).parent().children('div.splCont').toggle('normal');
      return false;
    });
  });
</script>

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

Code
.splCont{display:none;border:1px solid #cccccc;padding:3px 5px;}

Все подготовительные работы закончены. Сам код спойлера выглядит так:

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

Спойлер можно ставить в любом места страницы. Количество спойлеров на странице не ограничено. Также можно вкладывать один спойлер в другой. Главное, не менять теги и порядок тегов спойлера. Рабочий пример можете увидеть в начале материала.

Удачи всем!

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




Спойлер на основе jQuery
Скрипты
Скрипты, инструкции, справочники


Для работы понадобится jQuery.

rss
Категория:Скрипты
Просмотрено:36647
Рейтинг:4.3/101
Дата добавления:2009-10-28 14:27, Среда
Добавил:Szen
Теги:jQuery, скрипт, спойлер

Мини-форум

№ 02009-10-28 14:27
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Спойлер на основе jQuery".
Гость
№ 1
2009-11-14 23:33 Спам
kick
Аватар участника kick
Очередной раз спасибо. До этого пользовался скриптом без эффектов. Все замечательно. Единственное, что подгружается иногда долго. А так-прикольно)
Роман
№ 2
2009-11-14 23:48 Спам
kick
Аватар участника kick
...беру свои слова обратно. .js закинул на свой сайт. Все нормально со скоростью.
Роман
№ 3
2009-11-26 00:39 Спам
Максим
Аватар участника Максим
Доброго времени суток. У меня к вам вопрос, а вернее просьба. Так как я новичок в данном деле, могли бы вы более детально описать как следует настраивать данный скрипт. (у меня сайт в укозе, хочу скрипт вставить в оформление статей). Заранее благодарен.
Максим
№ 4
2009-11-26 01:42 Спам
Szen
Аватар участника Szen
Максим, детальнее уже некуда. Что именно вам нужно пояснить?
Szen · WWW
№ 5
2009-11-26 10:31 Спам
Максим
Аватар участника Максим
"Если поставите код перед тегом </head>"
Интересует конкретно куда вставлять?
"Его нужно вписать либо в файл css-стилей, либо в тег <style>"
Куда именно в css вставлять даный код?
Максим
№ 6
2009-11-26 12:15 Спам
Szen
Аватар участника Szen
Максим, скрипт нужно ставить в тело HEAD.
По поводу стилей, их ставят ЛИБО в файл css, подключенный к странице, ЛИБО в тег STYLE. Рекомендую поискать в интернете информацию по базовому HTML и изучить.
Szen · WWW
№ 7
2009-11-29 00:25 Спам
Максим
Аватар участника Максим
Благодарю за ответ, но решения я все равно не нашел. Так как по инструкции и книгам вставляю все верно...а на странице спойлер не работает. Не приложу ума в чем дело...
Максим
№ 8
2009-11-29 01:06 Спам
Szen
Аватар участника Szen
Максим, дайте адрес страницы, где установлен спойлер.
Szen · WWW
№ 9
2009-12-01 21:44 Спам
Максим
Аватар участника Максим
Вот ссылка http://animebox.at.ua/publ/26-1-0-157, у некоторых все работает, а у меня нет. Мой браузер Мозила...может в этом причина? (или я все же сделал что то неправильно?)
Максим
№ 10
2009-12-01 22:41 Спам
Максим
Аватар участника Максим
Спасибо за помощь, но все равно не работает.
Максим
Учавствовать в обсуждении "Спойлер на основе jQuery" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Что Вы любите читать?
Всего ответов: 114
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 4
Гостей: 3
Пользователей: 1

Vercblina
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz