我最近在做的这个项目是纯粹的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这个东西,但是又不需要上面的几个功能,只需要关闭按钮,你会发现由于上面的修改你的关闭事件不起作用了。这个时候就要把这个东西修改回来,实际上修改的原理和这个原理是一样的,都是要重新将这几个控件替换然后给对应的控件加上监听按钮,在此不再累述。