[原创]自己封装了个Tab标签控件，效果和浏览器一样。

最新推荐文章于 2024-09-20 16:06:21 发布

weixin_34415923

最新推荐文章于 2024-09-20 16:06:21 发布

阅读量74

点赞数

文章标签： xhtml javascript ViewUI

原文链接：https://my.oschina.net/willse/blog/4104

版权

很久没在Blog上写点东西了，最近因为项目需求，自己就写了个类似浏览器效果的Tab控件.
现在给大家分享下，呵呵。希望对大家有所帮助。如有问题欢迎EMAIL:fantasycs@163.com

效果图：

Demo和代码下载：

Tab源代码和DEMO下载

使用实例：

<!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]);
});
</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)" />
<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 class="tabTurner">
			<ul>
				<li><a id="Left" href="#" title="左移标签组" class="left"></a></li>
				<li><a id="Right" href="#" title="右移标签组" class="right"></a></li>
				<li><a id="Reset" href="#" title="复位标签组" class="default"></a></li>
				<li><a id="Close" href="#" title="全部关闭" class="close"></a></li>
			</ul>
		</div>
		<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>

转载于:https://my.oschina.net/willse/blog/4104