art dialog使用心得
前段时间加入了thinkphp的一个官方群,这个群的一个宗旨与精神是OSP,即open share process,这也算是一种潮流与趋势吧。所以我在博客里开了这个开源插件类别,希望将我收集的一些开源插件及使用心得分享出来。
最近一直在纠结art dialog这个弹窗插件,总的来说,这是一个非常优秀的弹窗插件,应用起来既成熟也稳定 。
它的官方地址:http://www.planeart.cn/demo/artDialog/_doc/new.html,
目前官网放出的最新版本为4.1.6版本,下载地址为:http://code.google.com/p/artdialog/downloads/list,
同时其实它还有一款5.0.1的版本,不知道为什么官网上没有对这个版本做出说明,而且代码库也放到了GitHub上,下载地址为:https://github.com/aui/artDialog
最初项目上使用的版本5,最近因为要使用iframe,而5目前放弃了对iframe的支持,所以我们改用4.1.6版本。
这是一款中文插件,所以它的API写的至少让作为中国人的我在阅读时免去了语言上的障碍,但是我缺乏js基础,所以在这款插件的使用上遇到很多的问题。但是,对于我这种出道不久的新人而言,遇到问题,解决问题的这个过程不是很好么。
我用到了一个功能是夹在一个iframe弹窗,然后操作后关闭这个弹窗并将结果利用ajax返回到父页面中。这段代码有部分问题请人帮忙解决了。贴上代码留个档。
$('#add').live('click',function(){ art.dialog.open("url", { id : "addDialog", title : "新增联系人", lock : true, drag : true, background: 'gray', // 背景色 opacity: 0.31, // 透明度 width : "80%" }, false); }); $('a.edit').live('click',function(){ var url = $(this).attr('href'); art.dialog.open(url, { id : "addDialog", title : "编辑联系人", lock : true, drag : true, background: 'gray', // 背景色 opacity: 0.31, // 透明度 width : "80%" }, false); return false; });
ajax的处理
success: function(str) { parent.art.dialog.list['addDialog'].close(); }
就是找到父页面打开的子页面中id为addDialog的窗体并关闭。ajax返回结果并放到页面上可能由于ajax的执行问题,一直不稳定,代码就不上了。