jquery easyui打开新的tab实现遮罩效果

我在语言方面可以表达的不是很好，第一次发博客，还是希望大家多给建议，针对大家提出的建议，我会做好自己的博客的。

最近公司在搞一个项目用到jquery easyui的插件，软件的方式是通过tab来显示操作的。

通过强大的百度（参考其他网友文章）我研究tab的功能发现，tab加载一个页面有两种方式：

 1.通过content 方式 2.同过href方式

content方式是给到ifream的src来加载页面的，这种没有一点提示，用户体验不好；

$("#layout-center-tabs").tabs('add',{
                                    title : node.text,
                                    closable : true,
                                    content : '<iframe src="' + url + '" frameborder="0" style="border:0;width:100%;height:99%;"></iframe>'
                                });

 

href方式通过ajax异步加载了页面看它的源码就知道了

2507行

     $.ajax({
                url: _1a2.options.href,
                cache: false,
                success: function(data) {
                    _1a4.html(_1a2.options.extractor.call(_1a1, data));
                    if ($.parser) {
                        $.parser.parse(_1a4);
                    }
                    _1a2.options.onLoad.apply(_1a1, arguments);
                    _1a2.isLoaded = true;
                }
            });

 那我是通过修改jquery easyui的源码来实现效果的，插件给的源码是这样的

function _1a0(_1a1) {
        var _1a2 = $.data(_1a1, "panel");
        if (_1a2.options.href && (!_1a2.isLoaded || !_1a2.options.cache)) {
            _1a2.isLoaded = false;
            _1a3(_1a1);
            var _1a4 = _1a2.panel.find(">div.panel-body");
            if (_1a2.options.loadingMessage) {
            var _w = _1a2.options.width;
            var _h = _1a2.options.height;
                _1a4.html($("<div class=\"panel-loading\").html(_1a2.options.loadingMessage));
                alert($(".panel-loading").attr("width"));
            }
            $.ajax({
                url: _1a2.options.href,
                cache: false,
                success: function(data) {
                    _1a4.html(_1a2.options.extractor.call(_1a1, data));
                    if ($.parser) {
                        $.parser.parse(_1a4);
                    }
                    _1a2.options.onLoad.apply(_1a1, arguments);
                    _1a2.isLoaded = true;
                }
            });
        }
    };

效果是这样的

但是体验不是很好，不太明显。

修改过后的代码是：

 function _1a0(_1a1) {
        var _1a2 = $.data(_1a1, "panel");
        if (_1a2.options.href && (!_1a2.isLoaded || !_1a2.options.cache)) {
            _1a2.isLoaded = false;
            _1a3(_1a1);
            var _1a4 = _1a2.panel.find(">div.panel-body");
            if (_1a2.options.loadingMessage) {
            var _w = _1a2.options.width;
            var _h = _1a2.options.height;
                _1a4.html($("<div class=\"panel-loading\"></div>").append($("<div class=\"panel-loading-img\">"+_1a2.options.loadingMessage+"</div>")).css("height","100%"));
                
            }
            $.ajax({
                url: _1a2.options.href,
                cache: false,
                success: function(data) {
                    _1a4.html(_1a2.options.extractor.call(_1a1, data));
                    if ($.parser) {
                        $.parser.parse(_1a4);
                    }
                    _1a2.options.onLoad.apply(_1a1, arguments);
                    _1a2.isLoaded = true;
                }
            });
        }
    };

然后在css文件里加入几个样式就ok了。

.panel-loading{position:relative;background:url('../images/back_bg_loading.png') repeat;}
.panel-loading-img{
    padding:4px 4px 4px 31px;
    position:absolute;
    top:45%;
    left:40%;
    width:200px;
    height:45px;
    color:#fff;
    background:url('../images/loading_2.gif') top left no-repeat;
    }

最后的效果是这样的

当然了，可能这个背景图不好看，只要换张图就ok了。当然这只是对用户体验方面来考虑的，其他方面暂没有考虑。