基于Jquery UI Dialog 的改写

标签：jquery ui dialog 自定义

我最近在做的这个项目是纯粹的js+html5文件，java肯定有涉及，不过现在基本上在使用js和html5的特性。

项目要使用一种类似于dialog的功能，让一部分页面能够弹出来，并且可以移动，当然使用dialog是很不错的选择

但是在真正使用的时候发现，jquery UI的dialog虽然能满足基本的要求但是，有些功能是不能满足，如果自己写这个dialog，显然不太合适，因为jquery只有一点不能满足需求，是要在dialog的右上角多加几个按钮，单纯的一个关闭按钮不能满足需求。因为jquery UI的dialog本身就是基于html了，最先想到的就是修改它的一些属性，最好的方法就是使用几个控件代替关闭按钮，然后给对应的按钮加上监听事件。既然这么想了，就这么做了，最后也实现了。

下面给出最为核心的代码和截图：

先看截图：

修改前：

修改后：

上面就是修改前和修改后的对比图：

实现在原理是在dialog 的open事件中加一段代码：

$(".ui-dialog-titlebar-close")
			.replaceWith(
							'<p class="ui-xlgwr">'
									+ '<span class="ui-icon ui-icon-minusthick">minusthick</span>'
									+ '<span class="ui-icon ui-icon-newwin">newwin</span>'
									+ '<span class="ui-icon ui-icon-extlink">extlink</span>'
									+ '<span class="ui-icon ui-icon-closethick">close</span></p>');

基于Jquery UI Dialog 的改写

标签：jquery ui dialog 自定义

原文地址：http://blog.csdn.net/u012251421/article/details/46428645