Utilisation de HTML dans le titre d’un dialog dans l’interface utilisateur jQuery 1.10

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

jQuery UI 1.10 a fait en sorte que le titre de la boîte de dialog ne peut être que du texte (pas de HTML) pour empêcher les vulnérabilités de script. Je n’autorise pas les utilisateurs à générer ce titre, alors je voudrais quand même utiliser HTML, principalement pour afficher une icône à gauche du titre.

Je vais poster ma solution à ce problème parce que je n’ai vu personne d’autre demander ou répondre pour le moment. J’espère que cela aidera quelqu’un d’autre ou que quelqu’un d’autre pourrait avoir une meilleure approche.

Plus d’informations sur pourquoi ils l’ont fait: http://bugs.jqueryui.com/ticket/6016

Cela remplacera la fonction utilisée lors de la définition des titres de la boîte de dialog 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); } } })); 

Si vous hésitez à remplacer 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 dialog jQuery, comme ceci:

 $("#element").dialog({ open: function() { $(this).find("span.ui-dialog-title").append("" + subtitle + ""); } }); 

Le ci-dessus parsing le code HTML correctement en contournant la méthode de titre de jQuery. Et comme cela se produit lors de l’événement ouvert, l’expérience utilisateur rest transparente. Je viens de faire ça sur un projet et ça a fonctionné à merveille.