В предыдущей статье мы узнали о том, как пользоваться объектами. Теперь мы разберем некоторые эффекты, которые дает нам 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”)
})
})
Нажми меня
Содержимое спойлера
Подскажите, как сделать, чтобы при первом клике панель выдвигалась и больше назад не задвигалась при последующем нажатии?
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать