我在语言方面可以表达的不是很好,第一次发博客,还是希望大家多给建议,针对大家提出的建议,我会做好自己的博客的。
最近公司在搞一个项目用到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了。当然这只是对用户体验方面来考虑的,其他方面暂没有考虑。