Спойлер на основе jQuery
Сделаем аккуратный и простой спойлер на основе библиотеки jQuery. Спойлер - это способ прикрыть некоторую информацию от глаз посетителя, чтоб не отвлекать его от основного материала. Пользователь может посмотреть, что находится в спойлере одним кликом мыши и так же может его снова закрыть.
В самом начале нужно подключить к странице модуль jQuery.
Внимание! Если ваш сайт создан на основе UCOZ, то подключать jQuery не нужно, и вы можете пропустить этот шаг. Остальным дизайнерам рекомендуется узнать, установлен ли у вас плагин jQuery. Если не установлен, то пропишите в разделе HEAD следующий код:
Теперь jQuery подключен и можно приступать к внедрению скрипта. Код скрипта нужно разместить также в теле HEAD уже после объявления jQuery. Если поставите код перед тегом </head>, то не ошибетесь. Сам код выглядит так:
$(document).ready(function(){
$('.splLink').click(function(){
$(this).parent().children('div.splCont').toggle('normal');
return false;
});
});
</script>
Теперь нужно подготовить класс, который будет скрывать содержимое спойлера. Его нужно вписать либо в файл css-стилей, либо в тег <style>:
Все подготовительные работы закончены. Сам код спойлера выглядит так:
тут текст, спрятанный внутри спойлера...
</div></div>
Спойлер можно ставить в любом места страницы. Количество спойлеров на странице не ограничено. Также можно вкладывать один спойлер в другой. Главное, не менять теги и порядок тегов спойлера. Рабочий пример можете увидеть в начале материала.
Удачи всем!
Для работы понадобится jQuery.
| Категория: | Скрипты |
| Просмотрено: | 931 |
| Рейтинг: | 5.0/6 |
| Дата добавления: | 28.10.2009 14:27, Среда |
| Добавил: | Szen |
| Теги: | jQuery, скрипт, спойлер |
Рекомендуем
Дополнительно
Внимание
Все скрипты, инструкции, тесты, статьи и подборки, опубликованные в блоге портала, являются собственностью портала. Администрация портала не несет никакой ответственности за содержания статей и скриптов, но обязуется не публиковать материалы, нарушающие законодательство Российской Федерации, порнографию, инструкции по взлому и вскрытию. Администрация портала сама решает, кому помогать в решении какой-либо проблемы, а кому отказать в помощи. Цитируя наш текст и устанавливая опубликованные скрипты, вы соглашаетесь с тем, что используете продукт, созданный или подготовленный порталом SzenProgs. Портал SzenProgs оставляет за собой право менять инструкции, тесты, записи, подборки и скрипты по своему усмотрению и менять содержимое файлов, залитых на портале.
Любая, полная или частичная, публикация материала, размещенного в блоге портала SzenProgs, на другом стороннем от портала SzenProgs сайте должна сопровождаться ссылкой на источник.
Мини-форум
| № 0 | Среда, 28.10.2009 14:27 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Спойлер на основе jQuery". |
| Профиль |
| № 1 | Суббота, 14.11.2009 23:33 |
kick | Очередной раз спасибо. До этого пользовался скриптом без эффектов. Все замечательно. Единственное, что подгружается иногда долго. А так-прикольно) |
| Профиль |
| № 2 | Суббота, 14.11.2009 23:48 |
| kick | ...беру свои слова обратно. .js закинул на свой сайт. Все нормально со скоростью. |
| Профиль |
| № 3 | Четверг, 26.11.2009 00:39 |
Максим | Доброго времени суток. У меня к вам вопрос, а вернее просьба. Так как я новичок в данном деле, могли бы вы более детально описать как следует настраивать данный скрипт. (у меня сайт в укозе, хочу скрипт вставить в оформление статей). Заранее благодарен. |
| Профиль |
| № 4 | Четверг, 26.11.2009 01:42 |
| Szen | Максим, детальнее уже некуда. Что именно вам нужно пояснить? |
| ПрофильWWW |
| № 5 | Четверг, 26.11.2009 10:31 |
| Максим | "Если поставите код перед тегом </head>" Интересует конкретно куда вставлять? "Его нужно вписать либо в файл css-стилей, либо в тег <style>" Куда именно в css вставлять даный код? |
| Профиль |
| № 6 | Четверг, 26.11.2009 12:15 |
| Szen | Максим, скрипт нужно ставить в тело HEAD. По поводу стилей, их ставят ЛИБО в файл css, подключенный к странице, ЛИБО в тег STYLE. Рекомендую поискать в интернете информацию по базовому HTML и изучить. |
| ПрофильWWW |
| № 7 | Воскресенье, 29.11.2009 00:25 |
| Максим | Благодарю за ответ, но решения я все равно не нашел. Так как по инструкции и книгам вставляю все верно...а на странице спойлер не работает. Не приложу ума в чем дело... |
| Профиль |
| № 8 | Воскресенье, 29.11.2009 01:06 |
| Szen | Максим, дайте адрес страницы, где установлен спойлер. |
| ПрофильWWW |
| № 9 | Вторник, 01.12.2009 21:44 |
| Максим | Вот ссылка http://animebox.at.ua/publ/26-1-0-157, у некоторых все работает, а у меня нет. Мой браузер Мозила...может в этом причина? (или я все же сделал что то неправильно?) |
| Профиль |
| № 10 | Вторник, 01.12.2009 22:07 |
| Szen | Максим, удалите этот код: <script type="text/javascript" src="http://szenprogs.ru/scripts/jquery-1.3.2.js"></script> У вас сайт на UCOZ!!! Он уже подключен системой. А скрипт: <script type="text/javascript"> $(document).ready(function(){ $('.splLink').click(function(){ $(this).parent().children('div.splCont').toggle('normal'); return false; }); }); </script> спустите в самый низ сайта (перед тегом </body>). |
| ПрофильWWW |
bigben(38), оленяка(28), SweetAnnyy(42), MalyshkaSEKSI(50), matrix(31), Alsochins(44), ofigad(27).
Желаем им счастья, здоровья, благополучия, любви и богатства!
С уважением, администрация сайта.
