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的執行問題,一直不穩定,代碼就不上了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM