art dialog使用心得

最新推荐文章于 2021-03-10 11:58:49 发布

weixin_30655219

最新推荐文章于 2021-03-10 11:58:49 发布

阅读量92

点赞数

CC 4.0 BY-SA版权

文章标签： php

原文链接：http://www.cnblogs.com/listenRain/archive/2012/11/08/artdialog.html

本文详细介绍了ArtDialog插件的应用过程，包括如何在页面中使用iframe弹窗，以及遇到问题后的解决策略。通过实例代码展示了如何通过Ajax与父页面交互，并在代码中遇到困难时寻求解决方案的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前段时间加入了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的执行问题，一直不稳定，代码就不上了。

转载于:https://www.cnblogs.com/listenRain/archive/2012/11/08/artdialog.html