关于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 相关文章推荐
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
通过正则格式化url查询字符串实现代码
Dec 28 Javascript
利用cookie记住背景颜色示例代码
Nov 04 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
js判断是否按下了Shift键的方法
Jan 27 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
smartcrop.js智能图片裁剪库
Oct 14 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
JS定时器用法分析【时钟与菜单中的应用】
Dec 21 Javascript
几种响应式文字详解
May 19 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
Jul 28 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类
2006/07/15 PHP
php设计模式 Prototype (原型模式)代码
2011/06/26 PHP
php中常用的预定义变量小结
2012/05/09 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
淘宝ip地址查询类分享(利用淘宝ip库)
2014/01/07 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
B/S开发中常用javaScript技术与代码
2007/03/09 Javascript
JS实现div居中示例
2014/04/17 Javascript
JQuery1.8 判断元素是否绑定事件的方法
2014/07/10 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
javascript 单例模式详解及简单实例
2017/02/14 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
详解Python中的各种函数的使用
2015/05/24 Python
python爬虫框架talonspider简单介绍
2017/06/09 Python
Python实现PS图像调整黑白效果示例
2018/01/25 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
python如何从文件读取数据及解析
2019/09/19 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
PyCharm中Matplotlib绘图不能显示UI效果的问题解决
2020/03/12 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
西雅图的买手店:Totokaelo
2019/10/19 全球购物
编写strcpy函数
2014/06/24 面试题
局领导领导班子四风对照检查材料
2014/09/27 职场文书
写给老师的保证书
2015/05/09 职场文书
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android