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了。當然這只是對用戶體驗方面來考慮的，其他方面暫沒有考慮。