Easyui tab panel loading效果

写在之前，当采用content方式加载tab panel内容时，不会像herf方式加载似得框架自有loading效果。所以就需要我们自己增加loading效果了。

解决思路非常简单：页面内容加载时隐藏页面内容显示loading，页面内容加载完毕显示页面内容隐藏loading。

代码如下：

/**

 *  定义addTab函数

 */

function addTab(title, url, iconCls){

    var tabPanel = $('#tabs');

    if(!tabPanel.tabs('exists',title)){

        var content = '<div class="panel-loading" style="position: absolute;left: 0;top: 30px;">加载中。。。</div><iframe class="tabPanel" onload="load()" scrolling="auto" frameborder="0"  src="'+ url +'" style="width:100%;height:100%;opacity: 0"></iframe>';//将loading画面一起加载，iframe的透明度设为0。利用onload函数，当iframe加载完毕时执行load（）

        tabPanel.tabs('add',{//添加一个新的标签页面板

            title:title,

            content:content,

            iconCls:iconCls,

            fit:true,

            cls:'pd3',

            closable:true

        });

    }

    else

    {

        tabPanel.tabs('select',title);// 如果所选面板已经存在，跳转到选择面板

        var tab = tabPanel.tabs('getSelected');

        tab.panel('refresh');//并刷新面板

        }

}

function load() {//显示iframe。移除loading效果

    $(".tabPanel").css("opacity",1);

    $(".panel-loading").remove();

}