Як створити панелі, що згортаються, за допомогою jQuery в Dreamweaver

Віджет-акордеон jQuery UI у Dreamweaver дозволяє легко додавати панелі, що згортаються, які відвідувачі сайту можуть відкривати та закривати, не оновлюючи веб-сторінку. Ця функція jQuery дозволяє вам краще використовувати простір на сторінці, відображаючи більше інформації на меншому просторі у вікні браузера.

Ви можете побачити, як складні панелі акордеона містять назву, фотографію та параметри середовища проживання кожного співочого птаха на цьому веб-сайті про природу. В результаті ви можете легко побачити назви всіх птахів на одній сторінці. Щоб переглянути опис будь-якого птаха, користувачеві потрібно лише натиснути вкладку у верхній частині панелі (де з’являється назва птаха), і панель миттєво відкриється.

Фото й опис очеретянки з помаранчевою короною відкриті, а інші на сторінці закриті. Принадність jQuery полягає в тому, що сторінку не потрібно перезавантажувати, щоб панелі відкривалися або закривалися. Клацніть один раз на вкладці, і панель миттєво відкриється. Натисніть іншу вкладку, і ця панель відкриється, коли закриється раніше відкрита панель.

Збірні панелі можна використовувати для відображення тексту та зображень, а також мультимедійних файлів, таких як аудіо, відео та Flash-файли.

Щоб переглянути панель акордеона (або багато інших розширених функцій Dreamweaver), як вона відображатиметься у веб-переглядачі, вам потрібно натиснути кнопку «Перегляд у реальному часі» у верхньому лівому куті робочої області Dreamweaver.

Після створення набору акордеонних панелей за допомогою меню інтерфейсу користувача jQuery у Dreamweaver ви можете змінити ряд параметрів панелі за допомогою інспектора властивостей, як показано в наведених нижче інструкціях.

Виконайте такі дії, щоб створити набір панелей акордеона:

Помістіть курсор на сторінку, де ви хочете, щоб з’явилися панелі акордеона.

Виберіть Вставка→ jQuery UI→ Accordion або клацніть елемент Accordion на панелі Вставка інтерфейсу користувача jQuery.

На сторінці з’явиться група панелей jQuery UI, що складається з трьох панелей.

Виберіть слово « Розділ» у верхній частині кожної панелі та замініть його текстом, який має відображатися в області вкладок панелі.

За замовчуванням текст в області вкладки є простим текстом, але ви можете змінити це, змінивши відповідне правило CSS або відформатувавши текст за допомогою тегів HTML, наприклад тегів заголовків.

Виберіть слово « Вміст» у головній області кожної панелі та введіть текст або зображення, які потрібно відобразити.

Ви можете вставити текст на панель так само, як і будь-де на сторінці. Аналогічно, ви вставляєте зображення в панелі так само, як і будь-де на сторінці: помістіть курсор на панель, виберіть Вставити→ Зображення→ Зображення та виберіть файл GIF, JPEG або PNG, який потрібно відобразити. Ви також можете вибрати файл Photoshop, якщо хочете використовувати Dreamweaver для оптимізації зображень.

Коли ви вставляєте текст на панель, виберіть Редагувати→ Спеціальна вставка, щоб вибрати обсяг форматування, який потрібно зберегти в тексті, який ви вставляєте в Dreamweaver. Обмеження обсягу збереженого форматування може зменшити потенційні конфлікти стилів.

Щоб змінити налаштування панелі, клацніть синю вкладку jQuery Accordion у верхній частині панелей в області дизайну.

Коли ви клацнете синю вкладку, налаштування панелі з’являться в інспекторі властивостей. (Правильне клацання синьої вкладки може бути складним, тому обов’язково клацніть синю область.) Клацніть будь-де на сторінці, і інспектор повернеться до налаштувань за замовчуванням.

Додайте або видаліть панелі за допомогою поля Панелі в інспекторі властивостей.

Щоб додати панель, клацніть знак плюс (+) праворуч від поля Панелі. Щоб видалити панель із набору акордеона, спочатку виберіть назву панелі у спадному списку Панелі в інспекторі властивостей, а потім клацніть знак мінус (@@min).

Ви можете додати ще одну панель, знову натиснувши знак плюс.

Змініть спосіб відкриття панелей за допомогою спадного меню «Подія».

Параметри подій визначають, чи відкриваються панелі, коли користувач натискає вкладку панелі (Клік) або наводить курсор на вкладку панелі (Наведення курсора).

Встановіть інші параметри панелі за бажанням.

Параметри акордеона в інспекторі властивостей є необов’язковими і включають можливість вимкнути будь-які або всі панелі (Вимкнути) та анімувати спосіб відкриття та закриття панелей (розкривний список Анімація).

Виберіть Файл→Зберегти, щоб зберегти сторінку; коли з’явиться діалогове вікно «Копіювати залежні файли», натисніть «ОК», щоб створити всі пов’язані файли.

Щоб функції Spry працювали, ви повинні завантажити ці файли на свій веб-сервер під час завантаження веб-сторінки.

Щоб змінити зовнішній вигляд панелі, наприклад, шрифт або колір тексту, відредагуйте відповідне правило CSS.

Примітка. Ви не можете редагувати відповідні стилі для панелі акордеона, доки сторінка не буде збережена і Dreamweaver не згенерує відповідні файли CSS і JavaScript.

Щоб побачити, як панелі відображатимуться у веб-переглядачі, клацніть піктограму глобуса у верхній частині робочої області та виберіть веб-переглядач, який ви хочете використовувати для попереднього перегляду сторінки.

Коли ви використовуєте комп’ютер для попереднього перегляду сторінки, яка має інтерактивну функцію, яка вимагає JavaScript або іншого програмування, деякі веб-переглядачі, зокрема Internet Explorer, відображатимуть попередження про те, що ви повинні дозволити елементам керування ActiveX переглядати сторінку.

Це попередження системи безпеки, яке з’являється лише тоді, коли сторінка відкривається на тому ж комп’ютері, де вона збережена. Якщо ви опублікуєте сторінку на веб-сервері, а потім переглянете її через Інтернет-з’єднання, ця помилка не відобразиться ні для вас, ні для відвідувачів вашого сайту.