jquery ui dialog 销毁删除html元素，清除缓存

最新推荐文章于 2024-01-13 18:09:57 发布

原创最新推荐文章于 2024-01-13 18:09:57 发布 · 623 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery ui #dialog #close #destroy #缓存

jquery ui 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用jQuery UI Dialog实现的角色设置功能的具体实现方式，并针对Dialog标题栏显示HTML内容的问题提供了解决方案。此外，还展示了如何加载内容、设置对话框样式以及处理关闭事件。

$(this).dialog("destroy").empty();

<div id="dlgCheckRole" class="hide"></div>

//解决jquery ui dialog 标题为html显示样式问题
$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
    _title: function(title) {
        if (!this.options.title ) {
            title.html("&#160;");
        } else {
            title.html(this.options.title);
        }
    }
}));

//设置角色
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();
	    }
	});
}