인터넷정보

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

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

API를 모와둔 사이트 gotapi.com (0)	2007.10.11
API를 모와둔 사이트 gotapi.com (0)	2007.10.11
PNG24 반투명 지원법 (IE용) (0)	2007.10.11
PNG24 반투명 지원법 (IE용) (0)	2007.10.11
JS 트리구조 메뉴 (0)	2007.10.11
select 용 함수 모음 (0)	2007.10.11
select 용 함수 모음 (0)	2007.10.11
UTF-8로 바꾸는 법, 문자열 인코딩 바꾸기 (0)	2007.10.11
UTF-8로 바꾸는 법, 문자열 인코딩 바꾸기 (0)	2007.10.11
IE7의 변경(오류,버그,바뀐점) (0)	2007.10.11

현재글JS 트리구조 메뉴

생활의지혜, 게임, 레크레이션, 생활의 지혜, 우편번호검색, 혈액형, 무한도전, 우편번호, 영문 우편번호, 바베큐, 새창, 팝업, 꽃말, font, 애드센스, EBS지식채널, 셀렉트박스, 폰트, 페이징, 아토피,

Today :
Yesterday :

일	월	화	수	목	금	토
					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	29	30

INFOTIP

JS 트리구조 메뉴

Destroydrop » Javascripts » Tree » Api

Overview

Functions

add()

Parameters

Example

openAll()

Example

closeAll()

Example

openTo()

Parameters

Example

Configuration

Example

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

'인터넷정보'의 다른글

티스토리툴바

JS 트리구조 메뉴

Destroydrop » Javascripts » Tree » Api

Overview

Functions

add()

Parameters

Example

openAll()

Example

closeAll()

Example

openTo()

Parameters

Example

Configuration

Example

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

'인터넷정보'의 다른글

관련글

티스토리툴바