我们在应用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数据出错的处理的更多相关文章

  1. Web端优秀图表控件

    百度echart http://echarts.coding.io/doc/example.html C#+JQuery+.Ashx+百度Echarts 实现全国省市地图和饼状图动态数据图形报表的统计 ...

  2. 修复duilib CEditUI控件和CWebBrowserUI控件中按Tab键无法切换焦点的bug

    转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/41556615 在duilib中,按tab键会让焦点在Button一类的控 ...

  3. Web页面测试总结(控件类)

    界面测试,最多的就是各种控件的功能测试,只有掌握了其测试要点,了解测试方法,总结各种测试情景,才能熟练测试Web页面. 一.输入框 输入框分为文本输入框,数字输入框.一般使用在填写输入的内容上,比如名 ...

  4. Android Tab控件简介

    在Android中,Tab控件是一种很常用的控件:Tab控件即标签页,可以在一页中切换显示N页内容: Tab控件具有两种实现过程,一是在同一个Activity中切换显示不同的标签页,这种主要是通过修改 ...

  5. WEB页面常用基本控件测试用例

    一.树控件的测试外观操作 1)项目中的所有树是否风格一致 2)树结构的默认状态是怎样的.比如默认树是否是展开,是展开几级?  是否有默认的焦点? 默认值是什么?展开的节点图标和颜色? 2.执行操作 1 ...

  6. 移动端日历选择控件(支持Zepto和JQuery)

    移动端日历选择控件(支持Zepto和JQuery) <!DOCTYPE html> <html> <head> <meta charset="utf ...

  7. MFC TAB控件顺序

    在MFC中添加控件后,按Ctrl+d可以改变控件TAB顺序,怕自己忘了,一个神奇的东西,记下. 关于改变Tab顺序的方法有以下几种: 方法一:在动态创建控件的时候STYLE设置成为WS_CHILD|W ...

  8. 扩展easyUI tab控件,添加加载遮罩效果

    项目里要用HighChart显示图表,如果返回的数量量太多,生成图表是一个很耗时的过程.tab控件又没有显示遮罩的设置(至少本菜是没有找到), Google了一下,根据另一个兄台写的方法,拿来改造了一 ...

  9. NVelocity+Bootstrap tab控件 异常之

    异常信息:Encountered "tings" at line 54, column 55.Was expecting one of:   "(" ...   ...

随机推荐

  1. cocos2d-x新手学习之Helloworld(第三篇)[版本号:cocos2d-x-3.1.1]

    上篇中,能够正常执行NDK中的样例.可是由cocos2d-x生成的项目,不能编译成功.上一篇戳这里: http://blog.csdn.net/xjjjjjjjjjjj/article/details ...

  2. 【剑指offer】调整数组顺序

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/25829395 剑指offer上的第14题,九度OJ为了确保输出的结果的唯一性,在输出上做了 ...

  3. Spark学习体系

    底理解Spark,能够分为以下几个层次. 1 Spark基础篇 1.1 Spark生态和安装部署 在安装过程中,理解其基本操作步骤. 安装部署 Spark安装简单介绍 Spark的源代码编译 Spar ...

  4. c基础总结

    机器大小端判断: #include <stdio.h> typedef union{ char x; int i; }un; int main() { un tt; tt.i = ; ) ...

  5. 多条件搜索拼接Sql语句

    1. 如下实例:     1.1 如下图所示:[通过用户输入的数据拼接Sql搜索语句]                  1.2         private void button2_Click( ...

  6. [Swust OJ 797]--Palindromic Squares(回文数水题)

    题目链接:http://acm.swust.edu.cn/problem/797/ Time limit(ms): 1000 Memory limit(kb): 10000   Description ...

  7. php 自己写的好看的分页类

    自己写的一个分页类 ,不是很完整,个别没有做验证,但可以使用,分页效果见文章底部.除了链接数据库的代码没有粘贴上来,其他的都粘贴了.供学习使用- <?php /** * Created by P ...

  8. JQuery 实现返回顶部效果

    首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效 ...

  9. 瀑布流的三种实现方式(原生js+jquery+css3)

    前言 项目需求要弄个瀑布流的页面,用的是waterfall这个插件,感觉还是可以的,项目赶就没自己的动手写.最近闲来没事,就自己写个.大致思路理清楚,还是挺好实现的... 原生javascript版 ...

  10. 第四节 Code 39 码 / 三九码

    39码是西元1974年发展出来的条码系统,是一种可供使用者双向扫瞄的分散式条码,也就是说相临两资料码之间,必须包含一个不具任何意义的空白(或细白,其逻辑值为0),且其具有支援文数字的能力,故应用较一般 ...