关于作者

有聊：原创一个树

上一篇 / 下一篇 2007-12-27 16:50:28 / 个人分类：JScript编程

查看( 862 ) / 评论( 18 )

CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gbk">

<title>byTree demo!</title>

<style type="text/css">

html, body {

        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

        font-size:12px;

}

#tree {

        width:200px;

        height:500px;

        border:1px solid #cccccc;

        overflow:auto;

        white-space:nowrap;

        float:left;

}

#ifr {

        width:600px;

        height:500px;

        border:1px solid #cccccc;

        border-left:0px;

        float:left;

}

</style>

</head>

<body>

<div id="tree"></div>

<iframe name="tree" id="ifr" frameborder="0" src="about:blank"></iframe>

<script language="JavaScript" src="_class_tree.js"></script>

<script language="JavaScript">

///////////class start/////////////

function $(s){

        return document.getElementById(s);

}



function byTree(){

        var s = this;

        this.tree = new Array();

        this.path = "http://www.wscript.cn/demo/script/javascript/tree/images";

        this.name = "tree";

        this._push = function (c){

                var tree_ = new Array();

                for(var i = 0; i < this.tree.length; i ++){

                        if(this.tree[i][1] == c){

                                tree_.push(this.tree[i]);

                        };

                };

                return tree_;

        };

        this._next = function (c){

                var k = 0;

                for(var i = 0; i < this.tree.length; i ++){

                        if(this.tree[i][1] == c){

                                k ++;

                        };

                };

                return k != 0;

        };

        this.show = function(){

                (function (){

                        var head = document.getElementsByTagName("head")[0];

                        var link = document.createElement("link");

                        link.rel = "stylesheet";

                        link.href = s.path + "/style.css";

                        link.type = "text/css";

                        link.media = "all";

                        head.appendChild(link);

                        $(s.name).className = "byTree";

                })();

                $(s.name).innerHTML = "<div id='" + s.name + "_0'><img src='" + s.path + "/nolines_minus.gif' onclick=\"byTree.prototype._click.call(this, '" + s.name + "');\" /><img src='" + s.path + "/base.gif' onclick=\"byTree.prototype._click.call(this.previousSibling, '" + s.name + "');\" /><a href='javascript:void(0);' onclick=\"byTree.prototype._click.call(this.previousSibling.previousSibling, '" + s.name + "');\">" + s.tree[0][2] + "</a></div><div></div>";

                (function _open(k, c, e){

                        var __tree = s._push(k);

                        for(var i = 0; i < __tree.length; i ++){

                                var __next = s._next(__tree[i][0]);

                                var __plus = (i == __tree.length - 1) ? "plusbottom" : "plus";

                                __plus = __next ? __plus : __plus.replace(/plus/, "join");

                                var __treeT = document.createElement("div");

                                __treeT.id = s.name + "_" + __tree[i][0];

                                var _tree_p = e + "<img src='" + s.path + "/" + c + ".gif' />";

                                __treeT.innerHTML += _tree_p + "<img src='" + s.path + "/" + __plus + ".gif' onclick=\"byTree.prototype._click.call(this, '" + s.name + "');\" /><img src='" + s.path + "/" + (__next ? "folder" : "page") + ".gif' onclick=\"byTree.prototype._click.call(this.previousSibling, '" + s.name + "');\" />";

                                __treeT.innerHTML += "<a href='" + __tree[i][3] + "' target='" + s.name + "' onclick=\"byTree.prototype._click.call(this.previousSibling.previousSibling, '" + s.name + "');\">" + __tree[i][2] + "</a>";

                                $(s.name + "_" + k).nextSibling.appendChild(__treeT);

                                var __treeR = document.createElement("div");

                                __treeR.className = "hide";

                                $(s.name + "_" + k).nextSibling.appendChild(__treeR);

                                _open(__tree[i][0], (/bottom/.test(__plus)) ? "empty" : "line", _tree_p);

                        };

                })(s.tree[0][0], "empty", "");

        };

};

byTree.prototype._click = function (){

        if(this.parentNode.nextSibling.className == "hide"){

                this.parentNode.nextSibling.className = "";

                this.src = this.src.replace(/plus/, "minus");

                this.nextSibling.src = this.nextSibling.src.replace(/folder/, "folderopen");

        }

        else{

                this.parentNode.nextSibling.className = "hide";

                this.src = this.src.replace(/minus/, "plus");

                this.nextSibling.src = this.nextSibling.src.replace(/folderopen/, "folder");

        };

        for(var i = 0; i < $(arguments[0]).getElementsByTagName("a").length; i ++){

                $(arguments[0]).getElementsByTagName("a")[i].style.backgroundColor = "";

                $(arguments[0]).getElementsByTagName("a")[i].style.color = "";

        };

        this.parentNode.getElementsByTagName("a")[0].style.backgroundColor = "#3366cc";

        this.parentNode.getElementsByTagName("a")[0].style.color = "#ffffff";

};

////////class end/////////

var t = new byTree();

t.tree = [

        [0, -1, "我的电脑"],

        [1, 0, "技术", "javascript:void(0);"],

        [2, 0, "门户", "javascript:void(0);"],

        [3, 0, "影视", "javascript:void(0);"],

        [4, 1, "无忧脚本", "javascript:void(0);"],

        [5, 1, "CSDN", "http://www.csdn.net/"],

        [6, 1, "蓝色理想", "http://www.blueidea.com/"],

        [7, 1, "IECN", "http://www.iecn.net/"],

        [8, 2, "网易", "http://www.163.com/"],

        [9, 2, "雅虎", "http://www.yahoo.com.cn/"],

        [10, 2, "新浪", "http://www.sina.com.cn/"],

        [11, 3, "优酷", "http://www.youku.com/"],

        [12, 3, "酷六", "http://www.ku6.com/"],

        [13, 3, "土豆", "http://www.tudou.com/"],

        [14, 3, "易视", "http://www.wscript.cn/v/y/"],

        [15, 4, "网站", "http://www.51js.com/"],

        [16, 4, "论坛", "http://bbs.51js.com/"],

        [17, 0, "WScript", "http://www.wscript.cn/blog/"]

];

t.name = "tree";

t.show();

t = null;

</script>

</body>

</html>