jQuery Tab插件 [url]http://jqueryui.com/tabs/#default[/url]
[b][color=red]Jquery、tabs、iframe相结合[/color][/b] [url]http://blog.sina.com.cn/s/blog_656977f401014oy6.html[/url]
使用Jquery中的ui.tabs.js，如果tab中的界面有按钮需要跳转到新的页面时，整个页面会跳转，为了使界
面在tab内部跳转，可以在tab中使用iframe将页面加载。代码如下：
<div id="expenseTabs" style="width: 98%; background: #cadbe7;">
<ul>
<li><a id="noTravelExpenseTab" href="#noTravelExpenseDiv"><nobr>非差旅报销</nobr></a>
</li>
<li><a id="travelExpenseTab" href="#travelExpenseDiv"><nobr>差旅报销</nobr></a>
</li>
</ul>
<div id="noTravelExpenseDiv">
<iframe id="noTravelExpenseFrame"
src="${contextPath}/expense/noTravelExpenseAction.do" width="100%"
frameborder="0" marginheight="0" marginwidth="0">
</iframe>
</div>
<div id="travelExpenseDiv">
<iframe id="travelExpenseFrame"
src="${contextPath}/expense/travelExpenseAction.do" width="100%"
frameborder="0" marginheight="0" marginwidth="0">
</iframe>
</div>
</div>
<script language="javascript">
$(function() {
$('#expenseTabs').tabs({
cookie: {
// store cookie for a day, without, it would be a session cookie
expires: 1
},
select:function(event,ui) {
$('#expenseTabs').tabs("url",ui.index, "");
}
});
$("table tr:nth-child(odd)").addClass("striped");
});
</script>此时，iframe会出现纵向滚动条，是因为其高度所致。我们可以再加一段代码来设置它的高度。
<script type="text/javascript">
var noTravelExpenseFrame = document.getElementByIdx_x("noTravelExpenseFrame");
noTravelExpenseFrame.height = document.body.clientHeight;
var travelExpenseFrame = document.getElementByIdx_x("travelExpenseFrame");
travelExpenseFrame.height = document.body.clientHeight;
</script>这样问题得以解决。
[img]http://photo.blog.sina.com.cn/showpic.html#blogid=656977f401014oy6&url=http://s5.sinaimg.cn/orignal/656977f4g7978b5025734[/img]
点击“申请报销”按钮时，跳转到另一页面，但此时页面仍在刚才的tab中，如下图所示：
[img]http://photo.blog.sina.com.cn/showpic.html#blogid=656977f401014oy6&url=http://s4.sinaimg.cn/orignal/656977f4g7978b5ae4053[/img]
当然，tab边界与iframe边界之间有背景颜色的差异，是因为iframe中src返回的jsp页面宽度不为100%引起的。样式问题可以自己调试。
[color=red][b]jQuery Tabs + iFrame’s[/b][/color] [url]http://deano.me/2011/08/jquery-tabs-iframes/[/url]
<html>
<head>
<script type="text/javascript" src="data/js/jquery.js"></script>
<script type="text/javascript" src="data/js/jquery-ui.js"></script>
<link href="data/css/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
<style>
html {
font-size:10px;
}
.iframetab {
width:100%;
height:auto;
border:0px;
margin:0px;
background:url("data/iframeno.png");
position:relative;
top:-13px;
}
.ui-tabs-panel {
padding:5px !important;
}
.openout {
float:right;
position:relative;
top:-28px;
left:-5px;
}
</style>
<script>
$(document).ready(function() {
var $tabs = $('#tabs').tabs();
//get selected tab
function getSelectedTabIndex() {
return $tabs.tabs('option', 'active');
}
//get tab contents
beginTab = $("#tabs ul li:eq(" + getSelectedTabIndex() + ")").find("a");
loadTabFrame($(beginTab).attr("href"),$(beginTab).attr("rel"));
$("a.tabref").click(function() {
loadTabFrame($(this).attr("href"),$(this).attr("rel"));
});
//tab switching function
function loadTabFrame(tab, url) {
if ($(tab).find("iframe").length == 0) {
var html = [];
html.push('<div class="tabIframeWrapper">');
html.push('<div class="openout"><a href="' + url + '"><img src="data/world.png" border="0" alt="Open" title="Remove iFrame" /></a></div><iframe class="iframetab" src="' + url + '">Load Failed?</iframe>');
html.push('</div>');
$(tab).append(html.join(""));
$(tab).find("iframe").height($(window).height()-80);
}
return false;
}
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a class="tabref" href="#tabs-1" rel="http://google.co.uk">google</a></li>
<li><a class="tabref" href="#tabs-2" rel="http://yahoo.co.uk">yahoo</a></li>
<li><a class="tabref" href="#tabs-3" rel="http://bing.co.uk">bing</a></li>
</ul>
<div id="tabs-1" class="tabMain">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</div>
</body>
</html>