Jquery tab插件wdScrollTab 在chrome中出现不兼容的问题

先贴上jsp里面调用的代码

var gh ="${teacher.GH }";
		var grjlurl = _webRootPath + "content/search/teacher/teacher.grjl.jsp?gh="+gh;
		var jcTabs = [
		'<iframe width="100%" scrolling="no" height="100%" frameborder="0" src="'+grjlurl+'" id="grjlList" name="grjlList"></iframe>',
		'<iframe width="100%" scrolling="no" height="100%" frameborder="0" src="" id="kyxmList" name="kyxmList"></iframe>',
		'<iframe width="100%" scrolling="no" height="100%" frameborder="0" src="" id="xslwList" name="xslwList"></iframe>',
		'<iframe width="100%" scrolling="no" height="100%" frameborder="0" src="" id="xszzList" name="xszzList"></iframe>',
		'<iframe width="100%" scrolling="no" height="100%" frameborder="0" src="" id="zscqList" name="zscqList"></iframe>',
		'<iframe width="100%" scrolling="no" height="100%" frameborder="0" src="" id="hjcgList" name="hjcgList"></iframe>',
		'<iframe width="100%" scrolling="yes" height="100%" frameborder="0" src="" id="xcdyList" name="xcdyList"></iframe>'
		];
		j$(document).ready(function(){
		   var tabpanel2 = new TabPanel({
				renderTo:'tab',
				width:'99%',
				//height:'331',
				//border:'none',
				active : 0,
				//autoResizable : true,
				//maxLength : 6,
				items : [
					{id:'toolbarPlugin1',title:'个人简历', html:jcTabs[0],closable: false},
					{id:'toolbarPlugin2',title:'科研项目',html:jcTabs[1],closable: false,  func:'doSearchList(1,"kyxmList","getKyxmList.action")'},
					{id:'toolbarPlugin3',title:'学术论文',html:jcTabs[2],closable: false, func:'doSearchList(1,"xslwList","getXslwList.action")'},
					{id:'toolbarPlugin4',title:'学术著作',html:jcTabs[3],closable: false, func:'doSearchList(1,"xszzList","getXszzList.action")'},
					{id:'toolbarPlugin5',title:'知识产权',html:jcTabs[4],closable: false, func:'doSearchList(1,"zscqList","getZscqList.action")'},
					{id:'toolbarPlugin6',title:'获奖成果',html:jcTabs[5],closable: false, func:'doSearchList(1,"hjcgList","getHjcgList.action")'},
					{id:'toolbarPlugin7',title:'薪酬待遇',html:jcTabs[6],closable: false, func:'doSearchList(1,"xcdyList","getXcdyList.action")'}
				]
			});
		}); 

在FF,IE等浏览器里面都显示正常

但是在chrome里面出现奇怪的问题,有时候整个tab的高度只有一行,下面的内容不显示

又或者变成下面这样

查看代码发现,第一种错误是因为在TabPanel.js中,alert(this.render.height())得到是0,感觉很奇怪,我单独写了个html测试,又没有出现这样的问题,但在这里,render的高度取出来就是0.renderTo指向的是<div id="tab"></div>, 后来没办法,我把它改成<div id="tab" style="height:100%"></div> 后就正常了,取出来的height就不是0了。

this.height = config.height || '100%';
this.render = typeof this.renderTo == 'string' ? $('#'+this.renderTo) : this.renderTo;

this.render.height(this.height);

this.tabpanel = $('<DIV></DIV>');
this.tabpanel.addClass('tabpanel');
this.tabpanel.width(this.render.width()-hwFix);
this.tabpanel.height(this.render.height()-hwFix);

第二个错误,我发现是因为,下面的部分被执行了两次。

