Как да създадете сгъваеми панели с jQuery в Dreamweaver

jQuery UI акордеон джаджа в Dreamweaver улеснява добавянето на сгъваеми панели, които посетителите на сайта могат да отварят и затварят, без да опресняват уеб страницата. Тази функция на jQuery ви позволява да използвате по-добре пространството на страницата, като показвате повече информация на по-малко място в прозореца на браузъра.

Можете да видите как сгъваемите панели с акордеон съдържат името, снимката и предпочитанията за местообитание на всяка пойна птица в този уебсайт за природата. Резултатът е, че можете лесно да видите имената на всички птици на една страница. За да види описанието на която и да е птица, потребителят трябва само да щракне върху раздела в горната част на панела (където се показва името на птицата) и панелът се отваря незабавно.

Снимката и описанието за оранжево увенчаната камара са отворени, докато останалите на страницата са затворени. Красотата на jQuery е, че страницата не трябва да се презарежда, за да се отворят или затворят панелите. Кликнете веднъж върху раздел и панелът се отваря незабавно. Щракнете върху друг раздел и този панел се отваря, когато се затваря по-рано отвореният панел.

Сгъваемите панели могат да се използват за показване на текст и изображения, както и мултимедийни файлове като аудио, видео и Flash файлове.

За да видите панел за акордеон (или много други разширени функции в Dreamweaver), както ще се показва в уеб браузър, трябва да щракнете върху бутона Live view в горния ляв ъгъл на работното пространство на Dreamweaver.

След като създадете набор от панели акордеон с менюто на потребителския интерфейс на jQuery в Dreamweaver, можете да промените редица настройки на панела, като използвате инспектора на свойствата, както е показано в инструкциите, които следват.

Следвайте тези стъпки, за да създадете комплект акордеон панели:

Поставете курсора върху страница, където искате да се показват панелите на акордеона.

Изберете Insert→jQuery UI→Accordion или щракнете върху елемента Accordion в панела Insert на jQuery UI.

На страницата се появява група сгъваеми акордеонни панели на jQuery UI с три панела.

Изберете думата Раздел в горната част на всеки панел и я заменете с текста, който искате да се показва в раздела на панела.

По подразбиране текстът в областта Tab е обикновен текст, но можете да го промените, като промените съответното CSS правило или форматирате текста с помощта на HTML тагове, като например заглавните тагове.

Изберете думата Съдържание в основната област на всеки панел и въведете всеки текст или изображения, които искате да покажете.

Можете да поставите текст в панел точно както бихте поставили текст навсякъде другаде на страницата. По същия начин вмъквате изображения в панели точно както бихте направили навсякъде другаде на страница: Поставете курсора си в панела, изберете Вмъкване→ Изображение→ Изображение и изберете GIF, JPEG или PNG файла, който искате да покажете. Можете също да изберете файл на Photoshop, ако искате да използвате Dreamweaver за оптимизиране на изображения.

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

За да промените настройките на панела, щракнете върху синия раздел jQuery Accordion в горната част на панелите в областта за дизайн.

Когато щракнете върху синия раздел, настройките на панела се появяват в инспектора на свойствата. (Правилното щракване върху синия раздел може да бъде трудно, така че не забравяйте да щракнете върху синята зона.) Щракнете някъде другаде на страницата и инспекторът се връща към настройките по подразбиране.

Добавете или премахнете панели с помощта на полето Панели в Инспектора на свойства.

За да добавите панел, щракнете върху знака плюс (+) вдясно от полето Панели. За да премахнете панел от комплект акордеон, първо изберете името на панела в падащия списък Панели в Инспектора на свойствата и след това щракнете върху знака минус (@@min).

Можете да добавите друг панел, като щракнете отново върху знака плюс.

Променете начина, по който се отварят панелите, като използвате падащото меню Събитие.

Настройките за събитие контролират дали панелите се отварят, когато потребителят щракне върху раздел на панел (Щракване) или превърти курсора върху раздела на панела (Завъртане на мишката).

Задайте други опции на панела, както желаете.

Опциите за акордеон в Инспектора на свойствата са по избор и включват възможността за деактивиране на някои или всички панели (Деактивиране) и анимиране на начина, по който панелите се отварят и затварят (падащ списък Анимиране).

Изберете File→Save, за да запазите страницата; когато се появи диалоговият прозорец Копиране на зависими файлове, щракнете върху OK, за да генерирате всички свързани файлове.

За да работят функциите на Spry, трябва да качите тези файлове на вашия уеб сървър, когато качвате уеб страницата.

За да промените външния вид на панела, като лицето на шрифта или цвета на текста, редактирайте съответното CSS правило.

Забележка: Не можете да редактирате съответните стилове за панел с акордеон, докато страницата не бъде запазена и Dreamweaver не генерира съответните CSS и JavaScript файлове.

За да видите как ще се показват панелите в уеб браузър, щракнете върху иконата на глобус в горната част на работното пространство и изберете браузъра, който искате да използвате, за да прегледате страницата.

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

Това е предупреждение за сигурност, което се появява само когато страницата се отвори на същия компютър, където е запазена. Ако публикувате страницата на уеб сървър и след това я прегледате през интернет връзка, тази грешка няма да се появи за вас или посетителите на вашия сайт.