Tag的自定义类

2022-07-15 80酷酷网 80kuku.com

<!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); } var webSiteID = 6;window.onload = crea; </script></head><body> <hr /> <div id="tag"></div> <!-- <div id="content1" class="content" <div id="content2" class="content" <div id="content3" class="content" <div id="content4" class="content" <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

// 使用方法
//      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";
}