В предыдущей статье мы узнали о том, как пользоваться объектами. Теперь мы разберем некоторые эффекты, которые дает нам jQuery.
1. Выдвижная панель
Начнем с одного из самых простых примеров: Slide panel. Когда-то давно у нас был показан пример ее реализации. Однако теперь, мы рассмотрим этот пример подробнее.
В начале создаем html код:
Добавляем css стили:
#panel {background: #754c24;height: 200px;display: none;}
.slide {margin: 0;padding: 0;border-top: solid 4px #422410; background: url(files/slid.gif) no-repeat center top;}
.btn-slide {
background: url(files/ar.gif) no-repeat right -50px;
text-align: center;color: #fff;
width: 144px;height: 31px;padding: 10px 10px 0 0;margin: 0 auto;
display: block;font: bold 120%/100% Arial, Helvetica, sans-serif;
text-decoration: none;}
.active {background-position: right 12px;}
Создаем оболочку для нашего кода:
$(document).ready(function(){
});
Панелька будет выдвигать при клике на объект с классом btn-slide.
$(document).ready(function(){
$(".btn-slide").click(function(){
});
});
Привязываем к объекту определенный effect. В данном случае мы будем использовать slideToggle (скорость: «slow») и toggleClass.
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
Если #panel имеет display:none;, то этот объект плавно выползет вниз. Если же display:block;, то объект плавно поднимется вверх и исчезнет.
Строчка «$(this)» озночает, что действие будет происходить с объектом на который кликаем «.btn-click». А toggleClass добавляет или убирает определенный класс. В нашем случае — это active.
2. Эффект исчезновения
Html оболочка:
Блок
Текст внутри блока
Удалить
Когда мы кликаем по тексту «Удалить«, будет найден родительский элемент «<div class=»pane»>», и его прозрачность будет медленно изменяться от «opacity= 1.0» до «opacity=hide» со скоростью «slow»:
$(document).ready(function(){
$(".pane .delete").click(function(){
$(this).parents(".pane").fadeOut("slow");
});
});
Еще один хороший эффект.
Весь мануал по эффектам вы сможете найти в документации jQuery.
Сегодня мы рассмотрели два примера реализации эффектов на jQuery. Выползающую панель и плавное исчезновение. Два хороших примера для освоения.
Ответить | Цитировать
При выключенном sef ссылка <a href=»#» выглядит как http://сайт.ру/# и спойлер открывается
а при включённом sef — http://сайт.ру/страница.html/# то есть к ссылке добавляется «страница.html» и спойлер неработает.
Скажите пожалуйста как решить?
Ответить | Цитировать
Ответить | Цитировать
если включить в админке Joomla дружественных ссылок — SEO, ссылки становятся типа /content/blogcategory/35/75/ вместо стандартных /index.php?option=com_content&view=article&id=23 и страницу при этом подбрасывает вверх,
то есть ссылка на спойлер в jquery изначально имеет вид <a href=»#» и при наведении отображается так — http://site.ru/#, спойлер работает нормально — выдвигается панель.
Но стоит в админке включить SEO — к ссылке добавляется дружественное название страницы: http://site.ru/content/blogcategory/35/75/#, с такой ссылкой страницу подбрасывает вверх.
Подстановка “javascript:void(0);” и “javascript:;” вместо «#» в <a href=»#» ни к чему не приводит.
Ответить | Цитировать
Видимо вы где-то делаете ошибку, потому что, повторюсь «скрипт не использует привязку к якорю».
Ответить | Цитировать
Ответить | Цитировать
$(document).ready(function(){
$(‘.spoiler’).hide()
$(‘.pressit’).click(function(){
$(this).next().slideToggle(«slow»)
})
})
Нажми меня
Содержимое спойлера
Подскажите, как сделать, чтобы при первом клике панель выдвигалась и больше назад не задвигалась при последующем нажатии?
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать