学习Tag的自定义类

<!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> <title>无标题页</title> <link href="http://www.17mm.net/StyleSheet.css" rel="stylesheet" type="text/css" /> <script language="javascript" type="text/javascript" src="http://www.17mm.net/TagPage.js"></script> <script language="javascript" type="text/javascript"> function crea(){ var obj = new CTagPages("maintag"); obj.add(new CTPage("files","文件1","content6"));//创建一个文档中不存在的内容页 obj.add(new CTPage("edits","编辑","content2")); obj.add(new CTPage("windows","窗口","content3")); obj.add(new CTPage("helps","帮助","content4")); document.all.tag.innerHTML = obj; obj.setTag(1); } window.onload = crea; </script> </head> <body> <hr /> <div id="tag"></div>  <div id="content2" class="content" style="background-color:Aqua;">爱你中国</div> <div id="content3" class="content" style="background-color:Fuchsia">中国爱你</div> <div id="content4" class="content" style="background-color:Blue">很爱你中国</div> <div id="tag1"></div> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

CTagPages
属性
Tagpages??标签数组

方法

[n]???检索标签
Add???增加标签页
Delete??删除标签页
Update??更新标签页
Insert??插入标签页
Clear??清空标签页
SetTag??设置一个标签被选中，参数可以是TAG的ID也可以是序号
GetTag??得到被选中的TAG对象

CTPage

属性

tagId?? ??标签ID????

tagCaption?标签上显示的文字

tagContId??标签内容ID

JS类下载

// 使用方法
//????? 1.var tagpages = new CTagPages("maintag");建立一个TagPages对象,参数为这个标签页集合的ID,区分其它标签页
//????? 2.var tagpage = new CTPage("files","文件","content6");建立一个标签页,参数1指这个标签页的ID,参数2标签文字,
//????????????????????? 参数3与此标签相对的DIV,如果指定一个文档中不存在的DIV则系统会自动创建一个DIV;
//????? 3.tagpages.add(tagpage);使用ADD方法增加把标签增加到标签页中.
//????? 4.document.all.tag.innerHTML = tagpages;把标签页增加到文档中.
//????? 5.tagpages.setTag(1)或tagpages.setTag("files");设置默认选中的标签页,参数可以使用[数字]和[ID名称]两种方式
//?????

//公共变量
var currentTag = null;
var currentDiv = null;

//////////////////////////////////////////////////////////////////
////////////////////////////////
//单个标签对象
function CTPage(tagId, tagCaption, tagDiv){
??? this.checkDiv(tagDiv);
??? this.id = tagId;
??? this.caption = tagCaption;
??? this.divid = tagDiv;
??? this.selected = false;
}

function tagToString(){
??? var str = "<li class=\"";
??????? str += this.selected?"focus":"blur";
??????? str += "\" id=\"" + this.id +"\"" +
????????????? " divid=\"" + this.divid +"\"" +
????????????? " onclick=\"secBoard(this)\"" +
????????????? " >"+ this.caption + "</li>";
??? return str;
}

function CheckDiv(divname){
??? var tdiv = document.getElementById(divname);
??? if(!tdiv){
??????? tdiv = document.createElement("DIV");
??????? tdiv.id = divname;
??????? tdiv.className = "content";
??????? tdiv.innerHTML = "新的";
??????? document.body.appendChild(tdiv);
??? }
??? tdiv.style.display = "none";
}
CTPage.prototype.checkDiv = CheckDiv;
CTPage.prototype.toString = tagToString;
////////////////////////////////////////////////////////////////
//////////////////////////////
//标签集合对象

function CTagPages(id){
??? this.id = id;
??? this.tagpages = new Array();
}

function Add(objtg){
??? this.tagpages[this.tagpages.length] = objtg;
}

function pageToString(){
??? var str="<ul id=\""+this.id+"\" class=\"tagpage\">";
??? for(var i=0; i<this.tagpages.length; i++){
??????? str += this.tagpages[i];
??? }
??? str +="</ul>";
???
??? return str;
}

function Index(n){
??? if(n>this.tagpages.length-1 || n<0){
??????? return;
??? }else{
??????? return this.tagpages[n];
??? }
}

CTagPages.prototype.setTag = SetTag;
CTagPages.prototype.index = Index;
CTagPages.prototype.add = Add;
CTagPages.prototype.toString = pageToString;

////////////////////////////////////////////////////////////////
/////////////////////////////////
//通用函数

function secBoard(obj)
{
??? //var obj = event.srcElement;
??? currentTag.className = "blur";
??? currentTag = obj;
??? currentTag.className = "focus";
???
??? currentDiv.style.display = "none";
??? currentDiv = document.getElementById(obj.divid);
??? currentDiv.style.display = "block";
}

技术文档