Итак, в первой части нашего мини-курса по jQuery для дизайнеров мы разобрали основы работы с jQuery: структуру применения и как обратиться к нужному нам элементу. Давайте теперь применим эти знания на практике. Сегодня мы будем работать над созданием выдвигающейся панели и воссоздадим эффект исчезновения.
[adsense]
Выдвигающаяся панель.
Я думаю вы часто сталкивались с такими панелями — вы нажимаете на ссылку и панель выезжает или прячется.
Когда элемент с классом "btn-slide" нажимается, панель с id="panel" выдвигается и CSS класс "btn-slide" переключается в CSS класс "active". Класс .active меняет положение фонового изображения (кнопка со стрелкой) используя CSS.
Ниже приведу полный текст кода функции:
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active");
});
});
Посмотреть демо
Эффект исчезновения.
Пример покажет вам как сделать эффект исчезновения какого-либо элемента при нажатии кнопки.
Когда <img class="delete"> нажат, он получает доступ к родительскому элементу <div class="pane"> и создает анимацию его медленного исчезновения используя свойство opacity=hide.
Вот полный текст функции:
$(document).ready(function(){
$(".pane .delete").click(function(){
$(this).parents(".pane").animate({ opacity: "hide" }, "slow");
});
});
Посмотреть демо.
Если задумались над созданием интернет магазина или думаете продавать товар через сайт — обратите внимание на скрипт корзины jCart, автор которого Алексей Опанасенко aka Never Lex. Посмотреть на скрипт корзины товаров jCart можно на демо-странице
На этом наш второй урок из мини-курса по jQuery для дизайнеров подошел к концу. В следующем уроке мы рассмотрим эффект смещения и разберем создание меню типа аккордеон. А если вы ищите софт для Android и где скачать приложения для android бесплатно, то обязательно загляните на сайт soft4androide.ru — масса полезных и бесплатных программ.
Уфф.
Люблю такие бложики.
Дельно, и по делу.
Кстати, сделай цикл статей на тему всяких фенечек для wp.
что за фенечки имеются ввиду?) я думал после написания n-ого количества статей о вп сделать этакий сборник рецептов)
И это тоже. 😉
А в IE9 панель не работает.
в IE9 в режиме совместимости должна работать
как оформить код — если у меня на сайте несколько абзацев (типа вопросы-и-ответы) ?
чисто теоретически пронумеровать id=panel и btn-slide классы и отслеживать номера при нажатии кнопки, чтобы номер кнопки совпадал с номером абзаца.
на мой взгляд, лучше использовать готовые модули или плагины. т.к. для q&a систем их огромное множество.
Подскажите как сделать несколько таких блоков на однои странице??? Если не трудно с примером….