Джек Херрінгтон. старший інженер з програмного забезпечення, Studio B
DHTML: за і проти
Ось деякі рекомендації:
Лістинг 1 показує код для цієї сторінки.
Велика частина роботи в цьому прикладі виконана за допомогою CSS. Використовуючи атрибут CSS position. можна розташувати вікно поверх тексту сторінки. Атрибути left і top розташовують елемент відносно лівого верхнього кута сторінки.
Вспливаючі вікна
Ще один вид рухомих вікон - це спливаючі вікна. Ви можете використовувати спливаючі вікна для приведення додаткової інформації, коли користувач запросить її. Розгляньте текст, показаний на малюнку 3.
Малюнок 3. Проста текстова сторінка про тварин
Хіба не краще, якщо користувач дізнається більше інформації про жирафа? Текст містить зручну посилання: якщо ви виберете її, то побачите спливаюче вікно, показане на малюнку 4.
Тут ви відкриваєте вікно за запитом та маєте його щодо тексту документа. Код показаний в лістингу 3.
Лістинг 3. Спливаюче вікно в HTML
Ви можете налаштувати вміст спливаючого вікна до того, як воно стане видимим, встановивши член innerHTML на об'єкт popup
Це досить сумісний код. Однак можуть виникнути невідповідності через різницю в значеннях offsetLeft і offsetTop від браузера до браузеру, особливо в сторінках зі складним вкладеним вмістом. Щоб отримати більш точну позицію при читанні складної сторінки, вам може знадобитися рекурсивно додавати значення offsetLeft і offsetTop. використовуючи об'єкт offsetParent щоб отримати батьківський об'єкт для кожного об'єкта при русі вгору по дереву HTML об'єктів.
Спливаючі вікна в PHP
Маючи код DHTML, вам буде простіше користуватися спливаючими вікнами в PHP додатках. PHP код показаний в лістингу 4.
Лістинг 4. PHP код спливаючого вікна
Тут ви поділяєте генерацію заголовка і розташування кожного спливаючого вікна. Сторінка повинна викликати popup_header всередині тега head. потім додати тег
Ця PHP функція popup отримує три параметри: ідентифікатор спливаючого вікна, версію з простим текстом і текст, який повинен спливти, коли обраний елемент. Потім функція формує зображення якірного тега, яке виглядає майже так само як оригінал в версії DHTML.
Ще одна опція для приховування та відображення даних на сторінці - це лічильник. У даній моделі сторінка розбита на дві секції, які можна заховати або показати окремо, використовуючи лічильник. Малюнок 5 показує сторінку з двома секціями з лічильником, кожна з яких спочатку закрита.
Малюнок 5. Секції сторінки з закритими лічильниками
Вибір посилання Open в секції Level One відображає вміст цієї секції, як показано на малюнку 6.
Малюнок 6. Сторінка з відкритим першим лічильником
Замість слів open і closed ви можете використовувати графічні об'єкти. За традицією, ці графічні об'єкти зазвичай являють собою трикутники, які вказують направо для closed. або вниз для open; або знаки плюса і мінуса, де плюс означає closed. а мінус - open. (Думки про те, який підхід краще, сходить до суперечки між Mac і Windows. Лічильники на двох платформах відповідають двом різним варіантам.)
Код в лістингу 5 показує, як працюють ці лічильники:
Лістинг 5. Лічильники в HTML
Механізм лічильника реалізований у функції spin. яка враховує видимість тіла лічильника і інвертує її, змінюючи видимий на прихований, а прихований на видимий.
Ви встановлюєте атрибут height на 0px. коли елемент невидимий, і на auto - коли бачимо. В Internet Explorer коли елемент невидимий, навколишній простір стискається. Але в Firefox коли вміст невидимо, для нього залишається порожній простір. Вам потрібно встановити height на 0px. щоб простір належним чином стислося.
Щоб використовувати графічні елементи замість тексту, щоб висловити відкрите чи закрите стан, переробіть код, який змінює значення innerHTML об'єкта лічильника, щоб задати тег-малюнок замість текстового тега.
Лічильники в PHP
Щоб виконати лічильники в PHP, необхідно слідувати стандартній моделі створення DHTML коду з позицій сервера, укладаючи сегменти HTML у функціях початок і кінець. PHP код показаний в лістингу 6.
Лістинг 6. Лічильник в PHP
Кожна секція вмісту укладена в дужки з викликом до start_spinner і end_spinner. Функція start_spinner враховує два аргументи: ідентифікатор лічильника і його заголовок. Виклик end_spinner закриває тег
Ви могли б помістити вміст лічильника як третій аргумент. Але часто ці секції вмісту взаємопов'язані і, якби ви написали це подібним чином, інтерфейс був би неприємним у використанні. Ця модель укладення вмісту динамічних секцій у функціях "початок" і "кінець" означає, що PHP між ними може бути настільки складним, наскільки ви побажаєте.
Малюнок 7. Ігри, за іменем
Щоб побачити гри, відсортовані за рахунком, виберіть посилання By Score. Список зміниться так, як показано на малюнку 8.
Малюнок 8. Ігри, відсортовані за рахунком
Замість виконання складної сортування з боку клієнта, сайт використовує еквівалент флеш карт: В жодній карті міститься список, відсортований за іменами, в іншій - за рахунком. Вибір посилань ховає одну карту і показує іншу. Код показаний в лістингу 7.
Лістинг 7. Закладки в HTML
Також відбуваються ще деякі цікаві речі. По-перше, ви динамічно змінюєте клас CSS, використовуючи атрибут className. Таким чином, обрана кнопка змінює колір з білого на чорний.
По-друге, знайдіть в CSS names і score. обидва
Цей тип, будучи досить складним і цікавим, до того ж ще і сумісний майже з будь-яким сучасним браузером.
Закладки в PHP
Іншим інструментом при розробці DHTML в PHP є використання буферизації на виході. Буферизація на виході зберігає текст, теги та повтор матеріалів зі сторінки і повертає їх як рядок для подальшого використання. Для реалізації закладок, ви використовуєте буферизацию на виході, щоб зберегти вміст закладки як рядок перед візуалізацією його на сторінку (див. Лістинг 8).
Лістинг 8. Закладки в PHP
PHP код починається з визначення двох змінних: tabs і current_tab. Масив tabs містить значення id. title і html для кожної закладки. current_tab вказує на закладку, створювану між викликами до start_tab і end_tab. Функція start_tab враховує два параметри: значення id закладки і значення title. Потім вона починає буферизацію на виході.
Функція end_tab зупиняє буферизацию на виході і зберігає результуючий HTML в значенні html в current_tab масиву tabs.
Якщо ви подивіться далі, то побачите, що виклики функцій start_tab і end_tab знаходяться навколо вмісту закладок, яке відображається в закладці.
Важливими функціями для візуалізації закладок на сторінці є place_tab_buttons і place_tab_content. Функція place_tab_buttons створює якірні теги, які мають ті ж імена, що і закладки та які, будучи обраними, перемикають закладки. Функція place_tab_content створює теги
Дивіться також
Отримати продукти і технології
- Модернізуйте ваш наступний проект розробки відкритих вихідних текстів пробним програмним забезпеченням IBM. доступним для завантаження або на DVD.