基于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>');

至于为什么这样加，学过前端开发的人应该都知道，我就不多说了。但是这样加了以后会有一个问题存在，如果你在同一项目中又要使用到dialog这个东西，但是又不需要上面的几个功能，只需要关闭按钮，你会发现由于上面的修改你的关闭事件不起作用了。这个时候就要把这个东西修改回来，实际上修改的原理和这个原理是一样的，都是要重新将这几个控件替换然后给对应的控件加上监听按钮，在此不再累述。