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

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

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

Коли ви створюєте панелі з вкладками за допомогою віджета інтерфейсу користувача jQuery у Dreamweaver, ви можете вказати порядок вкладок, ефективно керуючи тим, який вміст з’являється під час першого завантаження сторінки.

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

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

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

На сторінку вставляється панель із вкладками, а відповідні файли CSS відображаються на панелі джерела конструктора CSS.

У головній робочій області виберіть по черзі текст Tab1, Tab2 і Tab 3 , а потім замініть кожен заголовок вкладки текстом, який потрібно відобразити в області вкладок панелі.

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

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

Якщо вибрано окрему вкладку, інспектор властивостей відображає налаштування саме для цієї вкладки.

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

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

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

Наприклад, щоб відредагувати колір або шрифт тексту на вкладках, виберіть поле навколо вкладки, і поле навколо стилю буде автоматично вибрано на панелі вибору конструктора CSS.

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

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

Щоб додати вкладки, натисніть значок плюса (+) в інспекторі властивостей.

У робочій області з’являться нові вкладки.

Щоб змінити порядок вкладок, виберіть назву вкладки в інспекторі властивостей, а потім скористайтеся стрілками в полі «Панелі», щоб перемістити панель.

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

Виберіть панель у спадному списку Панелі, яку потрібно відображати, коли сторінка завантажується у веб-браузер.

Розкривний список відповідає іменам, які ви даєте кожній вкладці в робочій області.

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

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

Натисніть значок глобуса у верхній частині робочої області та виберіть веб-переглядач, щоб переглянути свою роботу у браузері.

Залежно від вашого веб-переглядача, можливо, вам доведеться дозволити елементам керування ActiveX для попереднього перегляду сторінки на вашому комп’ютері.