<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<link href="tab.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript" src="tab.js"></script>
<script type="text/javascript">
// 测试数据
window.options = [
{id:"1",name:"BlogJava",lock:true,url:"http://www.blogjava.net/fantasy",title:"BlogJava-中国最大的搜索引擎",frame:{name:'BlogFrame',style:'width:100%;height:100%'}},
{id:"2",name:"爱问-中国最大的搜索引擎",lock:false,url:"http://iask.com/",title:"爱问-中国最大的搜索引擎"},
{id:"3",name:"搜乐-中国最大的搜索引擎",lock:false,url:"http://www.sooule.com/",title:"搜乐-中国最大的搜索引擎"},
{id:"4",name:"搜狗",lock:false,url:"http://www.sogou.cn",title:"搜狗-中国最大的搜索引擎"},
{id:"5",name:"百度",lock:true,url:"http://www.baidu.com",title:"百度-中国最大的搜索引擎"},
{id:"6",name:"谷歌",lock:true,url:"http://www.google.com",title:"谷歌-中国最大的搜索引擎"},
{id:"7",name:"搜搜",lock:false,url:"http://www.soso.com",title:"搜搜-中国最大的搜索引擎"},
{id:"8",name:"必应",lock:true,url:"http://cn.bing.com/",title:"必应-中国最大的搜索引擎"}];
// 新增
var add = function(i){
tab.add(window.options[i]);
};
// 解锁与锁定
var lock = function( isLock ){
tab.lock("1",isLock);
};
// 关闭
var remove = function( id ){
tab.close(id);
};
// 移动
var move = function( state ){
tab.move({action:state});
};
jQuery( function(){
var option = {tabID:"Tabs",frameID:"Frames",activeClass:"on",lockClass:"locked",leftID:"Left",
rightID:"Right",resetID:"Reset",closeID:"Close"};
window.tab = FantasyTab.create(option);
window.tab.add(window.options[0]);
window.tab.add(window.options[1]);
window.tab.add(window.options[2]);
});
//document.getElementById('baidu').click();
</script>
</head>
<body>
<fieldset>
测试按钮
<input type="button" value="爱问" onclick="add(1)" />
<input type="button" value="搜乐" onclick="add(2)" />
<input type="button" value="搜狗" onclick="add(3)" />
<input type="button" value="百度" onclick="add(4)" id='baidu' style="display:none"/>
<input type="button" value="谷歌" onclick="add(5)" />
<input type="button" value="搜搜" onclick="add(6)" />
<input type="button" value="必应" onclick="add(7)" />
<input type="button" value="解锁Blog" onclick="lock(false)" />
<input type="button" value="锁定Blog" onclick="lock(true)" />
<input type="button" value="关闭Blog" onclick="remove(1)" />
<input type="button" value="左移" onclick="move('left')" />
<input type="button" value="右移" onclick="move('right')" />
<input type="button" value="复位" onclick="move('reset')" />
</fieldset>
<div id="TabMain">
<div class="c_tabNav"><div class="tabNavWrapper">
<div><div class="tab"><div class="maxWidth">
<!-- 这里存放生成的Tab-->
<ul id="Tabs"></ul>
</div></div></div>
</div>
</div>
</div>
<!-- 这里存放生成的IFrame 只要ID='Frames'就可以，可以根据布局自己定义-->
<div id="Frames" style="height:768px">
</div>
</body>
</html>
TabDemo(支持iframe修改)
4星 · 超过85%的资源 需积分: 1 30 浏览量
2012-02-09
09:55:14
上传
评论
收藏 47KB RAR 举报 
TabDemo(支持iframe修改).rar （11个子文件） 
TabDemo(支持iframe修改) 
main.html 597B left.html 2KB
tab.js 6KB main.html.bak 1KB left.html.bak 2KB jquery-1.4.min.js 68KB tab.js.bak 6KB tab.html.bak 3KB tab.html 3KB tab.css 4KB
s.png 35KB
- 1
- 2
前往页