Utilisation de HTML dans le titre d'un dialogue dans jQuery UI 1.10

Question

http://jqueryui.com/upgrade-guide/1.10/#changed-title-option-from-html-to-text

jQuery UI 1.10 fait en sorte que la boîte de dialogue propriété ne peuvent être du texte (pas de code html) pour prévenir les vulnérabilités de script. Je ne suis pas pour permettre à l'utilisateur d'entrée pour générer ce titre, je voudrais utiliser le HTML, principalement pour afficher une icône à gauche du titre.

Je vais poster ma solution à ce problème car je n'ai pas vu quelqu'un d'autre, de poser ou de répondre à cette encore. J'espère que ça aidera quelqu'un d'autre, ou quelqu'un d'autre peut avoir une meilleure approche.

Plus d'infos quant à pourquoi ils ont fait ça: http://bugs.jqueryui.com/ticket/6016

Answer 1

Ceci remplacera la fonction utilisée lors de la définition des titres de la boîte de dialogue de l'interface utilisateur jQuery, lui permettant de contenir du code HTML.

 $.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
    _title: function(title) {
        if (!this.options.title ) {
            title.html(" ");
        } else {
            title.html(this.options.title);
        }
    }
}));
 

Answer 2

Si vous hésitez à redéfinir la méthode _title de jQuery, vous pouvez utiliser les méthodes html, append ou similaires sur l'élément title lors de l'événement open de la boîte de dialogue jQuery, comme suit:

 $("#element").dialog({
  open: function() {
    $(this).find("span.ui-dialog-title").append("<span class='title'>" + subtitle + "</span>");
  }
});
 

Ce qui précède analyse correctement le code HTML tout en contournant la méthode title de jQuery. Et comme cela se produit lors de l'événement open, l'expérience utilisateur reste transparente. Je viens de faire cela sur un projet, et cela a fonctionné à merveille.