首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

JQUERY树,超容易,自带载入jQuery库

2012-10-06 
JQUERY树,超简单,自带载入jQuery库var oriData [{myId:0,myParent:null,myTitle:text0},{myId:1,myPar

JQUERY树,超简单,自带载入jQuery库

var oriData = [                {myId:0,myParent:null,myTitle:'text0'},                {myId:1,myParent:0,myTitle:'text1'},                {myId:2,myParent:0,myTitle:'text2'},                {myId:3,myParent:1,myTitle:'text3'},                {myId:4,myParent:1,myTitle:'text4'},                {myId:5,myParent:3,myTitle:'text5'},                {myId:6,myParent:3,myTitle:'text6'},                {myId:7,myParent:4,myTitle:'text7'}            ];                        var scpt = document.createElement("script");            scpt.onload = scpt.onreadystatechange = function() {                if(this.readyState && this.readyState.toLowerCase() != "loaded") {                    return;                }                jQuery.noConflict();                (function($) {                    function organizeTree(data,idKey,parentKey) {        var tmp = {};        $(data).each(function() {        tmp[this[idKey]]=this;        });        var root;        $(data).each(function () {        if(this.__parentNode = tmp[this[parentKey]]) {        (this.__parentNode.__childNodes||(this.__parentNode.__childNodes=[])).push(this);        } else {        root = this;        }        });        return root;        }        function createTree(data,offset,titleKey,prepend1,prepend2,prepend3) {        offset = offset||20;        titleKey = titleKey || 'title';        var tmp = $("<div>");        var children = data.__childNodes||[];        var text = (data[titleKey]||"").valueOf();        var titleLayer = $("<div>").appendTo(tmp).html(children.length?prepend1+text:prepend3+text)        .css("cursor","pointer").attr("isTitle","true").css("line-height","20px");        var subLayer = $("<div>").css("margin-left",offset+"px").appendTo(tmp);        $(children).each(function() {        createTree(this,offset,titleKey,prepend1,prepend2,prepend3).appendTo(subLayer);        });        if(children.length) {        titleLayer.toggle(function() {        titleLayer.html(prepend2+text);        subLayer.hide("fast");        },function() {        titleLayer.html(prepend1+text);        subLayer.show("fast");        });        };        return tmp;        }        $(function() {        var root = organizeTree(oriData,'myId','myParent');        createTree(root,20,                            'myTitle',"<img src='http://www.destroydrop.com/javascripts/tree/example/img/folderopen.gif'/>",                            "<img src='http://www.destroydrop.com/javascripts/tree/example/img/folder.gif'/>","<img src='http://www.destroydrop.com/javascripts/tree/example/img/page.gif'/>"                        ).appendTo(document.body);        });                })(jQuery);            }            scpt.src="http://code.jquery.com/jquery-1.5.min.js";            document.body.appendChild(scpt);

我贴个能立竿见影看到效果的,大家打开浏览器控制台,把上面代码贴进去执行即可(什么?没有控制台?IE8 F12,chrome ctrl+shift+j,如果还没有,那就算了)
如果chrome提示恶意网站,可能是因为图床的网站有问题,但是引用的图肯定没问题的。

热点排行