JS Tree
10637 ワード
<!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>Untitled 1</title>
<link rel="stylesheet" type="text/css" href="st/css/style.css" />
</head>
<body>
<div class="left_nav_content" id="tree">
<dl>
<dt class="folder_title">
<img alt="" src="st/img/expand_all.gif" />
<span>Project 01</dt>
<dd class="folder_content">
<dl>
<dt class="folder_title">
<img alt="" src="st/img/expand_all.gif" /> common</dt>
<dd class="folder_content">
<dl>
<dt class="folder_title">
<img alt="" src="st/img/expand_all.gif" /> css</dt>
<dd class="folder_content">
<dl>
<dt class="endnode">
<img alt="" src="st/img/endnode.png" /> style.css</dt>
</dl>
</dd>
</dl>
<dl>
<dt class="folder_title">
<img alt="" src="st/img/expand_all.gif" /> img</dt>
<dd class="folder_content">
<dl>
<dt class="endnode">
<img alt="" src="st/img/endnode.png" /> blank.png</dt>
</dl>
</dd>
</dl>
<dl>
<dt class="folder_title">
<img alt="" src="st/img/expand_all.gif" /> js</dt>
<dd class="folder_content">
<dl>
<dt class="endnode">
<img alt="" src="st/img/endnode.png" /> jmin.js</dt>
</dl>
</dd>
</dl>
</dd>
<dt class="endnode">
<img alt="" src="st/img/endnode.png" /> index.htm</dt>
</dl>
</dd>
</dl>
</div>
<script type="text/javascript" src="st/js/mm.js"></script>
<script type="text/javascript">
function getEvent(){
if(window.event) {return window.event;}
func=getEvent.caller;
while(func!=null){
var arg0=func.arguments[0];
if(arg0){
if((arg0.constructor==Event || arg0.constructor ==MouseEvent
|| arg0.constructor==KeyboardEvent)
||(typeof(arg0)=="object" && arg0.preventDefault
&& arg0.stopPropagation)){
return arg0;
}
}
func=func.caller;
}
return null;
}
//
function isNull(a){ return a === null;}
function isUndefined(a){ return a === undefined;}
function isNumber(a){ return typeof a === 'number';}
function isString(a){ return ('string'==typeof a||'object'==typeof a)&&a.constructor==String;}
function isBoolean(a){ return typeof a === 'boolean';}
function isDate(a){ return (typeof a=='object')&&a.constructor==Date; }
function isArray(a){ return Object.prototype.toString.apply(a) === '[object Array]';}
function isFunction(a){ return Object.prototype.toString.call(a) === '[object Function]';}
function isWindow(o){ return o && typeof o === 'object' && 'setInterval' in o;}
function isHTMLElement(a){var d = document.createElement("div");try{d.appendChild(a.cloneNode(true));return a.nodeType==1 ? true : false;}catch(e){return a==window || a==document;}}
var Tree = new Module({
id:"leftTree",
init:function(){
this.element = DOM.getElementById(this.id);
this.element.onclick=function(){
ModuleA.addEventListener('onclick A');
ModuleA.fireEvent('onclick A',[ModuleA]);
};
this.addEventListener('onclick A');
}
});
window.onload=function(){
MM.init([ModuleA]);
//ModuleA.init();
}
var TreeView =function(params){
if(!params) return null;
var self = this;
this.id = params.id;
this.element = this.childContainer = params.element;
this.className = params.className;
this.childNodes=[];
this.selectedNode = null;
this.childData = params.childData;
params.root = self;
this.initialize = function(){
if(self.childData.length>0){
for(var i in self.childData){
self.childData[i].root = params.root;
self.childData[i].parent = self;
self.childNodes.push(new TreeNode(self.childData[i]));
}
}
}
this.insertChild = function(params){
if(!params) return null;
params.nodeType="project";
self.childNodes.push(new TreeNode(params));
}
oElem = this.element;
if(oElem.addEventListener==undefined && !!oElem.attachEvent){
oElem.addEventListener=function(type,fn,sign){
if(!isFunction(fn) && isString(fn)) fn=new Function(fn);
if(!!isFunction(fn)) oElem.attachEvent("on"+type,fn);
};
}
function operate(){
var e = getEvent();
var src = e.srcElement||e.target;
var treeNode = src.treeNode;
while(!treeNode){
if(src.tagName=="DT"||src.tagName=="dt"||src.tagName=="BODY"||src.tagName=="BODY") break;
src = src.parentNode;
}
if(!!treeNode){
treeNode.root.selectedNode = treeNode
if(treeNode.expanded){
treeNode.expanded=false;
treeNode.collapse();
}
else{
treeNode.expanded=true;
treeNode.expand();
}
}
}
oElem.addEventListener('click',operate,false);
this.initialize();
}
var TreeNode = function(params){
if(!params) return null;
var self = this;
//create DOM
var dl = document.createElement("DL");
var dt = document.createElement("DT");
var dd = document.createElement("DD");
dl.treeNode = this;
dt.treeNode = this;
dd.treeNode = this;
dt.innerHTML = params.title;
dt.className = params.root.className[params.nodeType]['collapse'];
dd.style.display = "none";
dl.appendChild(dt);
dl.appendChild(dd);
//set property
this.element = dl;
this.title = dt;
this.childContainer = dd;
this.id = params.id;
this.nodeType = params.nodeType;
this.childNodes = [];
this.parent = params.parent;
this.childData = params.childData;
this.root = params.root;
this.expanded = false;
//set method
this.initialize = function(){
self.parent.childContainer.appendChild(self.element);
if(!!self.childData&&self.childData.length>0){
for(var i in self.childData){
params.childData[i].root = params.root;
params.childData[i].parent = self;
self.childNodes.push(new TreeNode(params.childData[i]));
}
}
}
this.expand = function(){
self.title.className=self.root.className[self.nodeType]['expand'];
if(self.childNodes.length>0)
self.childContainer.style.display="block";
}
this.collapse = function(){
self.title.className=self.root.className[self.nodeType]['collapse'];
self.childContainer.style.display="none";
}
this.insertChild = function(params){
if(!params) return null;
self.childNodes.push(new TreeNode(params));
}
this.expandAll = function(){
self.expand();
if(self.childNodes.length>0){
for(var i in self.childNodes){
self.childNodes[i].expandAll();
}
}
}
this.collapseAll = function(){
self.collapse();
if(self.childNodes.length>0){
for(var i in self.childNodes){
self.childNodes[i].collapseAll();
}
}
}
this.initialize();
}
window.onload = function(){
var leftTree = new TreeView({
id:"Tree"+(new Date()).getTime()+Math.random(),
element:document.getElementById('leftTree'),
childData:[
{id:'idx1',title:'Project01',nodeType:'project',childData:[
{id:'idx3',title:'st',nodeType:'folder',childData:[
{id:'idx4',title:'blank.txt',nodeType:'file'}
]}
]},
{id:'idx2',title:'project02',nodeType:'project',childData:[]}
],
className:{
project:{
expand:'project_expand',
collapse:'project_collapse'
},
folder:{
expand:'folder_expand',
collapse:'folder_collapse'
},
file:{
expand:'file_expand',
collapse:'file_collapse'
}
}
});
}
</script>
<div id="leftTree">
</div>
</body>
png ->htm
</html>