Спойлер на основе 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
Категория:Скрипты
Просмотрено:38890
Рейтинг: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:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Каким файл-хостингом вы пользуетесь?
Всего ответов: 411
Статистика
Valid HTML 4.01 Transitional

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



Онлайн всего: 5
Гостей: 5
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2019 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz