解决jquery ui dialog 标题为html显示样式问题

骑猪看日落 2022-04-06 12:46 228阅读 0赞

有问题的  
![format_png][]

Using HTML in a Dialog's title in jQuery UI 1.10

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

没问题的  
![format_png 1][]

样例

//设置角色
    function checkRole(userId){
    	var dialog = $("#dlgCheckRole").load(contextPath+"/role/checkRole?userId="+userId).removeClass('hide').dialog({
    		modal: true,
    		title: "<div class='widget-header widget-header-small'><h4 class='smaller'><i class='ace-icon fa fa-check'></i>设置角色</h4></div>",
    		//title: "设置角色",
    		//title_html: true,
    		width: 600,
    		height: 600, //auto
    		buttons: [ 
    			{
    				text: "Cancel",
    				"class" : "btn btn-minier",
    				click: function() {
    					$( this ).dialog( "close" ); 
    				} 
    			},
    			{
    				text: "OK",
    				"class" : "btn btn-primary btn-minier",
    				click: function() {
    					//$( this ).dialog( "close" ); 
    					saveCheckRole();
    				} 
    			}
    		],
    		close: function(){
    			//销毁dialog及内在元素
    	        $(this).dialog("destroy").empty();
    	    }
    	});
    	//设置标题
    	//$('#dlgCheckRole').dialog("option","title", "<div class='widget-header widget-header-small'><h4 class='smaller'><i class='ace-icon fa fa-check'></i> jQuery UI Dialog</h4></div>");
    }

参考：

[https://stackoverflow.com/questions/14488774/using-html-in-a-dialogs-title-in-jquery-ui-1-10][https_stackoverflow.com_questions_14488774_using-html-in-a-dialogs-title-in-jquery-ui-1-10]

[format_png]: /images/20220406/ea85fc4b80a74f3eadd8480eaab9ac48.png
[format_png 1]: /images/20220406/c939ed163ca84cedbf6c3285a23a1bfb.png
[https_stackoverflow.com_questions_14488774_using-html-in-a-dialogs-title-in-jquery-ui-1-10]: https://stackoverflow.com/questions/14488774/using-html-in-a-dialogs-title-in-jquery-ui-1-10