关于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 相关文章推荐
javascript引用对象的方法
Jan 11 Javascript
麦鸡的TAB切换功能结合了javascript和css
Dec 17 Javascript
zShowBox 图片放大展示jquery版 兼容性
Sep 24 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
Jun 25 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
Nov 28 Javascript
js查看一个函数的执行时间实例代码
Sep 12 Javascript
JavaScript中日期的相关操作方法总结
Oct 24 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
Vue自定义事件(详解)
Aug 19 Javascript
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
vue-router的钩子函数用法实例分析
Oct 26 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
如何使用PHP计算上一个月的今天
2013/05/23 PHP
PHP常用数组函数介绍
2014/07/28 PHP
PHP的反射机制实例详解
2017/03/29 PHP
PHP attributes()函数讲解
2019/02/03 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
Javascript Object.extend
2010/05/18 Javascript
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
Vue根据条件添加click事件的方式
2019/11/09 Javascript
[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场
2018/04/10 DOTA
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
大专自我鉴定范文
2013/10/01 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
护士长竞聘书
2014/03/31 职场文书
婚前财产公证书
2014/04/10 职场文书
体现团队精神的口号
2014/06/06 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
幼儿园教师岗位职责
2015/04/02 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电
numpy数据类型dtype转换实现
2021/04/24 Python
Go 自定义package包设置与导入操作
2021/05/06 Golang
你真的会用Mysql的explain吗
2022/03/31 MySQL