| Нам уже... |
|
 |
| Меню сайта |
|
|
| IP-информер |
 |
|
|
Главная » 2015 » Апрель » 15 » Как сделать на сайте спойлер
21:59 Как сделать на сайте спойлер |
Реализовать спойлер можно при помощи популярной подключаемой библиотеки jquery, написанной на языке программирования Java Script. Она используется для реализации полного взаимодействия языка программирования с HTML кодом разметки страницы.Подключение jquery осуществляется при помощи HTML посредством тега «». Необходимо указать место, где расположен скрипт, и задать его тип:$(document) .ready(function()
Текстовый фрагмент, указанный в рамках определенного абзаца, необходимо заключить в отдельный слой - div, с помощью которого будет осуществляться управление самим спойлером: Шла Саша по шоссе и сосала сушку.
Далее необходимо создать перед всеми div с именем spoil соответствующие кнопки, которые будут сворачивать, и разворачивать текст. Сначала скрывается сам спойлер при помощи стандартной функции «hide()»:$("div[name = ’spoil’]”).hide();Далее необходимо создать для всех спойлеров текст и изображение, которое будет использоваться в качестве фона для кнопок:$("p[name = ’spoilbutton’]”).html("Показать текст”);
Найдите все кнопки на странице и проверьте наличие заголовков первого уровня перед кнопкой. Для этого создайте условие, которое будет искать теги h1 по названию. Текст указанного заголовка переносится в сам div:$("p[name = ‘spoilbutton’]”).each(function() {If ($(this).prev(this).get(0).tagName == "H1” ) {var NewSpoilButton = "”+$(this).prev(this).html()+”Показать текст”;$(this).prev(this).replaceWith("”); $(this).replaceWith(NewSpoilButton); } })
Далее нужно обработать нажатие клавиши мыши при помощи click. Если нажатие обнаружено, то это можно отобразить:$("div[name=’spoilbutton’]”).click(function () {If($(this).next(this).css("display”)==”block”) {
Затем пропишите наследование. В составе div текст находится в абзаце p, содержимое которого помещается в тег span:$(this).children("p”).children("span”).html("Показать текст”);Сверните открытый спойлер. Если он не открыт, то разверните текст. В основе этого шага лежит правило наследования:$(this).next(this).slideUp("normal”);} else { $(this).children("p”).children("span”).html("Скрыть текст”);$(this).next(this).slideDown("normal”);} return false; })
Затем фиксируется само нажатие мыши на кнопке, по которой скрипт будет осуществлять скрытие и разворачивание спойлера. $("p[name=’spoilbutton’]”).click(function () {If ($(this).next(this).css("display”)=”block”) {$(this).next(this).slideUp("normal”);$(this).html("Скрыть”);} return false; });Спойлер готов. Он будет появляться при обнаружении соответствующего DIV-блока.
|
|
Категория: Статьи для начинающего вебмастера |
Просмотров: 393 |
Добавил: evgeny
| Рейтинг: 0.0/0 |
|
|
| Вход на сайт |
|
|
|