j$(document).ready(function(){}

百思不得其解,后面上网看到有人说jquery的appendTo可能引起这个问题,于是修改代码

          var loaded = false;
		j$(document).ready(function(){
			if(!loaded){
			   loaded = true;
			   var tabpanel2 = new TabPanel({
			        renderTo:'tab',
			        width:'99%',
			        //height:'331',
			        //border:'none',
			        active : 0,
			        //autoResizable : true,
			        //maxLength : 6,
			        items : [
						{id:'toolbarPlugin1',title:'个人简历', html:jcTabs[0],closable: false},
						{id:'toolbarPlugin2',title:'科研项目',html:jcTabs[1],closable: false,  func:'doSearchList(1,"kyxmList","getKyxmList.action")'},
						{id:'toolbarPlugin3',title:'学术论文',html:jcTabs[2],closable: false, func:'doSearchList(1,"xslwList","getXslwList.action")'},
						{id:'toolbarPlugin4',title:'学术著作',html:jcTabs[3],closable: false, func:'doSearchList(1,"xszzList","getXszzList.action")'},
						{id:'toolbarPlugin5',title:'知识产权',html:jcTabs[4],closable: false, func:'doSearchList(1,"zscqList","getZscqList.action")'},
						{id:'toolbarPlugin6',title:'获奖成果',html:jcTabs[5],closable: false, func:'doSearchList(1,"hjcgList","getHjcgList.action")'},
						{id:'toolbarPlugin7',title:'薪酬待遇',html:jcTabs[6],closable: false, func:'doSearchList(1,"xcdyList","getXcdyList.action")'}
			        ]
			    });
			}
		});

增加一个标识loaded后,问题终于解决。

时间: 2024-07-30 21:11:17

Jquery tab插件wdScrollTab 在chrome中出现不兼容的问题的相关文章

20 个最棒的 jQuery Tab 插件

jQuery Tab 常用来做网页上的选项设置界面和导航,本文向你推荐最棒的 20 个 jQuery Tab 插件.Enjoy !! 1. Slider Tabs SliderTabs 是一个可定制的 jQuery 插件,可以创建基于 Tab 的内容滑块,并提供一个可定制的滑块控制. 2. jQuery Contact Tabs 这是一个 jQuery 的表单生成器,用来创建使用 Ajax 技术的联系表单.提供 12 种不同的表单元素和客户端验证,提供不同的主题风格,可添加多个 Tab. 3.

jquery星级插件、支持页面中多次使用

我从网上收集一个jquery星级插件的,它只支持一个页面中使用一次,多次使用的话会发生冲突,达不到我项目的需求,没办法,只能修改它, 效果图如下: css所需背景图片:   二话不说,帖代码: html代码 <div class="xing"> <span style="float: left">总体评价:<font color="#CC3300" size="-1">*</font&

jQuery Tab插件

继续学习插件的写法,简单的Tab插件,自适应宽度. 地址:https://github.com/zjzhome/jquery.tab.js 使用方法比较简单,写好html后一句Js即可,只有三个选项,后续继续扩展.

为JQuery写插件

很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成slider,比起slider($('#slider'))更贴近jQuery的链式调用写法,可读性和通用性更好些. 那么,我们也来为jQuery写插件.便于项目中的组件化. 方法是非常简单的,那就写一个测试的demo来作为基础的验证吧. 定义html,假设我们要把test div修改成宽高都是200px,背景色为

使用jQuery.form插件,实现完美的表单异步提交

示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 抓住6月份的尾巴,今天的主题是 今天我想介绍的是一款jQuery的插件:Jquery.form.js 官网. 通过该插件,我们可以非常简单的实现表单的异步提交,并实现文件上传.进度条显示等等. 现在我们从一个ASP.NET同步表单提交开始,然后再将其转化为异步的表单提交.我写了3种表单提交示例,并简单分析了各种方式的利弊. 当然主题还是使用jQuery表单插件轻松实现表单异步提交以及分析下该插件的源码. ASP.NET服务

8个超炫酷的jQuery相册插件欣赏

在网页中,相册应用十分常见,如果你经常逛一些社交网站,那么你应该会注意到很多各式各样的网页相册应用.今天我们要来分享一些最新收集的jQuery相册插件,这些精美的jQuery相册插件可以帮助你快速搭建自己的相册浏览系统,对那些JS功底不怎么好的同学应该会有不少帮助. 1.jQuery幻灯片播放器插件 可自动播放图片 之前我们分享过很多炫酷和实用的jQuery焦点图插件,比如jQuery仿Flash横向切换焦点图插件.今天我们要再介绍一个jQuery幻灯片播放器插件,它的功能很齐全,不仅可以手动切

jquery分页插件

jquery.mypagination.js 文件: /* * * * jquery分页插件 * 1.0  zheng 2014-03-18 * 1.1  兼容url包含#号地址,GoToPage可以指定锚点(特殊需求)2014-04-10 09:00:34 * 1.2  可以配置分页条列出页面数 * 1.3  增加了页面码跳转功能 *  $('#mypage').scPagination(555, { *              pageSize: 10,//每页显示的记录条数 *    

强大实用的jQuery幻灯片插件Owl Carousel

演 示 下 载 简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON 格式 支持进度条 支持自定义事件 支持延迟加载 支持自适应高度 …… Owl Carousel 提供了众多的参数.回调函数及自定义事件(具体请往下浏览),所以它几乎可以满足你的所有要求. 兼容 浏览器兼容:兼容所有浏览器,包括 IE6.IE7. jQuery 兼容:兼容 1.7 及

jQuery幻灯片插件OWL Carousel

简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON 格式 支持进度条 支持自定义事件 支持延迟加载 支持自适应高度 -- Owl Carousel 提供了众多的参数.回调函数及自定义事件(具体请往下浏览),所以它几乎可以满足你的所有要求. 兼容 浏览器兼容:兼容所有浏览器,包括 IE6.IE7. jQuery 兼容:兼容 1.7 及以上版本. 使用