关于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针对DOM的应用分析(二)
Apr 15 Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
jquery 根据name名获取元素的value值
Feb 27 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
图解js图片轮播效果
Dec 20 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 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环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
php 读取输出其他文件的实现方法
2016/07/26 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
php中各种定义变量的方法小结
2017/10/18 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
利用谷歌地图API获取点与点的距离的js代码
2012/10/11 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
javascript日期计算实例分析
2015/06/29 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
javascript基本语法
2016/05/31 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
Python with的用法
2014/08/22 Python
Python Tkinter基础控件用法
2014/09/03 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
css3的transition属性详解
2014/12/15 HTML / CSS
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
精神文明建设标语
2014/06/16 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
绿色校园广播稿
2014/10/13 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
公司员工奖惩制度
2015/08/04 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
Oracle 11g数据库使用expdp每周进行数据备份并上传到备份服务器
2022/06/28 Oracle