Заголовок / заголовок диалогового окна jQuery UI - пользовательская кнопка

0

Есть ли способ ввести пользовательскую кнопку в заголовок/заголовок окна диалога jQuery UI? Я обычно подавляю кнопку закрытия. В то же время я использую много диалогов, и время от времени пользователям приходится обращаться к информации в другом диалоговом окне (журнале ошибок), когда они слышат звуковое оповещение. По существу, другой диалог доступен только тогда, когда текущий модальный диалог скрыт. Было бы удобно, если бы вы могли оставаться в ненавязчивой кнопке в строке заголовка диалога, чтобы пользователи, желающие это сделать, могли попытаться выяснить, что вызвало предупреждение об ошибках звука.

Положите это другим способом - можно ли захватить кнопку закрытия по умолчанию, изменить ее внешний вид, чувство и функцию? Поэтому вместо закрывающего окна он отображает, скажем, символ справки/вопроса, а при щелчке появляется другое диалоговое окно.

Теги:

2 ответа

1
Лучший ответ

Почему так бывает, что это вполне возможно! Хотя, это немного хакерский...

В объекте диалога нет реальной возможности сделать это, но это можно сделать. Первым шагом является изменение класса кнопки закрытия при создании (как показано ниже). изменение класса.ui-dialog-titlebar-close span позволит вам добавить символ для закрытия (в данном случае значок справки)

$("#dlg").dialog({
    create: function(event, ui) { 
        var widget = $(this).dialog("widget");
        $(".ui-dialog-titlebar-close span", widget).removeClass("ui-icon-closethick").addClass("ui-icon-help");
    }
});

Затем вы хотите, чтобы ваш диалог не закрывался, когда пользователь нажимает на него, поэтому вы можете переопределить параметр beforeClose. Это также делается при создании диалога, как показано ниже. Единственное, что требуется, это то, что метод должен возвращать false, что предотвратит закрытие диалогового окна.

$("#dlg").dialog({
    ...
    beforeClose: function(){
        return HelpDialog();
    }
});
function HelpDialog(){
     //Show your help dialog...   
     return false;
});

Я сделал JSFiddle для этого, чтобы показать это. Надеюсь, это то, что вы искали (или близко к нему)!

Поделиться
  • 0
    Спасибо. Ваш ответ не совсем на 100% - как я объясню ниже - но вы, безусловно, поставили меня на правильный путь, поэтому я принимаю его и отмечаю. Проблема, которую вы пропустили - если вы откроете диалоговое окно справки из beforeClose и вернете false, то вы будете вынуждать пользователя просматривать диалоговое окно справки, даже если он отклонил исходное диалоговое окно, нажав клавишу escape.
  • 0
    Это правда ... Я уверен, что если бы флаг был установлен, чтобы определить, как они закрывают форму, это сделает ... Несмотря ни на что, я рад, что в конце я направил вас в правильном направлении.
Показать ещё 2 комментария
0

Заметка для всех, кто работает в этой теме. Вот мой захват функции закрытия окна

function hijackDialogCloseButton(hlp)
{
 var tbc = $('.ui-dialog-titlebar-close:visible');
 if (0 < tbc.length)
 {
  tbc = $(tbc[tbc.length - 1]);
  tbc = tbc.find(">:first-child");
  tbc.removeClass("ui-icon-closethick").addClass("ui-icon-help");
  tbc.bind('click',function(){useHelp(hlp);return false;});
 }
}

Несколько объяснений в порядке

  • Вызовите это из открытого обработчика событий для диалога.
  • Функция позволяет укладывать модальные диалоги: она изменяет только кнопку закрытия для самого модального диалога
  • В моем проекте я захватываю событие click и вызываю внутренний метод useHelp, который отображает соответствующий URL-адрес справки в отдельном окне. Возможно, вы захотите сделать что-то еще. Если это так, возможно, более целесообразно использовать другое изображение в кнопке закрытия. Вы найдете полный список иконок JQuery UI здесь.
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню