关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法


Posted in Javascript onMarch 02, 2017

书写jQuery EasyUI Tab 样例时,如果刷新前面的Tab 选项卡,某一个Tab 选项卡里面的页面布局变乱。如下面图片所示:

刚开始打开时页面布局正确:

关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法 

此时我们在第二个选项卡里面,点击第一个页面的刷新按钮,一直刷新,然后切换回来再看看页面,如下图:

关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法 

但是首页选项卡的页面是正常的。

关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法 

为了便于解释说明,这里用第一个选项卡代表 “首页”,第二个选项卡代表”子菜单10”

出现这种情况的问题根本原因在于,你在第二个选项卡里面,点击其它第一个选项卡刷新按钮时,其实刷新的时第二个选项页面内容,当你鼠标离开你第一个选项卡刷新按钮时 ,此时才选中了第一个选项卡,而这时候第二个选项卡还没有渲染完毕,才导致出现这样的情况。验证过程,这是使用的是验证选项卡的title.

打开两个选项卡,一个”首页”,一个”子菜单10”选项卡,切换到”子菜单10”选项卡,然后点击”首页”选项卡的刷新按钮,弹出的结果如下的图,可见在鼠标点击的过程中,tab 里面选中的还是”子菜单10”选项卡,并不是我们看到的”首页”选项卡。

关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法

出现上图问题的错误代码如下:

/* title表示tab选项卡的标题 */
function refeshCurrentTab() {
      var tabPanel = $('#tabContainer');//存放tab选项卡的容器
      var tab = tabPanel.tabs('getSelected');
      //alert("tab选项卡选中按钮的title:"+tab.panel('options').title);      
      var url = $(tab.panel('options').content).attr('src');
      tabPanel.tabs('update', {
        tab: tab,
        options: {
          content: createFrame(url) //创建Frame标签
        }
      });
    };
   function createFrame(url) {
      return '<iframe src="' + url + '" frameborder="0" style="height:100%;width:100%;"></iframe>';
    };

找到问题的根本所在,那么在上述方法中,只需要刷新时传入刷新按钮那个tab选项卡的标题,选中这个,然后再进行刷新操作。修改的代码如下:

/* title表示tab选项卡的标题 */
    function refeshCurrentTab(title) {
      var tabPanel = $('#tabContainer');
      var tab = tabPanel.tabs('getSelected');
      //alert("传入的参数title:"+title+",tab选项卡选中按钮的title:"+tab.panel('options').title);      
      var refeshTab = tabPanel.tabs("getTab", title);
      if (tab != refeshTab) {
        tabPanel.tabs("select", title);
        tab = refeshTab;
      }
      var url = $(tab.panel('options').content).attr('src');
      tabPanel.tabs('update', {
        tab: tab,
        options: {
          content: createFrame(url)
        }
      });
    };
   function createFrame(url) {
      return '<iframe src="' + url + '" frameborder="0" style="height:100%;width:100%;"></iframe>';
    };

以上所述是小编给大家介绍的关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
一段实现页面上的图片延时加载的js代码
Feb 11 Javascript
JavaScript DOM学习第六章 表单实例
Feb 19 Javascript
js select常用操作控制代码
Mar 16 Javascript
Javascript Function对象扩展之延时执行函数
Jul 06 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
bootstrap table实现合并单元格效果
Dec 24 Javascript
小程序实现图片预览裁剪插件
Nov 22 Javascript
JavaScript html5利用FileReader实现上传功能
Mar 27 #Javascript
利用ES6语法重构React组件详解
Mar 02 #Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 #Javascript
JavaScript表单验证完美代码
Mar 02 #Javascript
js实现常见的工具条效果
Mar 02 #Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 #Javascript
jQuery给表格添加分页效果
Mar 02 #Javascript
You might like
解析ajax事件的调用顺序
2013/06/17 PHP
PHP SOCKET编程详解
2015/05/22 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
PHP设计模式之简单投诉页面实例
2016/02/24 PHP
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
2013/04/03 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
浅析Python3 pip换源问题
2020/01/06 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
Anaconda+VSCode配置tensorflow开发环境的教程详解
2020/03/30 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
AmazeUI 列表的实现示例
2020/08/17 HTML / CSS
几道Web/Ajax的面试题
2016/11/05 面试题
会计实习生工作总结的自我评价
2013/10/07 职场文书
总经理秘书工作职责
2013/12/26 职场文书
2014年社会实践活动总结范文
2014/04/29 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android
js不常见操作运算符总结
2021/11/20 Javascript
javascript之Object.assign()的痛点分析
2022/03/03 Javascript
python 学习GCN图卷积神经网络
2022/05/11 Python