`
yunhaifeiwu
  • 浏览: 162912 次
  • 性别: Icon_minigender_1
  • 来自: 宁波
社区版块
存档分类
最新评论

用js书写的一个简单的tab组件

tinymcejsonCSSJavaScriptprototype 
阅读更多
说明：附件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;
		}

	}	


 }

  • 大小: 3.8 KB
  • aa.rar (2.9 KB)
  • 下载次数: 186
分享到：
| 用js书写UI组件之js基础知识
评论
4 楼 yunhaifeiwu 2008-12-01  
fnet 写道
我更喜欢使用构造函数+JSON方式来构造对象 

function xxxx(xx) {
   this.xx = xx
}

xxxx.prototype = {
   method1 : function() {

   } ,
   ...
}




json与interhtml缩短了代码量，我也喜欢！

3 楼 yunhaifeiwu 2008-12-01  
<div class='quote_title'>ake87 写道</div>
<div class='quote_div'>
<p>我写类似这种代码的时候</p>
<p>常常是大量使用innerHTML来构造HTML代码</p>
<p>像这样的tab类</p>
<p>要是使用innerHTML可以写的很短，大大减少了代码量</p>
<p>
&lt;script src="/javascripts/tinymce/plugins/javaeye/langs/zh.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="/javascripts/tinymce/themes/advanced/langs/zh.js" type="text/javascript"&gt;&lt;/script&gt;
而且我也有点习惯了这种简单的方式</p>
<p> </p>
<p>想问问,使用innerHTML这样直接构造代码会有什么不好的地方没有？</p>
</div>
<p>INNERHTML很好，很不错！以后会尽量用innerHTML</p>
<p> </p>
<p>这个简单例子，会保留这种方式，有些特珠情况下，如仅修改css样式中某个属性值，</p>
<p>有innerHTML就不太划算。</p>
<p> </p>
<p>当然，如果要实用，尽可能的用innerHTML。感谢兄台回复与说明！</p>
2 楼 fnet 2008-12-01  
我更喜欢使用构造函数+JSON方式来构造对象 

function xxxx(xx) {
   this.xx = xx
}

xxxx.prototype = {
   method1 : function() {

   } ,
   ...
}


1 楼 ake87 2008-12-01  
<p>我写类似这种代码的时候</p>
<p>常常是大量使用innerHTML来构造HTML代码</p>
<p>像这样的tab类</p>
<p>要是使用innerHTML可以写的很短，大大减少了代码量</p>
<p>而且我也有点习惯了这种简单的方式</p>
<p> </p>
<p>想问问,使用innerHTML这样直接构造代码会有什么不好的地方没有？</p>
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    基于Jquery easyui 选中特定的tab

    在使用Jquery easyui框架开发Web界面时，tab组件是经常用到的一个界面元素。Tab组件可以实现页面内内容的分块展示，提高页面的使用效率，用户可以通过切换不同的tab来查看不同的内容区块。在实际应用中，经常需要在...

    ReactNative开发的食谱应用程序

    1. **React基础**：React Native基于React，这是一个用于构建用户界面的JavaScript库。React采用组件化思维，允许开发者将UI拆分为可复用的组件，每个组件都有自己的状态和生命周期方法。在这个食谱应用中，我们可能...

    微信小程序自定义tabBar在uni-app的适配详解

    - uni-app使用类Vue开发，一个Vue文件编译为四个微信页面文件（wxml，wxss，json，js）。因此可以尝试直接写一个custom-tab-bar.vue文件，但实际上只能在uni-app下创建一个custom-tab-bar目录并编写微信小程序要求的...

    jQuery.switchPage.js:基于jQuery的全屏切换插件

    jQuery.switchPage.js 知识点 通过css使div全屏 实现jQuery插件开发 重写鼠标滚动事件 切屏动画实现 开发过程 在sublime text 下开发，安装emmet插件，快速书写html代码 ! + tab : 快速生成html5文档结构 #container...

    ASP网页代码规范.pdf

    - **标记缩进规范**：最高级别的标记采用左对齐方式书写，下一级标记相对于父标记向右缩进一个Tab的距离。 ##### 2. 客户端JavaScript规范 - **变量命名规范**：变量名首字母必须小写，并使用类型缩写开头；常量及...

    YT-REACT-TABS

    【标题】"YT-REACT-TABS"是一个基于React技术实现的YouTube视频播放器的源码项目，专门用于展示如何在React应用中构建一个类似YouTube的Tab切换功能。这个项目可能包括了创建、切换和管理多个视频播放Tab的组件化...

    百度前端代码规范.pdf

    在具体的代码风格方面，JavaScript编码规范规定了代码的布局和格式，例如二元运算符两侧必须有一个空格，而一元运算符与操作对象之间不允许有空格。左花括号“{”前必须有一个空格，以保持代码块的清晰性。这些规则...

    前端开发规范，需要的同学可自行下载

    1. **缩进**：强制要求使用4个空格作为缩进层级，禁止使用2个空格或tab字符。这样做可以确保代码格式的一致性，避免因为缩进不一致带来的混乱。 2. **单行长度**：每行代码不应超过120个字符。这一规定有助于保持...

    前端代码规范.docx

    1. 换行缩进约束（四个空格或一个 tab），以确保代码的可读性和维护性。 2. 标点或分号补齐，以确保代码的正确性和可维护性。 3. 参照 demo 中其他格式，以确保代码的一致性和可维护性。 组件模版示例 1. 计量单位...

    ExtAspNet_v2.3.2_dll

    -修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题，这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用AutoPostBack的Grid，其RowClick会覆盖LinkButtonField, HyperLinkField, CheckBoxField的...

    React-Native-Front-End:前端iOSandroid应用程序

    React-Native-Front-End 是一个专为开发跨平台移动应用而设计的前端框架，它允许开发者使用JavaScript和React库来构建原生的iOS和Android应用程序。React Native结合了Web开发的灵活性和移动开发的强大功能，让...

    ExtAspNet v2.2.1 （2009-4-1） 值得一看

    -修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题，这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用AutoPostBack的Grid，其RowClick会覆盖LinkButtonField, HyperLinkField, CheckBoxField的...

    CSS代码规范.pdf

    - 媒体查询应靠近相关规则，而非集中在一个文件。 - 带前缀的属性应保持垂直对齐，如`.div{-webkit-box-shadow:10px 10px 5px #888;box-shadow:10px 10px 5px #888;}`。 - 单条声明语句建议写在同一行。 - 使用...

    ReactNative

    TypeScript是JavaScript的一个超集，它为JavaScript增加了静态类型检查和许多现代语言特性，如接口、泛型和装饰器等。这些特性有助于提高代码质量，减少运行时错误，同时为大型项目提供更好的可维护性和可扩展性。 ...

    vue-atom-snippets：:rocket:我的日常Vue工作流的Vue片段。 最初是出色的https：github.comsdrasvue-vscode-snippets的端口

    Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。它以其简单易学、灵活和组件化的特点深受开发者喜爱。在给定的标题和描述中提到的 "vue-atom-snippets" 是一个专门为Atom编辑器定制的Vue开发工具，它...

    前端开发规范

    2. **文本缩进**：推荐使用4个空格进行代码缩进，避免使用制表符，以确保不同编辑器下的显示一致性。 3. **注释**：注释应简洁明了，描述代码功能和逻辑，方便他人理解。注释应使用英文，遵循多行注释和单行注释的...

    前端开发规范文档

    - 【强制】使用4个空格作为一个缩进层级，禁止使用2个空格或Tab字符进行缩进。这样可以保证代码的一致性和可读性。 ##### 2. 属性 - **2.1 属性引号** - 【强制】对于属性的定义使用双引号，禁止使用单引号或者不...

Magicbox
Global site tag (gtag.js) - Google Analytics