Завдання.Реалізувати можливість згортати(розгортати) довгий текст на сторінці.Нехай на сторінці кілька розділів і кілька абзаців, додамо кнопки, при натисканні на які ми згорнемо або розгорнемо контент.
Щоб отримати таку сторінку, виконаємо наступну розмітку:
Додайте таблицю стилів прямо в заголовну частину сторінки.
Тепер змінимо сторінку за допомогою JavaScript & JQuery.
JQuery працює з об'єктною моделлю документа (DOM).
$("tag") — доступ до тегу tag: $("div") отримає всі теги <div>
$("#id") — доступ до елемента за ідентифікатором id: $("#D1"). отримає елемент з id="D1"
$(".class") — доступ до елемента на ім'я класу: $(".portret") отримає всі елементи з class="portret"
$("*") — доступ до всіх елементів
Після завантаження цієї сторінки броузер сформує наступну DOM модель.
Весь JQuery-код пишеться, як обробка події ready документа, коли «документ готовий», то ми можемо робити щось.
Заповнимо розділи інформацією. Скористаємося методом html( ), який отримує вміст HTML (innerHTML) кожного збігу елемента. Це не стосується XML документів (але з документами XHTML використовувати можна). Подальші команди вписуємо в скрипт замість коментаря, виділеного зеленим кольором.
Тепер до заголовка додамо '!!!' (append) і змінимо колір доданого заголовка (css ("color", "red")) $("div h1").append("!!!").css("color", "red");Змінилася і DOM – модель документа.
Далі самостійно за аналогією отримати таке:
До базових ефектів у jQuery відносяться ефекти приховування та відображення елементів, які досягаються за допомогою методів show(), hide() та toggle().
Метод hide надає елементам властивості стилю display значення none, тим самим роблячи елемент прихованим. Те саме ми могли зробити за допомогою наступного виразу: css('display', 'none'). Метод hide може набувати таких форм:
Наприклад, ми можемо використовувати повільну (hide('slow')) або швидку анімацію (hide('fast')), тривалість яких дорівнює відповідно 600 і 200 мілісекунд.
Метод show відображає елемент, встановлюючи значення для властивості display, яке було до приховання. Наприклад, якщо до приховання елемента у нього було визначено стиль display: inline, то й після відображення він матиме значення inline. Якщо стиль не був визначений явно, то він матиме значення display: block.
Метод show має ті самі форми, що й метод hide:
Метод toggle поєднує функціонал методів hide і show і якщо елемент відображається на сторінці, то йому присвоюється стиль display: none. А якщо елемент прихований і має значення display: none, то він відображається (властивість display отримує те значення, яке було до приховання. Якщо властивість не було визначено явно, воно матиме значення display: block).
Метод toggle має ті ж форми, що і метод hide:
Ефекти ковзання дозволяють нам плавно приховати чи розкрити елемент. Ефекти ковзання реалізовані у вигляді методів slideUp(), slideDown() та slideToggle().
Якщо метод slideUp приховує елемент у напрямку вгору, як би ковзаючи, то метод slideDown плавно розкриває прихований елемент у напрямку вниз.
Метод slideToggle комбінує дію обох методів: якщо елемент прихований, але розкривається, якщо розкритий - ховається.
Якщо все вийшло, додамо обробники для кнопок «згорнути/розгорнути розділи» та «згорнути/розгорнути абзаци» . Скористайтеся анімаційними методами бібліотеки JQuery.
toggle - показати-сховати. Якщо прихований на даний момент — показує, і навпаки
slideDown — згортання
slideUp — розгортання
slideToggle — згортання/розгортання залежно від поточного стану
Допишіть те саме для абзаців.
JQuery дозволяє «обернути» вказаний елемент іншим елементом. Завернем абзаци в елемент і додамо перед текстом абзацу картинку, потім змінимо фон абзацу на салатовий.
Коли спрацьовує обробник події, ключове слово це повертає в DOM елемент, до якого було застосовано задану дію. Раніше ми говорили, що функція $()може отримати будь-який DOM-елемент як аргумент.
Тому, якщо ми напишемо $(this) з обробником події, ми створимо об'єкт Jquery відповідний елементу, і зможемо взаємодіяти з ним також, якби отримали його за допомогою CSS-селектора.
Щоб розібратися з покажчиком, це змінимо у елемента на який він вказує фон на рожевий. Бачите, змінився колір кнопочки, а не абзацу, this – це покажчик на елемент, який викликав подію click. Додайте до скрипту:
$(this).css("background-color","pink");//this відноситься до кнопочки});
Отримаємо сторінку, у якої при натисканні на кнопки «Згорнути/розгорнути» гармошкою згортаються та розгортаються абзаци та розділи.
Додайте до скрипту обробку натискання кнопки А, тепер натиснувши її буде змінено властивість location.href , яка показує адресу відображуваної сторінки, і ми підемо на сторінку з другою вправою.
$("#A").click(function(){ location.href = ’2.html’; });
Еще допишите следующее:
$("button").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
Тепер кнопки змінюють стиль при наведенні, але про ці методи ми поговоримо пізніше.
Сьогодні ми розглянемо два найчастіше вживані обробники подій, методи toggle() і hover(); вони обидва передають нам складні обробники подій, тому що вони перехоплюють комбінації дій користувача і відповідають на них, більш ніж однією функцією.
Метод toggle() приймає два аргументи, кожен із яких є функцією. Перший клік елементу виконує першу функцію, наступний клік – другу. Ці дві функції відповідно чергуються за кожним кліком. Тепер розмітка виглядає так:
