JQuery <cut> спойлер - добавить "под кат" - модуль библиотека (пример)

Primary tabs

vedro-compota's picture
Submitted by vedro-compota on Mon, 08/24/2015 - 13:57

Forums:

Очень хорошо с указанной задачей справляется вот эта штука (плагин JQuery):
http://plugins.jquery.com/spoiler/

Использовать данный плагин можно так:

Простой пример:

//  блок-перключатель - именно по нему будем кликать
<div class="spoiler" data-spoiler-link="2">
	// в качестве кнопки можно взять. например, картинку (не важно что именно)
	<img src="show.png"  title="Показать доплнительные параметры" alt="Показать доп. параметры">
</div>
// далее блок, который будем скрывать или снова показывать при нажатии на выключатель
<div class="spoiler-content" data-spoiler-link="2"> 
	12343 (какой-то текст)
</div>

ВНИМАНИЕ: блок для "закрытия" выключателем выбирается на основе значения атрибута data-spoiler-link - этот атрибут должен совпадать у блока-выключателя и у скрываемого блока.

Более полный пример:

Теперь приведу пример, где можно регулировать скорость "появления" блока, и вообще "полнофункциональный" -
HTML:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>  Заголовок страницы </title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
</head>
 <body>
<h1>  Заголовок</h1>

// выключатель
<div class="spoiler" data-spoiler-link="2">
    <span>[button]</span>
</div>

// содержимое блока
<div class="spoiler-content" data-spoiler-link="2" style="height: 16px" > 
    <span>text in spoiler</span>
</div>

// подключаем JQuery и  jquery.spoiler.js (локально)
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.spoiler.js"></script>

// активируем плагин спойлера
<script>
	console.log('start spoiler test');
	$(".spoiler").spoiler();
</script>
</body>
</html>

CSS (некоторые из этих свойств точно придётся определить):

.spoiler {
    color: #898;
	left: 0.5m;
	cursor: pointer;
}
.spoiler-active {
    color: #bbb;
    left: 0.5em;
	cursor: pointer;
}

.spoiler-content {
 /* задаём время открытия блока*/
    transition: height 0.9s ease-out 0s; 
}

.spoiler-content-visible{
	height: 120px !important;
	width: 120px !important;
	background-color: #eee;
}

Key Words for FKN + antitotal forum (CS VSU):

  • Log in to post comments
  • 4494 reads