Розглянемо цікавий спосіб показу інформації на сторінках сайту, в народі званий «гармошкою». Подивившись як він працює, думаю, ви зрозумієте, про що йде мова.
У нашому прикладі ми розглянемо два варіанти реалізації — на JQuery а так само Mootools.
Для початку оформимо інформацію належним чином, економимо час — копіюємо її з прикладу:
Question One Sample Text
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus,
commodo lacinia massa diam vel eros. Proin eget urna.
Nunc fringilla neque vitae odio. Vivamus vitae ligula.
This Question is Two
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus,
commodo lacinia massa diam vel eros. Proin eget urna.
Nunc fringilla neque vitae odio. Vivamus vitae ligula.
Another Questio here
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus,
commodo lacinia massa diam vel eros. Proin eget urna.
Nunc fringilla neque vitae odio. Vivamus vitae ligula.
Sample heading
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus,
commodo lacinia massa diam vel eros. Proin eget urna.
Nunc fringilla neque vitae odio. Vivamus vitae ligula.
Sample Question Heading
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus,
commodo lacinia massa diam vel eros. Proin eget urna.
Nunc fringilla neque vitae odio. Vivamus vitae ligula.
Далі приступаємо до реалізацій гармошки.
Перший спосіб це зробити за допомогою JQuery.
JQuery гармошка
Приклад
Прописуємо в заголовку документа наступний код:
$(document).ready(function(){
$(“.accordion h3:first”).addClass(“active”);
$(“.accordion p:not(:first)”).hide();
$(“.accordion h3”).click(function(){
$(this).next(“p”).slideToggle(“slow”)
.siblings(“p:visible”).slideUp(“slow”);
$(this).toggleClass(“active”);
$(this).siblings(“h3”).removeClass(“active”);
});
;});
Перший рядок додає клас “active”, першому тегу який в свою чергу перебувати в блоці div з класом “accordion”, даний клас позиціонує малюнок “іконки зі стрілкою”.
При кліці по заголовку h3 для наступного тега p буде застосований ефект slideToggle, після чого для інших позначок ефект slideUp.
Наступний етап змінюється клас заголовка “active”, після чого даний клас забирається в інших заголовків.
Та й не забудьте про найважливішому моменті, перед цим кодом необхідно підключити і сам фреймворк JQuery.
В коді, описаному трохи вище функціональність досягалася з допомогою JQuery, спробуємо зробити подібне, але з допомогою MooTools More, який в свою чергу використовує плагін Fx.Accordion.
Mootools гармошка
Приклад
Ініціалізація відбувається наступними параметрами:
1. $$(‘.accordion h3’) –клікабельні теги (toggler)
2. $$(‘.accordion p’) – блоки з інформацією
3. {…} – додаткові параметри
Подібним чином, прописуємо в заголовку сторінки наступний код:
var myAccordion = new Fx.Accordion($$(‘.accordion h3’), $$(‘.accordion p’), {
opacity: false,
onActive: function(toggler, element){
toggler.addClass(‘active’);
},
onBackground: function(toggler, element){
toggler.removeClass(‘active’);
}
});
Додав: htmaker, 26.08.2013 р.
(Ще не оцінили)
Завантаження…
Діліться з друзями:
См. також:
Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO
Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript
Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека
Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript
Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript
Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript
Список вибору на JQuery
Рубрика: Html, CSS, Javascript
Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript
Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript
