Вредоносное ПО (malware) - это назойливые или опасные программы,...
Спойлер – это блок с информацией, который изначально скрыт от пользователей и появляется лишь тогда, когда пользователь нажмет на определенную кнопку. На моем сайте в виде спойлера сделаны ПРАВИЛА добавления комментариев. Если нажать на слово ПРАВИЛА, которое выделено, то ниже откроется блок с правилами.
Как писал Выше, покажу несколько способов, которые по своей сути похожи, но используют разные скрипты и осуществляют разную анимацию. Ниже представлены примеры.
Давайте по порядку разберем каждый из способов, чтобы Вы могли применить один из них у себя на сайте. Но перед тем как это сделать, давайте определимся с библиотекой jquery. Если вы ранее подключали ее, то приступайте к просмотру способов, если нет, то в шапке или подвале подключите.
Теперь поехали по порядку.
Способ №1По сути самый простой из способов, при нажатии блок моментально появляется. При повторном нажатии моментально исчезает. Все просто. Данный способ использую и я.
Добавляем очень простенький скрипт. Его можно добавить непосредственно в то место где хотите вывести блок, можете подключить в шапке или подвале, а можете поместить его в файл, который потом подключить к сайту, опять же, где угодно.
$(document).ready(function(){ $(".spoiler-body").hide(); $(".spoiler-title").click(function(){ $(this).next().toggle()}); });
Скрипт работает с блоком у которого присвоен класс spoiler-body и показывает его когда будет совершено нажатие на кнопку, блок или ссылку, в общем что угодно, у чего присвоен класс spoiler-title . Для показа блока, скрипт использует метод toggle .
Спойлер Показать/скрыть Скрытый текст, который появится при наведении
Кнопкой, которая будет открывать станет текст внутри тега b , как и говорил, можете использовать любой тег.
Ну и присвоим минимальные стили. Главный параметр - это display:none у блока, который будет скрытым. Это обязательное условие, иначе не будет работать.
Spoiler-title{cursor:pointer;} .spoiler-body{display:none;background:#f1f1f1;}
Больше ничего не нужно, все должно работать. Есть еще один момент. Можно сделать эту анимацию немного плавнее. Для этого в скобках после метода toggle
добавьте значение в миллисекундах.
Например: toggle(500)
. Теперь открытие блока будет происходить не моментально, а пол секунды 0,5. Открывающийся блок появится по диагонали от верхнего левого угла к нижнему правому. Это Вы можете увидеть в примере выше.
Для этого метода и для всех остальных, будут использоваться все те же блоки и классы, поэтому я не буду расписывать все заново. Отличаться будет лишь сам скрипт.
Данный способ плавно открывает блок и он появляется сверху вниз. Для появления, скрипт использует метод slideToggle .
$(document).ready(function(){ $(".spoiler-title").click(function(){ $(this).parent().children(".spoiler-body").slideToggle(); return false; }); });
Тут как и в первом варианте можно изменить время анимации. По умолчанию его значение равно 400 миллисекунд. Если желаете ускорить или замедлить, то в скобках добавьте значение.
Например: slideToggle(600)
.
Этот способ по сути как и второй, стой же анимацией, но в нем есть одна интересная фишка. Меняется кнопка на которую нажали для открытия блока. В примере вы видели, это просто текст - Показать текст
который при открытии блока, меняется на Скрыть текст
.
Если добавить фантазию, то можно вместо текста добавить картинку или блок, который украсить стилями. Используется в этом способе, следующая функция.
$(document).ready(function(){ $(".spoiler-body").hide(); $(".spoiler-title").click(function(){ $(this).toggleClass("opened").toggleClass("closed").next().slideToggle(); if($(this).hasClass("opened")) { $(this).html("Скрыть текст"); } else { $(this).html("Показать текст"); } }); });
Изменить время анимации можно по тому же методу, что и во втором способе.
В принципе все, это три основных метода, которые я хотел показать. Какой именно Вам подходит, решать Вам. Теперь Вы сможете без проблем организовать у себя блок, который появляется после нажатия на кнопку.
А Вы используете спойлеры у себя на сайте и для чего?
На этом все, спасибо за внимание. 🙂
Часто в наших проектах нужно привязать определённое действие к действию пользователя. Например при нажатии левой кнопки мыши на определённом диве (блоке) меняется цвет этого блока. Вообще нажатие левой кнопки мыши называется click. Для обработки этого события в основном используется javascript и jquery, но так же есть возможность и с помощью css клик отследить. Об этом мы и поговорим в данном посте. Возникает конечно законный вопрос, зачем ослеживать средствами css click, всё прекрасно работает и с помощью javascript. Но если в браузере пользователя js отключен, то функционал сайта будет не полный, а клик css будет работать всегда. Есть несколько методов обработать событие клик css. Первый из них "checked"
Метод "checked"Для начала напишем html и css код.
click me
Если фон красный то чекбокс выбран
Чекбокс выбран
.box{ width: 200px; height: 100px; background-color: crimson; position: relative; z-index: -10;/*делаем самым нижним слоем*/ margin: 0 auto; margin-top: 50px; } .noncheck1, .noncheck2, .noncheck3{ width: 200px; height: 100px; display: block; position: relative; background-color: lightgrey; z-index: 10px;/*самый верхний слой*/ } .check{ width: 200px; height: 100px; display: block; position: absolute;/*благодаря абсолютн. позиц. смещён под верхний слой*/ top: 1px; left: 1px; z-index: -1;/*средний слой*/ } label{/*кнопка*/ font-size: 23px; display: block; } input{/*скрываем чекбокс*/ display: none; } input:checked ~ .box .noncheck1{/*скрываем верхний слой при чекед, виден средний слой-текст и нижний слой*/ display: none; }Давайте разберёмся с кодом. У нас три блока.box, .noncheck1, .check. Все они спозиционированны относительно друг друга так что, блок.check находится под.noncheck1. CSS кнопок не стал выкладывать в листинг так как он не важен. И вот начинаем разбираться с методом "checked". Метод основан на использовании элемента checkbox и его атрибута checked. Мы нажимаем на чекбокс и его состояние переходит в чекед. К этому событию с помощью селекторов css "~" или "+" мы привязываем изменение чего либо. Например изменение цвета текста или фона определённого элемента. В примере мы выбираем чекбокс и в диве.box див.noncheck1 становится невидимым (display: none), мы можем видеть див.check. Для того, что бы оформить переключатель состояния фона в виде кнопки мы присваиваем нашему чекбоксу label и уже из него создаём кнопку. Теперь нам чекбокс не нужен (у нас есть кнопка) и мы его скрываем (display: none)
Метод "target" On Off .noncheck2:target{ display: none; }Метод таргет работает по такому принципу. Мы создаём кнопку.butt2 с сылкой On. В ссылке мы назначаем хэш тег "#On". При нажатии на ссылку в виде кнопки с хэштегом происходит переход к диву с id="On". Этот див попадает в target. Происходит активация псевдокласса target. У нас на это событие повешено скрытие дива.noncheck2 так же за счёт display: none. При нажатии на другую ссылку-кнопку див уходит из таргета, так как таргет переходит на другой блок. Див.noncheck2 опять появляется.
Mетод "tabindex" On Off .butt4:focus ~.box .noncheck3 { display: none; }Данный метод основан на использовании атрибута tabindex. Он заключается в том, что некоторым элементам вебстраницы мы можем с помощью tabindex задать фокус ввода. Элемент получает событие focus (.butt4:focus) , которое можно обработать средствами css. Мы используя селектор соседей "~" назначаем элементу.noncheck3 состояние display: none, когда у нас происходит событие.butt4:focus. Когда у нас фокус переходит с кнопки на другой элемент страницы.noncheck3 возвращается в изначальное состояние.
Практически на каждом сайте Вы можете увидеть кнопки - Подробнее, Информация, Открыть/Скрыть информацию и подобные им. При нажатии на них плавно раскрывается блок с соответствующей информацией. Как это реализовать?
Достаточно просто. При помощи JS (библиотеки jQuery). Подключим её с сервера Google:
Теперь пример целиком. Чтобы не разбирать его по частям и не путать Вас, прокомментирую все основные моменты прямо в нём.
$(document).ready(function() {
$("A#trigger").toggle(function() {
// Отображаем скрытый блок
$("DIV#box").fadeIn(); // fadeIn - плавное появление
},
function() {
// Скрываем блок
$("DIV#box").fadeOut(); // fadeOut - плавное исчезновение
return false; // не производить переход по ссылке
}); // end of toggle()
}); // end of ready()
Открыть/скрыть информацию
Содержимое скрытого блока
Не забываем, что в данном примере происходит удалённое подключение jQuery. На локалке без доступа в интернет пример работать не будет.
Смотрим результат работы открытия и скрытия блока на jQuery:
Спойлеры
$(document).ready(function(){
$(".spoiler_links").click(function(){
$(this).parent().children("div.spoiler_body").toggle("normal");
return false;
});
});
.spoiler_body {display:none;}
.spoiler_links {cursor:pointer;}
Спойлер №1 показать / скрыть
Текст в первом спойлере
Текст в первом спойлере
Спойлер №2 показать / скрыть
Текст во втором спойлере
Текст во втором спойлере
Пример собран полностью. Нужно лишь только подключение к Интернету, чтобы с Google-библиотек загрузился jQuery.
