浏览 3963 次
|
锁定老帖子 主题：用js书写的一个简单的tab组件
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-11-28
最后修改：2008-11-28
说明：附件aa.rar是源代码。
1 效果图 
说明： (1) 当点上面的标签，或鼠标移动到标签上面，下面的灰色框将显示对应的内容。 dddd-----对应着 xxxx; eeee对应着yyyy (2) 各个标签可以动态添加 (3)该组件名为 FSimpleTab 2 组件应用代码
<!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=utf-8" />
<title>无标题文档</title>
<link href="ss.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="FSimpleTab.js"></script>
</head>
<body>
<!--组件将在id为xxx的div下显示-->
<div id="xxx" style="position: absolute;border: 1px solid #ccc;top:80px;left:10px"></div>
<script language=Javascript>
var pa="{'width':200,'height':100,'headHeight':20,'targDiv':'xxx'}";
//定义一个FSimpleTab组件，其参数是json格式-->
var s=new FSimpleTab(pa);
s.init();//初始化
//加入标签内容
s.addItem("{'title':'dddd','content':'xxxx'}")
s.addItem("{'title':'eeee','content':'yyyy'}");
</script>
</body>
</html>
3 ss.css代码
@charset "utf-8";
.FSimpleTabBox{/*组件所占区域的外观，许多会被覆盖*/
width: 746px;
border: 1px solid #ccc;
background: #fff;
position: absolute;
height:80px;
left: 272px;
top: 36px;
}
.FSimpleTabClient {/* 标签显示区域外观*/
width:auto;
left:0px;
background:#ddd;
color:#f00;
}
.FSimpleTab{/*标签所在的整体区域外观
设定项目列表Ul元素的属性，其中background
用来设定连贯于各个列表项目下的横线，否则它们会彼此分离，
用了一张事先准备好的图片，让它放置在底部，水平重复*/
height: 20px;
margin: 0;
padding-left: 0px;
padding-right: 0px;
width:100%;
background:
url('http://tech.tom.com/images/computer/2004/02/12/bottom.gif')
repeat-x bottom;
}
.FSimpleTab li{/*各个标签背后的外观，设这一层目的是为了方便以后均分
标签所在的整体区域。
设定各个列表项目的属性，display属性设
定取消项目间的分行，list-style-type设定取消列表项目前的符号*/
margin: 0 auto;
display: inline;
list-style-type: none;
position: relative;
display:inline;
float:left;
}
.FSimpleTab a:link, .FSimpleTab a:visited{/* 这是是展现出来的标签外观。
设定标签卡中超链接的文字的属性*/
float: left;
background: #f3f3f3;
font-size: 12px;
line-height: 14px;
font-weight: bold;
padding:2px 20px 2px 20px;
margin-right: 4px;
border: 1px solid #ccc;
text-decoration: none;
color: #666;
}
.FSimpleTab a:link.selectedtab, .FSimpleTab a:visited.selectedtab{
/*设定当前被选中的标签卡中超链接的属性*/
border-bottom: 1px solid #fff;
background: #fff;
color:#00F;
}
.FSimpleTab a:hover{/*设定超链接鼠标浮动效果*/
background: #fff;
}
4 FSimpleTab.js代码
function FSimpleTab(paraJson ){ //构造方法,也定义了一个类
//定义属性,
var dd=eval("("+paraJson+")");
this.width= dd.width;
this.height=dd.height;
this.targDiv=document.getElementById(dd.targDiv);
this.targName=this.targDiv.getAttribute("id");
this.tabHead=null;
this.tabClient=null;
this.headHeight=20;
if (dd.headHeight !=null ){
this.headHeight=dd.headHeight;
}
this.tID=0;
this.count=0;//保存tabItem个数
this.targDiv.style.width=this.width+"px";
this.targDiv.style.height=this.height+"px";
//方法定义
//初始方法
this.init=function(){
//创建TabHeand
var div0=document.createElement("ul");
div0.setAttribute("id",this.targName+"FSimpleTab");
div0.className="FSimpleTab";
div0.style.height=this.headHeight+"px";
this.tabHead=div0;
this.targDiv.appendChild(div0);
//创建Tab显示区域
var div1=document.createElement("div");
div1.setAttribute("id",this.targName+"FSimpleTabClient");
div1.className="FSimpleTabClient";
var h=this.targDiv.clientHeight-this.headHeight;
if (h>0 ) div1.style.height=h+"px";
else div1.style.height="20px";
div1.style.top=this.headHeight+"px"
this.tabClient=div1;
this.targDiv.appendChild(div1);
}
//添加一个tab项目
this.addItem=function(paraJson){
//向表头添加标题信息之li
var dd=eval("("+paraJson+")");
var li=document.createElement("li");
//向表头添加标题信息之a
lia=document.createElement("a");
this.targDiv.getAttribute("ID");
lia.setAttribute("id",this.targName+"FSimpleTabTitle"+this.count);
lia.setAttribute("idno",this.count);
lia.setAttribute("href","#");
lia.onclick=(function(v) {
return function() {
//调用FSimpleTab对象的ShowTabs方法
v.ShowTabs(v,this); //这里的this是事件源对象，是dom树中的一个节点
};
}) (this);
lia.onmousemove= (function(v) {
return function() {
//调用FSimpleTab对象的ShowTabs方法
v.ShowTabs(v,this); //这里的this是事件源对象，是dom树中的一个节点
};
}) (this);
lia.innerHTML=dd.title;
li.appendChild(lia);
this.tabHead.appendChild(li);
//向显示区添加显示项目
var div0=document.createElement("div");
div0.setAttribute("id",this.targName+"FSimpleTabs"+this.count);
div0.setAttribute("idno",""+this.count);
div0.style.display="none";
div0.innerHTML=dd.content;
this.tabClient.appendChild(div0);
this.count=this.count+1;
}
//内部方法，显示选中的项目
this.ShowTabs=function(thisObj,e){
var ID=e.getAttribute("idno");
if(ID!=thisObj.tID){
eval ("document.getElementById(this.targName+'FSimpleTabTitle"+[thisObj.tID]+"').className='';");
eval ("document.getElementById(this.targName+'FSimpleTabTitle"+[ID]+"').className='selectedtab';");
eval("document.getElementById(this.targName+'FSimpleTabs"+[thisObj.tID]+"').style.display='none';");
eval("document.getElementById(this.targName+'FSimpleTabs"+[ID]+"').style.display='';");
thisObj.tID=ID;
}
}
}
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2008-12-01
我写类似这种代码的时候 常常是大量使用innerHTML来构造HTML代码 像这样的tab类 要是使用innerHTML可以写的很短，大大减少了代码量 而且我也有点习惯了这种简单的方式
想问问,使用innerHTML这样直接构造代码会有什么不好的地方没有？ |
| 返回顶楼 | |
|
发表时间：2008-12-01
我更喜欢使用构造函数+JSON方式来构造对象
function xxxx(xx) {
this.xx = xx
}
xxxx.prototype = {
method1 : function() {
} ,
...
}
|
| 返回顶楼 | |
|
发表时间：2008-12-01
ake87 写道
我写类似这种代码的时候 常常是大量使用innerHTML来构造HTML代码 像这样的tab类 要是使用innerHTML可以写的很短，大大减少了代码量 <script src="/javascripts/tinymce/plugins/javaeye/langs/zh.js" type="text/javascript"></script> <script src="/javascripts/tinymce/themes/advanced/langs/zh.js" type="text/javascript"></script> 而且我也有点习惯了这种简单的方式
想问问,使用innerHTML这样直接构造代码会有什么不好的地方没有？ INNERHTML很好，很不错！以后会尽量用innerHTML
这个简单例子，会保留这种方式，有些特珠情况下，如仅修改css样式中某个属性值， 有innerHTML就不太划算。
当然，如果要实用，尽可能的用innerHTML。感谢兄台回复与说明！ |
| 返回顶楼 | |
|
发表时间：2008-12-01
fnet 写道 我更喜欢使用构造函数+JSON方式来构造对象
function xxxx(xx) {
this.xx = xx
}
xxxx.prototype = {
method1 : function() {
} ,
...
}
json与interhtml缩短了代码量，我也喜欢！ |
| 返回顶楼 | |
