Web端的Tab控件在切换Tab时Load数据出错的处理
我们在应用Web端的Tab控件时,不管是Jquery easyui的还是Ext的Tab控件都会遇到一个问题,在Tab1正在加载数据的时候我们切换到Tab2,再切换回来,Load数据的控件就会出错,出错的情况有很多种,我做过测试这种情况在Chrome下面没有,IE和Firefox都存在,界面如下:
报错的情况会有很多种,但是究其原因,都是由于在切换Tab1到Tab2的时候,实际上将Tab1的display设置成none了,但是多数控件(比如Hightcharts、Ext、Map控件)在Load数据时如果当前的容器是隐藏状态就会出错。
解决方案1:切换到Tab2数据加载的时候,出现Working页面,不能够进行其他操作,但这个是垫底的方案,会影响到用户体验,如果此页面加载10秒,这10秒钟内,用户什么都不能做【备用】。
解决方案2:如果加载出错的情况记录到一个变量中,如果再次切换回此页面,如果发现加载错误,那么重新架加载,这种方案有个弊端是,切换回来时有一段时间的延迟响应,用户会看到出错的页面,再者就是比较难判断出来是否加载出错【不可行】。
解决方案3:修改Jquery easyui的源码,在切换Tab1到Tab2时,不隐藏Tab1,而是将Tab1的高度置成1,这样有个小问题就是如果Tab太多的情况,很多个1高度的元素会堆积,后来经过测试将Tab1的高度置成0也是可以的,OK,问题解决,代码如下【没有修改jQuery easyui源码,因为压缩后的没法修改,但是也没有找到未压缩的,只是在easyui加载完成后改变Tab的样式】:
$('#divReportTabs').children().last().children().each(function (index)
{
var display = $(this).css('display');
if (tabIndex != index)
{
$(this).show().height(0);
}
});
此段代码的逻辑就是切换到当前的Tab时,其他的Tab显示但是高度是0px【解决】。
Web端的Tab控件在切换Tab时Load数据出错的处理的更多相关文章
- Web端优秀图表控件
百度echart http://echarts.coding.io/doc/example.html C#+JQuery+.Ashx+百度Echarts 实现全国省市地图和饼状图动态数据图形报表的统计 ...
- 修复duilib CEditUI控件和CWebBrowserUI控件中按Tab键无法切换焦点的bug
转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/41556615 在duilib中,按tab键会让焦点在Button一类的控 ...
- Web页面测试总结(控件类)
界面测试,最多的就是各种控件的功能测试,只有掌握了其测试要点,了解测试方法,总结各种测试情景,才能熟练测试Web页面. 一.输入框 输入框分为文本输入框,数字输入框.一般使用在填写输入的内容上,比如名 ...
- Android Tab控件简介
在Android中,Tab控件是一种很常用的控件:Tab控件即标签页,可以在一页中切换显示N页内容: Tab控件具有两种实现过程,一是在同一个Activity中切换显示不同的标签页,这种主要是通过修改 ...
- WEB页面常用基本控件测试用例
一.树控件的测试外观操作 1)项目中的所有树是否风格一致 2)树结构的默认状态是怎样的.比如默认树是否是展开,是展开几级? 是否有默认的焦点? 默认值是什么?展开的节点图标和颜色? 2.执行操作 1 ...
- 移动端日历选择控件(支持Zepto和JQuery)
移动端日历选择控件(支持Zepto和JQuery) <!DOCTYPE html> <html> <head> <meta charset="utf ...
- MFC TAB控件顺序
在MFC中添加控件后,按Ctrl+d可以改变控件TAB顺序,怕自己忘了,一个神奇的东西,记下. 关于改变Tab顺序的方法有以下几种: 方法一:在动态创建控件的时候STYLE设置成为WS_CHILD|W ...
- 扩展easyUI tab控件,添加加载遮罩效果
项目里要用HighChart显示图表,如果返回的数量量太多,生成图表是一个很耗时的过程.tab控件又没有显示遮罩的设置(至少本菜是没有找到), Google了一下,根据另一个兄台写的方法,拿来改造了一 ...
- NVelocity+Bootstrap tab控件 异常之
异常信息:Encountered "tings" at line 54, column 55.Was expecting one of: "(" ... ...
随机推荐
- vi 替换命令“找不到模式”解决
在linux vi编辑工具中使用替换命令操作时,会出现明明有匹配查找模式的数据.却报"找不到模式"问题. 原因是vi s///替换操作缺省针对行,若要生效,则须要将光标移动到指定行 ...
- Memory Architecture-SGA-Database Buffer Cache
启动instance:1.分配内存空间SGA 2.启动后台进程 内存结构:1.SGA 2.PGA 3.UGA 4.Software code areas SGA components:1.Databa ...
- MVC 常用方法
1. 后台 action方法里添加错误消息到字典中(key,value) ModelState.AddModelError("Error", "参数传输有误,请重新尝试! ...
- jQuery的扩展
我们自己通过扩展jQuery来达到 “通过$.xx(paras)的形式来进行调用某个jQuery对象的xx(paras)方法”. 下面就是一个实例: (function(j){//这里的j是一个形参, ...
- python网络编程——将IPv4地址转换成不同的格式
1.将IPv4地址转换为32位二进制格式,用做底层网络函数. import socket from binascii import hexlify def convert_IPv4_address() ...
- poj 2309
http://poj.org/problem?id=2309//找规律 可以看到每个根节点都可以将其在同一层的最左边的根节点整除,并且最大值为该节点加上最左边的节点值-1,最小值为////为该节点减去 ...
- sql server单表导入、导出
sql server单表导入.导出(通过CSV文件) 导出:直接打开查询分析器查询要导出表的信息(select * from 表),得到的结果全选,右键另存为 xxx.csv文件 (得到该表的所有 ...
- Python 連接 MySQL
Python 連接 MySQL MySQL 是十分流行的開源資料庫系統,很多網站也是使用 MySQL 作為後台資料儲存,而 Python 要連接 MySQL 可以使用 MySQL 模組.MySQLdb ...
- 跟我一起学extjs5(25--模块Form的自己定义的设计[3])
跟我一起学extjs5(25--模块Form的自己定义的设计[3]) 自己定义的Form已经能够执行了,以下改一下配置,把Form里面的FieldSet放在Tab之下.改动一下Modu ...
- 十:Java之泛型
[定义] 一.泛型的定义主要有下面两种: 在程序编码中一些包括类型參数的类型,也就是说泛型的參数仅仅能够代表类.不能代表个别对象.(这是当今较常见的定义) 在程序编码中一些包括參数的类.其參数能够代表 ...