Делаем простейший спойлер
Простите, но не смог придумать как назвать спойлер на более русский лад, если есть идеи пишите.
Суть спойлера состоит в том что бы разворачивать полный текст из анонса, будет проще если вы увидите это на примере.
Реализация спойлера
Способ реализации прост, jquery скрывает нужный нам блок с текстом, вместо него ставиться ссылка при нажатии на которую текст будет появляться.
Вот заготовка с текстом:
<p>Это основная часть текста<span class="spoiler">, а эта часть скрыта.</span></p>Подключаем библиотеку «jquery» и настраиваем ее действия:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("span.spoiler").hide();
$('<a class="reveal">Читать дальше>></a> ').insertBefore('.spoiler');
$("a.reveal").click(function(){
$(this).parents("p").children("span.spoiler").fadeIn(2500);
$(this).parents("p").children("a.reveal").fadeOut(600);
});
});
</script>Готово! Всем приятного вечера ^_^
Ой как классно, как раз он мне только что и понадобился.
Осталось понять как умное php обрезание сделать.
Написал, скрипт обрезает 1 предложение. Легко можно изменить на обрезание по новой строки.
$count_arr) $max_chars2 = $count_arr;
else $max_chars2 = $max_chars;
for ($i = 0; $i<$max_chars2; $i++) {
$comment .= $arr[$i].».»;
}
if ($max_chars2 != $count_arr) $comment_content .= «…»;
print $comment; //Обрезание
for ($i =$max_chars ; $i
$(this).fadeOut(600); // должно работать.
Написал, скрипт обрезает 1 предложение. Легко можно изменить на обрезание по новой строки.
Только хорошо бы иметь возможность обратно свернуть.
Ну это легко делается по этому же принципу ;-)
спасибо, забавный пример :)
:-) — вот он, простейший спойлер!
Извиняюсь, [font color="white"]:-)[/font]
Ну а что насчет оратного сворачивания спойлера?
Может кто-то напишет что надо изменить в скрипте чтобы обратно сворачивалось при нажатии на ссылку с class=»reveal»?
А как сделать спойлер, который будетподгружать информацию после его раскрытия? Вот страница загружена,спойлерзакрыт, юзер кликает на спойлер и происходит подгрузка того, что внутри.
Спасибо за помощь.
заместо fadeIn(Out) как у мну сделано
bla|bla
$(».slidedown»).click (function(){$(»#t_video»).slideToggle(»normal»);});
примерно вот так $(»#mydiv»).load(»/ajaxtest.php»);
у меня не получается поставить спойлер..
Я не разбираюсь в скриптах, распиши, пожалуйста, поподробнее, что и куда надо вставить, чтобы все заработало. Буду премного благодарен!!
Действительно будьте добры подробнее как сделать что бы обратно сворачивалось.
В html.
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display==»none»){
e.style.display=»block»
} else {
e.style.display=»none»
}
return true;
}
Надпись в спойлере!
Ах да, совсем забыл. В конце каждого скрываемого текста необходимо поставить следующую конструкцию:
Сделал кнопку скрытия:
Но пока остался 1 минус – некорректно работает при 2х и более спойлеров на странице. Как исправить пока не знаю.
В чем разница с первоисточником: в теле html документа изменено содержимое тега , в конце каждого стиха добавлены теги (для кнопки «скрыть») и, соответственно, в style.css добавлен стиль на новую кнопку.
без jquery:
function blarg(id) {
var obj = document.getElementById(id);
if( obj.style.display == «none» ) { obj.style.display = «block»; } else { obj.style.display = «none»; }
}
галерея фоток
галерея фоток
без jquery:
[Spoiler]
ГГ… Спасибо))
Вот тут(http://szenprogs.ru/blog/spojler_na_osnove_jquery/2009-10-28-71) спойлер лучше. Закрывается при нажатии на ту же ссылку, от которой и открывается.