JS 트리구조 메뉴

인터넷정보2007. 10. 11. 14:26

뷰어
댓글로
이전글
다음글

http://www.destroydrop.com/javascripts/tree/

Key features

Unlimited number of levels
Can be used with or without frames
Remembers the state of the tree between pages
Possible to have as many trees as you like on a page
All major browsers suported
- Internet Explorer 5+
- Netscape 6+
- Opera 7+
- Mozilla
Generates XHTML 1.0 strict validated output
Alternative images for each node

dtree.js

/*--------------------------------------------------|

| dTree 2.05 | www.destroydrop.com/javascript/tree/ |

|---------------------------------------------------|

| Copyright (c) 2002-2003 Geir Landr?              |

|                                                   |

| This script can be used freely as long as all     |

| copyright messages are intact.                    |

|                                                   |

| Updated: 17.04.2003                               |

|--------------------------------------------------*/



// Node object

function Node(id, pid, name, url, title, target, icon, iconOpen, open) {

	this.id = id;

	this.pid = pid;

	this.name = name;

	this.url = url;

	this.title = title;

	this.target = target;

	this.icon = icon;

	this.iconOpen = iconOpen;

	this._io = open || false;

	this._is = false;

	this._ls = false;

	this._hc = false;

	this._ai = 0;

	this._p;

};



// Tree object

function dTree(objName) {

	this.config = {

		target					: null,

		folderLinks			: true,

		useSelection		: true,

		useCookies			: true,

		useLines				: true,

		useIcons				: true,

		useStatusText		: false,

		closeSameLevel	: false,

		inOrder					: false

	}

	this.icon = {

		root				: 'img/base.gif',

		folder			: 'img/folder.gif',

		folderOpen	: 'img/folderopen.gif',

		node				: 'img/page.gif',

		empty				: 'img/empty.gif',

		line				: 'img/line.gif',

		join				: 'img/join.gif',

		joinBottom	: 'img/joinbottom.gif',

		plus				: 'img/plus.gif',

		plusBottom	: 'img/plusbottom.gif',

		minus				: 'img/minus.gif',

		minusBottom	: 'img/minusbottom.gif',

		nlPlus			: 'img/nolines_plus.gif',

		nlMinus			: 'img/nolines_minus.gif'

	};

	this.obj = objName;

	this.aNodes = [];

	this.aIndent = [];

	this.root = new Node(-1);

	this.selectedNode = null;

	this.selectedFound = false;

	this.completed = false;

};



// Adds a new node to the node array

dTree.prototype.add = function(id, pid, name, url, title, target, icon, iconOpen, open) {

	this.aNodes[this.aNodes.length] = new Node(id, pid, name, url, title, target, icon, iconOpen, open);

};



// Open/close all nodes

dTree.prototype.openAll = function() {

	this.oAll(true);

};

dTree.prototype.closeAll = function() {

	this.oAll(false);

};



// Outputs the tree to the page

dTree.prototype.toString = function() {

	var str = '\n';

	if (document.getElementById) {

		if (this.config.useCookies) this.selectedNode = this.getSelected();

		str += this.addNode(this.root);

	} else str += 'Browser not supported.';

	str += '';

	if (!this.selectedFound) this.selectedNode = null;

	this.completed = true;

	return str;

};



// Creates the tree structure

