Intereting Posts

Диалоговое окно jQueryUI скрывает кнопку закрытия (X), если заголовок содержит выравнивание по правому краю текста. Как я могу это исправить?

У меня есть следующий пример кода:

  $(document).ready(function () { var myTitle = "
LEFT TEXT
RIGHT TEXT
"; $("#dlgTest1").dialog({ title: '', // new jquery-ui-1.10.2 doesn't allow HTML here autoOpen: false, minWidth: 500, width: 500, minHeight: 200, height: 200, resizable: true, modal: true, show: "blind", hide: "explode", buttons: { "OK": function () { $(this).dialog("close"); } } }).siblings('.ui-dialog-titlebar').html(myTitle); // title goes here $("#dlgTest1").dialog("open").dialog("moveToTop"); });

Этот пример кода открывает диалоговое окно jQuery, в котором отображается текст в строке заголовка с левой стороны и справа, что достигается с помощью myTitle , переменной, которая содержит HTML-код с двумя элементами

.

В предыдущих версиях jQueryUI (например, V1.8.20) я смог напрямую присвоить атрибут title содержимому myTitle и он работал как шарм. Теперь я обновился до версии V1.10.2 и заметил, что заголовок больше не интерпретирует HTML, но вместо этого отображает

... в заголовке. Как вы можете видеть, я использую tweak .siblings('.ui-dialog-titlebar').html(myTitle); пройти через мой HTML-код, который работает в основном.

Но он имеет побочный эффект, который скрывает кнопку (X), используемую для закрытия диалогового windows (этот побочный эффект не встречался в более старой версии пользовательского интерфейса jQuery V1.8.20). Я не могу вернуться к более ранней версии jQueryUI, потому что мне нужны элементы управления, которые зависят от последней версии.

Вопрос: Как я могу избежать того, что кнопка закрытия (X) скрыта выравниванием по правому краю?

Примечание . Значок отображается, если я использую обычный текст вместо текста в формате HTML, поэтому причина не в том, что отсутствует стиль или bitmap.

Я уже всюду смотрел (начиная с http://jqueryui.com/ ), искал в Google и т. Д., Но не нашел решения.

Буду признателен за любую оказанную помощь.


Обновление: (Ответы на комментарии ниже)

  • Я использую тему ui-lightness css без каких-либо изменений
  • Добавление padding-right:20px к атрибуту style выровненного по правому краю div не решает проблему.

Конечная нота:

Обсуждение с вами помогло мне решить эту проблему. Я отправил ответ, который, наконец, работал для меня.

Большое спасибо всем, кто меня поддержал, вы, ребята, действительно здорово! Каждый, кто отправил ответ, получил от меня +1.

    Проблема в том, что вы заменяете html строки заголовка, чтобы удалить кнопку закрытия.

    Измените html() на append() , вам нужно будет отрегулировать поля / отступы, чтобы он выглядел правильно.

     var myTitle = "
    LEFT TEXT
    RIGHT TEXT
    ";

    а также

     }).siblings('.ui-dialog-titlebar').append(myTitle); 

    JSFiddle

    Подход Epascarello предложил с .append(myTitle) вместо .html(myTitle) отлично работает в примере JSFiddle, но, к сожалению, не с настройкой jQueryUI, которую я использую.

    Но следующая функция делает это:

     // Insert HTML formatted title in jQuery dialog V1.10.2 // Parameters: // dialog = reference to jQueryUI dialog, // hmtlTitle = the title with containing HTML to apply to dialog function applyHtmlToDialog(dialog, htmlTitle) { dialog.data("uiDialog")._title = function (title) { title.html(this.options.title); }; dialog.dialog('option', 'title', htmlTitle); } 

    Чтобы использовать его, просто назовите его следующим образом:

     applyHtmlToDialog($("#dlgTest1").dialog(), myTitle); 

    или если вы предпочитаете делать это в нескольких строках:

     var myDiag = $("#dlgTest1").dialog(//... your dialog definition ... ); var myTitle = '
    ...
    '; applyHtmlToDialog(myDiag, myTitle);

    Он правильно вставляет myTitle и рассматривает HTML-коды, содержащиеся внутри.


    NB (Некоторая справочная информация): Это решение было вдохновлено следующей статьей Stackoverflow: Иконки в заголовке диалога jQueryUI .

    Я узнал, что причина такого поведения в том, что команда jQuery была обеспокоена уязвимостью XSS в диалоговом окне, поэтому они специально изменили ее.

    Вы можете узнать больше об их обсуждении здесь , если вам интересно. Следовательно, _title является официальной функциональностью, предоставляемой jQuery, если вы хотите использовать коды HTML в названии. Я считаю, что они выбрали подход, который не так прост, как .dialog({ title: $("... html ...") }) , который я лично предпочел бы (т.е. используя $, чтобы указать, что вы хотите иметь HTML в названии).