В предыдущем посте я рассмотрел процесс, необходимый для того, чтобы модальные диалоговые окна WordPress отображались в контексте области администрирования.
Это использует:
- встроенный API WordPress,
- предоставленная библиотека Thickbox,
- и некоторый пример кода для его отображения.
В этом уроке я расскажу о заполнении модального диалога данными. После этого я расскажу, как динамически заполнять данные с помощью Ajax.
Модальные диалоги WordPress: статические данные
В этом посте я предполагаю, что вы прочитали начальный пост в этой серии и у вас есть понимание того, что делает код (хотя еще лучше, если у вас есть какой-то рабочий код в вашей локальной среде разработки).
Тем не менее, давайте поговорим о заполнении мета-окна информацией. То есть мы рассмотрим:
- размещение информации в теле метабокса,
- наполнение заголовка содержанием.
Как только мы это сделаем, мы перейдем к сбору информации с сервера в асинхронном режиме, а затем заполним код, который у нас есть.
1 Определение данных
Добавить контент в метабокс очень просто. Напомним из предыдущего поста; у нас есть HTML-элемент с display: none; значение для его атрибута стиля .
Вот оригинальная суть :
<?php
/**
* A basic plugin page that will eventually be used to demonstrate how to use the
* Thickbox library included with WordPress.
*
* @package Acme
*/
add_thickbox();
?>
<div id="acme-thickbox-demo" class="wrap">
<h1>Acme Thickbox Demo</h1>
<p>Provides an exmaple of how to use the thickbox library within a WordPress plugin page.</p>
<div id="acme-thickbox-content">
<a href="TB_inline?width=600&height=550&inlineId=acme-modal-dialog" class="thickbox">Display The Dialog</a>
<div id="acme-modal-dialog" style="display:none;"></div><!-- #acme-modal-dialog -->
</div><!-- #acme-thickbox-content -->
</div><!-- #acme-thickbox-demo -->Добавить содержимое в модальное диалоговое окно очень просто. Просто найдите элемент acme-modal-dialog и заполните его любой информацией, которую вы хотите отобразить пользователю.
Например, см. этот пример кода :
<div id="acme-modal-dialog" style="display:none;">
<h2>Hello World</h2>
<p>Lucas ipsum dolor sit amet ventress dak jusik chewbacca tenel beru bail anomid hapes mas.</p>
<p>Fel kalee kyle desann. Ozzel p'w'eck jax castell saleucami. Thisspias veila mantell mccool garindan jax.</p>
<p>Barriss kurtzen sing bertroff cody frozarns. Han koon miraluka vau.</p>
<p>
<ul>
<li>Bajic asajj boba raymus dug piell moddell jax darth.</li>
<li>Sio anakin naberrie shistavanen fisto utapau chewbacca aayla.</li>
</ul>
</p>
<p>
Corran axmis kor-uj hutt marek kenobi ansuroer echani. Mirax mara fisto bith tyranus kashyyyk farlander max b'omarr.
Ben dodonna askajian teevan palpatine lobot beru.
</p>
</div><!-- #acme-modal-dialog -->Когда пользователь нажимает на якорь в предыдущем посте (тот, который гласит «Отобразить диалоговое окно» ), модальное окно будет отображаться с содержимым, которое вы видите выше.
Вообще говоря, это должно выглядеть так, как вы видите выше, на основе кода, который обрисован в общих чертах.
2 Установка заголовка
Далее обратите внимание, что в модальном диалоговом окне есть возможность закрыть его всякий раз, когда пользователь заканчивает его чтение. Обратите внимание, что в дополнение к этой возможности в области диалогового окна много пустого пространства.
Вы понимаете, что я имею в виду: это область, которая обычно используется в качестве строки заголовка. Благодаря API Thickbox и его интеграции с WordPress мы можем легко добавить в него наш заголовок. Он может быть динамическим (как если бы информация поступала через Ajax) или статическим.
И поскольку в этом конкретном посте мы работаем со статической информацией, давайте настроим ее. Для этого нам нужно добавить в якорь атрибут title, отвечающий за отображение модала.
Как только вы найдете якорь, отвечающий за запуск отображения (помните, что он содержит текст Display The Dialog ), добавьте к нему атрибут title, чтобы код выглядел следующим образом :
<a href="TB_inline?width=600&height=550&inlineId=acme-modal-dialog" title="Hello World" class="thickbox">Display The Dialog</a>Теперь, когда вы нажмете на якорь, чтобы вызвать отображение, он не только покажет диалоговое окно, как на снимке выше, но также будет содержать заголовок:
Полезно, правда? Но что, если бы он был более динамичным?
Теперь об Аяксе
И динамическая природа — это то, что я собираюсь рассказать дальше. В частности, я хочу пройти через процесс взятия того, что у нас есть, то есть статических данных, и замены их информацией, полученной асинхронно.
То есть пользователь нажимает якорь Display The Dialog, а затем:
- делается запрос на сервер,
- данные извлекаются,
- а затем информация передается в заголовок и области содержимого диалогового окна.
Это немного лучше, чем использование статической информации, и делает приложение более динамичным.