dTree.prototype.addNode = function(pNode) {

	var str = '';

	var n=0;

	if (this.config.inOrder) n = pNode._ai;

	for (n; n

example01.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
	<title>Destroydrop » Javascripts » Tree</title>

	<link rel="StyleSheet" href="dtree.css" type="text/css" />
	<script type="text/javascript" src="dtree.js"></script>

</head>

<body>

<h1><a href="/">Destroydrop</a> » <a href="/javascripts/">Javascripts</a> » <a href="/javascripts/tree/">Tree</a></h1>

<h2>Example</h2>

<div class="dtree">

	<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>

	<script type="text/javascript">
		<!--

		d = new dTree('d');

		d.add(0,-1,'My example tree');
		d.add(1,0,'Node 1','example01.html');
		d.add(2,0,'Node 2','example01.html');
		d.add(3,1,'Node 1.1','example01.html');
		d.add(4,0,'Node 3','example01.html');
		d.add(5,3,'Node 1.1.1','example01.html');
		d.add(6,5,'Node 1.1.1.1','example01.html');
		d.add(7,0,'Node 4','example01.html');
		d.add(8,1,'Node 1.2','example01.html');
		d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
		d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
		d.add(11,9,'Mom\'s birthday','example01.html');
		d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');

		document.write(d);

		//-->
	</script>

</div>

<p><a href="mailto:drop@destroydrop.com">©2002-2003 Geir Landrö</a></p>

</body>

</html>

Destroydrop » Javascripts » Tree » Api

Overview

Functions
- add
- openAll
- closeAll
- openTo
Configuration

Functions

add()

Adds a node to the tree.
Can only be called before the tree is drawn.

id, pid and name are required.

Parameters

Name	Type	Description
id	Number	Unique identity number.
pid	Number	Number refering to the parent node. The value for the root node has to be -1.
name	String	Text label for the node.
url	String	Url for the node.
title	String	Title for the node.
target	String	Target for the node.
icon	String	Image file to use as the icon. Uses default if not specified.
iconOpen	String	Image file to use as the open icon. Uses default if not specified.
open	Boolean	Is the node open.

Example

mytree.add(1, 0, 'My node', 'node.html', 'node title', 'mainframe', 'img/musicfolder.gif');

openAll()

Opens all the nodes.
Can be called before and after the tree is drawn.

Example

mytree.openAll();

closeAll()

Closes all the nodes.
Can be called before and after the tree is drawn.

Example

mytree.closeAll();

openTo()

Opens the tree to a certain node and can also select the node.
Can only be called after the tree is drawn.

Parameters

Name	Type	Description
id	Number	Identity number for the node.
select	Boolean	Should the node be selected.

Example

mytree.openTo(4, true);

Configuration

Variable	Type	Default	Description
target	String	true	Target for all the nodes.
folderLinks	Boolean	true	Should folders be links.
useSelection	Boolean	true	Nodes can be selected(highlighted).
useCookies	Boolean	true	The tree uses cookies to rember it's state.
useLines	Boolean	true	Tree is drawn with lines.
useIcons	Boolean	true	Tree is drawn with icons.
useStatusText	Boolean	false	Displays node names in the statusbar instead of the url.
closeSameLevel	Boolean	false	Only one node within a parent can be expanded at the same time. openAll() and closeAll() functions do not work when this is enabled.
inOrder	Boolean	false	If parent nodes are always added before children, setting this to true speeds up the tree.

Example

mytree.config.target = "mytarget";

XHTML, CSS

'인터넷정보' 카테고리의 다른 글

롤링 배너용 js(class 형식) (0)	2007.10.11
try{...} catch(e){...} 구문 , e.number,e.description (0)	2007.10.11
문자열 바이트 길이알기, 바이트만큼 자르기 (0)	2007.10.11
API를 모와둔 사이트 gotapi.com (0)	2007.10.11
PNG24 반투명 지원법 (IE용) (0)	2007.10.11
select 용 함수 모음 (0)	2007.10.11
UTF-8로 바꾸는 법, 문자열 인코딩 바꾸기 (0)	2007.10.11
IE7의 변경(오류,버그,바뀐점) (0)	2007.10.11
이미지 없이 라운딩 박스 표현하기1 (0)	2007.10.11
주민/외국인 등록번호 (0)	2007.10.11

일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

영원한사랑

JS 트리구조 메뉴

Destroydrop » Javascripts » Tree » Api

Overview

Functions

add()

Parameters

Example

openAll()

Example

closeAll()

Example

openTo()

Parameters

Example

Configuration

Example

'인터넷정보' 카테고리의 다른 글

최근에 올라온 글

최근에 달린 댓글

공지사항

글 보관함

링크

티스토리툴바