THICKBOX API: МОДАЛЬНОЕ ОКНО В WORDPRESS ADMIN

В WordPress есть инструмент под названием ThickBox, который позволяет создавать модальные окна (всплывающие окна) в административной панели. Например, такое окно можно увидеть при нажатии кнопки «Детали» на странице плагинов. Использовать ThickBox очень просто, и, как правило, настройки достаточно гибкие.

API основан на библиотеке jQuery ThickBox, написанной Кодом Линдли (Cody Lindley). Однако код был переписан специально для WordPress.

ThickBox отлично подходит для тем и плагинов, поскольку, даже если в процессе обновления WordPress будут внесены изменения, модальные окна продолжат работать, и не возникнет проблем с поддержкой и совместимостью.

До версии 3.5 модальное окно медиабиблиотеки на странице редактирования поста работало на основе ThickBox. Несмотря на изменения, технология ThickBox все еще актуальна и рекомендуется для разработчиков.

ИСПОЛЬЗОВАНИЕ THICKBOX

Чтобы создать модальное окно (thickbox), нужно выполнить два действия:

1. Включить скрипт ThickBox в PHP, вызвав функцию add_thickbox().
2. Добавить ссылку в HTML (тег ), которая будет открывать модальное окно. Ссылка должна содержать:
   • Класс thickbox: class="thickbox".
   • Дополнительные параметры запроса в URL (атрибут href).

• width: Ширина модального окна в пикселях.
• height: Высота модального окна в пикселях.
• TB_iframe: Укажите этот параметр и установите его значение в true, если содержимое URL-ссылки нужно загрузить в iframe. Таким образом, URL будет выглядеть так:

  http://example.com?TB_iframe=true&width=600&height=550

  В этом случае содержание http://example.com будет отображаться в модальном окне внутри iframe.

В этом случае нет необходимости создавать элемент модального окна в HTML текущей страницы. WordPress сам все обработает.

• TB_inline: При использовании этого параметра вместо TB_iframe, модальное окно будет показывать заранее созданный HTML-элемент с указанным id в параметре inlineId. URL должен выглядеть так:

  /?TB_inline&inlineId=my_id&width=600&height=550

  В этом случае нужно создать элемент DIV с id=my_id:

  Содержимое модального окна

Важно, чтобы содержимое внутри элемента my_id находилось внутри другого элемента, например, тега

.

Некорректный пример:

ПРИМЕРЫ СОЗДАНИЯ МОДАЛЬНЫХ ОКОН

1. МОДАЛЬНОЕ ОКНО INLINE, СОДЕРЖИМОЕ БЕРУТСЯ С ТЕКУЩЕЙ СТРАНИЦЫ

<?php add_thickbox(); ?>

Открыть модальное окно

В результате мы получаем такое модальное окно:

2. МОДАЛЬНОЕ ОКНО IFRAME, СОДЕРЖИМОЕ БЕРУТСЯ С УКАЗАННОГО URL

<?php add_thickbox(); ?>

Открыть модальное окно

3. ОТКРЫТИЕ МОДАЛЬНОГО ОКНА ЧЕРЕЗ JS ФУНКЦИЮ

Предположим, мы хотим использовать модальное окно inline, но заменить его содержимое с помощью AJAX. К сожалению, API не предоставляет события, когда модальное окно отображается (оно есть для варианта с iframe, но не для inline).

Мы можем использовать JS-функцию tb_show( 'Заголовок окна', URL ), которая является частью API.

Пример:

<?php add_thickbox(); ?>

Открыть модальное окно

И теперь дополнительный JS-код, использующий tb_show() и создающий AJAX-запрос.

jQuery(document).ready(function($){

var $modal = $('#my-modal-id');
var $modalCont = $modal.find('>*');

// шаг 1 - отображение модального окна и выбор редактируемого объекта
window.eduResModalShow = function(that){

    tb_show( 'Заголовок модального окна', '/?TB_inline&inlineId=my-modal-id&width=700&height=500' );

    // AJAX-запрос для загрузки содержимого окна
    $modalCont.html('загрузка...');
    ajaxs( 'edu_results_modal_html', { user_id: 5 }, function(html){
        $modalCont.html(html);
    });

    return false; // для ссылки
}

});

ЗАМЕТКИ

JS-КОД РАСПОЛАГАЕТСЯ В ФАЙЛЕ

/wp-includes/js/thickbox/thickbox.js

HTML-КОД, КОТОРЫЙ АВТОМАТИЧЕСКИ СОЗДАЕТСЯ

Триггером для модального окна могут быть HTML-теги: ,

Для URL и параметры указываются в атрибуте href. Для

jQuery( 'body' ).trigger( 'thickbox:removed' );

jQuery( '#TB_window' ).trigger( 'tb_unload' );

jQuery( '#TB_window' ).trigger( 'thickbox:iframe:loaded' );