JAVA & XML & JAVASCRIPT & AJAX & CSS

Web 2.0 技术储备............

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  77 随笔 :: 17 文章 :: 116 评论 :: 0 Trackbacks

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

效果图:



Demo和代码下载:

Tab源代码和DEMO下载 BUG FIXED 2010.04.08

使用实例:

<!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><id="Left" href="#" title="左移标签组" class="left"></a></li>
                
<li><id="Right" href="#" title="右移标签组" class="right"></a></li>
                
<li><id="Reset" href="#" title="复位标签组" class="default"></a></li>
                
<li><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>


posted on 2010-04-25 14:08 Web 2.0 技术资源 阅读(4483) 评论(19)  编辑  收藏 所属分类: AJAXJavascript原创作品HTML

评论

# re: [原创]自己封装了个Tab标签控件,效果和浏览器一样。 2010-04-25 15:22 Hello
挺不错的~祝你找到好工作~  回复  更多评论
  

# re: [原创]自己封装了个Tab标签控件,效果和浏览器一样。 2010-04-25 16:15 咖啡妆
@Hello
jquery确实不错  回复  更多评论
  

# re: [原创]自己封装了个Tab标签控件,效果和浏览器一样。 2010-04-25 23:50 Andy-software
确实不错哦,赞一个  回复  更多评论
  

# re: [原创]自己封装了个Tab标签控件,效果和浏览器一样。 2010-04-28 18:13 hopesfish
其实div层不用写的那么多...  回复  更多评论
  

# re: [原创]自己封装了个Tab标签控件,效果和浏览器一样。 2010-04-28 18:13 hopesfish
div层不用写那么多...使用者很郁闷的  回复  更多评论
  

# re: [原创]自己封装了个Tab标签控件,效果和浏览器一样。 2010-04-28 20:43 fantasy
@hopesfish
我想更简单啊,我是根据美工设计的图稿来做的呵呵。  回复  更多评论
  

# re: [原创]自己封装了个Tab标签控件,效果和浏览器一样。 2010-07-12 10:07 余如水
真的太好了!  回复  更多评论
  

# re: [原创]自己封装了个Tab标签控件,效果和浏览器一样。 2010-07-12 10:18 Web 2.0 技术资源
@余如水
给我找个工作嘛~~  回复  更多评论
  

# re: [原创]自己封装了个Tab标签控件,效果和浏览器一样。 2010-09-02 11:05 支持
虽然用的是JQ,但是能把它发扬光大也算是一种原创吧  回复  更多评论
  

# re: [原创]自己封装了个Tab标签控件,效果和浏览器一样。 2010-10-23 10:30 osalee
有个问题,就是生成的iframe不能高度自适应呀?
<div id="Frames" style="height:768px">
这个固定高度总是不太适合呀,因为每个的浏览高度可能不一样。
你觉得呢?  回复  更多评论
  

# re: [原创]自己封装了个Tab标签控件,效果和浏览器一样。 2011-01-26 11:51 rrrrr
想刷新里面的界面怎么办  回复  更多评论
  

# re: [原创]自己封装了个Tab标签控件,效果和浏览器一样。 2011-01-26 23:18 fantasy
@rrrrr

在tab.js中新增加个方法


加到 AbstractTab.loadFrame = function(){}后面吧。

// 刷新Tab对应的Frame
AbstractTab.refresh = function( id ){
var frameId = this.getFrameID(id);
var src = jQuery("#" + frameId ).attr("src");
var isSimple = src.indexOf("?") < 0;
var now = new Date().getTime();
var newSrc = src + (isSimple ? "?" : "&") + now;
jQuery("#" + frameId).attr("src",newSrc);
};

使用说明:
tab.refresh(ID);
tab.refresh(1) 刷新BlogJava  回复  更多评论
  

# re: [原创]自己封装了个Tab标签控件,效果和浏览器一样。 2011-05-23 10:48 麦胖
非常不错的控件,我在网上找了很久才找到这个满意的。谢谢作者的付出。

另外,我在你的基础上修改了点东西:
1、refresh 方法,我增加了判断,如果刷新的窗口不存在就返回false,如果存在而且没有被选中,就选中。
2、把刷新方法增加了一个小ICO到关闭的前面(没选中的时候没刷新ico),这样可以方便随时刷新某个tab。  回复  更多评论
  

# re: [原创]自己封装了个Tab标签控件,效果和浏览器一样。 2011-05-23 11:15 Web 2.0 技术资源
@麦胖
呵呵,谢谢赞赏。
请把你修改后的代码发到的邮箱 wellse@qq.com 我看下。  回复  更多评论
  

# re: [原创]自己封装了个Tab标签控件,效果和浏览器一样。 2011-06-03 09:33 alight
IE可以看到效果,可Goole浏览器,火弧看到的是源代码呢?  回复  更多评论
  

# re: [原创]自己封装了个Tab标签控件,效果和浏览器一样。 2011-06-17 12:33 think8848
非常感谢博主的分享啊  回复  更多评论
  

# re: [原创]自己封装了个Tab标签控件,效果和浏览器一样。 2012-02-08 18:11 szm
不错,正在看  回复  更多评论
  

# re: [原创]自己封装了个Tab标签控件,效果和浏览器一样。 2012-02-15 14:16 WE
支持  回复  更多评论
  

# re: [原创]自己封装了个Tab标签控件,效果和浏览器一样。 2012-12-06 09:31 remixooo
这个东西有内存泄露~~~  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: