Заставляем Drupal выводить messages во всплывающих окнах с помощью JQuery UI Dialog

Далее в читаемой вами сейчас статье будет приведен пример решения задачки по выводу абсолютно ВСЕХ системных сообщений CMS /CMF Drupal во всплывающих попап-окошках. Делать все я буду с помощью программного кода на JavaScript с использованием возможностей библиотеки JQuery UI. Кстати последняя уже частично встроена в ядро движка.

1. Подключите диалоговые окна JQuery UI. Сделать это можно единственной строчкой PHP-кода:

drupal_add_library('system', 'ui.dialog');

В каком хуке? Этого я пояснять не буду, а то получается совсем уж халява, — документацию тоже надо почитывать.

2. В каталоге темы создайте файл скрипта на JavaScript, куда вставьте такие вот строчки:

jQuery(function($) {

    /*** Системные сообщения: ***/
    var messages_block = $('.messages');
    var i = 0;
    var iOpen = false;
    if ($(messages_block).length > 0) {

        messages_block.each(function(i) {
            if (i == 0)
                iOpen = true;
            else
                iOpen = false;
            $(messages_block[i]).dialog({
                autoOpen: iOpen,
                title: 'Сообщение системы!',
                minHeight: '85',
                minWidth: '320',
                resizable: false,
                close: function(event, ui) { 
                    $('#page').show();
                    $(messages_block[++i]).dialog({
                        autoOpen: true,
                        title: 'Сообщение системы!',
                        minHeight: '85',
                        minWidth: '320',
                        resizable: false,
                        open: function(event, ui) {
                            $('.ui-widget-overlay').bind('click', function() {
                                $(messages_block[i]).dialog('close');
                            });
                        },
                        modal: true
                    });
                },
                open: function(event, ui) {
                    $('.ui-widget-overlay').bind('click', function() {
                        $(messages_block[i]).dialog('close');
                    });
                },
                modal: true
            });
        })

    }

});

Пожалуй я вкратце поясню вам, как работает сей механизм. Итак, читаем внимательно:

  • В цикле обходим все имеющиеся на веб-странице сообщения. В данном случае это элементы с классом .messages.
  • Сперва показываем только первое найденное сообщение.
  • Затем при закрытии (close) первого сообщения показываем следующее по списку и т.д.
  • Для определения того, какое окошко будет показано, а какое скрыто манипулируем свойством autoOpen.

Вот так это будет выглядеть:

Drupal и системные сообщения в попап

* * *

Разумеется данный способ не является единственным, и вы можете его использовать или не использовать, — решать вам. Процесс темизации а-ля стилизации таких диалоговых окон на JQuery UI  выходит за рамки приведенного материала.

Опубликовано 12-11-2013 в 14:07


Комментариев к записи: 3

  1. Здравствуйте, у меня возникли проблемы. Сделал все как вы написали, но у меня не работает. Сообщения так же как и обычно выскакивают.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>











Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Blogroll:

  • Где купить видеорегистратор? На сайте www.cifroteka.ru можно купить видеорегистратор Субини. →

Последние твиты