引入 jqurey tab 的js
<link rel="stylesheet" type="text/css" href="<c:url value="/resource/css/jquery/ui/theme/smoothness/jquery-ui-1.8.2.custom.css" />"/>
<script type="text/javascript" src="<c:url value="/resource/js/jquery/core/jquery-1.4.2.js" />"></script>
<script type="text/javascript" src="<c:url value="/resource/js/jquery/ui/jquery.ui.core.js"/>"></script>
<script type="text/javascript" src="<c:url value="/resource/js/jquery/ui/jquery-ui-1.8.2.custom.js"/>"></script>
<script type="text/javascript" src="<c:url value="/resource/js/jquery/ui/jquery.ui.tabs.js"/>"></script>
在调用 tabs方法时 写 show 方法 在里面 动态改变 iframe 里的高度
$("#tabs").tabs({
show:function(obj,tab){
$(tab.panel).find('IFRAME').attr("height",tab.panel.scrollHeight);
}
});
html 页面 如下
<table width="100%" border=0 cellpadding="3" cellspacing="0" id="inboxTabTableId">
<tr>
<td valign="top" align="left">
<div id="tabs" class="formB">
<ul>
<li><a href="#tabs-1" id="inboxTab1Title" rel="/inbox/outbox/?type=0">收到的信息(3)</a></li>
<li><a href="#tabs-2" id="inboxTab2Title" rel="/inbox/outbox/?type=1">收到的邀请信息(2)</a></li>
</ul>
<div id="tabs-1">
<table height="300" width="100%" border=0 cellpadding="3" cellspacing="0" >
<tr>
<td valign="top" >
iframe1
<iframe id="inboxTab1Content" name="frame1" style="" frameborder="1" marginHeight="0" scrolling="no" onload="this.height=frame1.document.body.scrollHeight" src1="<c:url value='/inbox/outbox'/>?random= + Math.random()" width="100%" height="100%"></iframe>
</td>
</tr>
</table>
</div>
<div id="tabs-2" >
<table height="300" width="500" border=0>
<tr>
<td valign="top" >
iframe2
<iframe id="inboxTab2Content" name="frame2" style="" frameborder="1" marginHeight="0" scrolling="no" onload="this.height=frame2.document.body.scrollHeight" src1="<c:url value='/inbox/inviter'/>+'?random=' + Math.random()" width="100%" height="100%"></iframe>
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
分享到:
相关推荐
jquery对iframe自适应高度插件是国外下载下来的。插件使用只要引用js文件就行,不用做任何别的操作完全自动化。
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
用jquery实现iframe高度自适应实例代码完美兼容多数浏览器
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
javascript原生和jquery库实现iframe自适应内容高度和宽度—推荐使用jQuery的代码! <iframe src=index....
本插件支持一个页面多次使用,自动播放切换图片列表,具备图片预加载功能,重置图片宽度,可以自动适应图片的宽和高以适应指定的宽高,可以指定图片列表,指定切换... 飞飞图片宽高自适应的slide幻灯片切换jQuery插件
很多管理系统中,都使用iframe进行信息内容的展示方式,或者作为主菜单的链接展示内容。使用iframe的问题就是自适应高度的问题
NULL 博文链接:https://z-one.iteye.com/blog/1725511
jQuery图片全屏滚动自适应浏览器分辨率宽度焦点图片滚动
jQuery.autoTextarea.js是基于jQuery实现的文本框插件,可以实现文本框内容输入的高度自适应功能,出品方:css88.com,学习jquery的童鞋来学习一下吧。
可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,今天我们就来分享2种使用jquery实现iframe自适应高度的代码
jquery tab切换,jquery tab切换,js点击按钮切换图片jquery tab切换,jquery tab切换,jquery tab切换,js点击按钮切换图片jquery tab切换,jquery tab切换,jquery tab切换,js点击按钮切换图片jquery tab切换,...
最近做前端设计时需要使左右两个DIV高度自适应。这其中的jquery代码中的获得高度用的clientHeight,介绍一下几种不同的获得方式以及他们的差别
jquery tab 切换页面 支持iframe 有iframe引用示例
jQuery响应式与自适应代码案例,电脑端、平板端、手机端
jquery全屏图片切换自适应网页宽度的焦点图代码 jquery全屏图片切换自适应网页宽度的焦点图代码 jquery全屏图片切换自适应网页宽度的焦点图代码 jquery全屏图片切换自适应网页宽度的焦点图代码
jquery tab 切换页面 支持iframe 有iframe引用示例.
jQuery自动适应高度布局代码是一款设置height页面自动适应高度布局效果代码。