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

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

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

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

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

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

Изберете Insert→jQuery UI→Tabs или щракнете върху елемента Tabs в панела Insert на потребителския интерфейс на jQuery.

В страницата се вмъква панел с раздели и съответните CSS файлове се появяват в панела източник на CSS Designer.

В основното работно пространство изберете на свой ред текста Tab1, Tab2 и Tab 3 и след това заменете заглавието на всеки раздел с текста, който искате да се показва в областта на разделите на панела.

Можете да редактирате съдържанието на разделите само в работното пространство, а не в Инспектора на свойствата. По подразбиране текстът в областта на раздела е удебелен и черен, но можете да промените това форматиране, като промените съответното CSS правило.

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

Когато е избран отделен раздел, инспекторът на свойствата показва настройките конкретно за този раздел.

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

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

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

Например, за да редактирате цвета или шрифта на текста в разделите, изберете квадратчето около раздела и полето около стила се избира автоматично в панела за избор на CSS Designer.

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

Когато щракнете върху синия раздел, настройките на панела се появяват в инспектора на свойствата. Щракнете извън синьото поле и Инспекторът на свойствата се връща към настройките си по подразбиране.

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

В работното пространство се появяват нови раздели.

За да промените реда на разделите, изберете името на раздела в Инспектора на свойствата и след това използвайте стрелките в полето Панели, за да преместите панела.

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

Изберете панела от падащия списък Панели, който искате да покажете, когато страницата се зареди в уеб браузър.

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

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

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

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

В зависимост от вашия уеб браузър, може да се наложи да разрешите на ActiveX контролите да визуализират страницата на вашия компютър.