21. 트리메뉴를 사용해 보자. (2) api.html -php

21. 트리메뉴를 사용해 보자. (2) api.html -php

 

api.html

사용되는 함수와 파라미터 사용법을 설명한 파일.

 

add() :

메뉴를 추가할 때 사용한다.

 

add()함수에 들어가는 파라미터.(생략 가능한 값도 있다.)

Name	Type	Description
id	Number	각 메뉴의 고유 id. 필수
pid	Number	부모 메뉴의 id번호이다. root 메뉴는 '-1'. 필수
name	String	메뉴 이름. 필수
url	String	메뉴를 선택하면 이동할 page(url).
title	String	마우스가 올라가 있으면 나타나는 설명.
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	메뉴가 열려있는지의 상태.

 

예 (위의 예제 그림과는 메뉴의 단계가 다르게 설정했다.)

//pid가 -1이므로 root메뉴. 메뉴 이름은 'My example tree'

d.add(0,-1,'My example tree');

 

// pid가 0이면 1단계 메뉴. mouse가 올라가 있으면 나타나는 title(node title).

// mainframe이 target으로 지정됨.

// img/musicfolder.gif : icon을로 사용될 이미지파일. 지정 안하면 default 이미지가 출력된다.

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

 

//역시 1단계 메뉴. 값이 없는 파라미터는 ''를 사용해서 건너뛴다.

d.add(2,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');

 

//id가 1인 메뉴(My node)의 서브메뉴로 들어간다.

d.add(3,1,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');

 

//id가 3인 메뉴(The trip to Iceland)의 서브메뉴로 들어간다. (My node의 서브의 서브가 되겠지).

d.add(4,3,'Mom\'s birthday','example01.html');

 

//1단계 메뉴. icon으로는 쓰레기통 이미지가 들어간다.

d.add(5,0,'Recycle Bin','example01.html','','','img/trash.gif');

※서브메뉴가 있는 메뉴에는 자동으로 폴더 아이콘이 붙고 서브메뉴가 없는 메뉴에는 파일 아이콘이 붙는다.

 

-openAll()

모든 메뉴를 펼친다. 메뉴 상단이나 하단 중 어디든지 사용될 수 있다.

예

mytree.openAll();

-closeAll()

모든 메뉴를 닫는다. 메뉴 상단이나 하단 중 어디든지 사용될 수 있다.

예

mytree.closeAll();

 

※ 아래와 같이 함께 사용된다.

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

-openTo()

특정 메뉴만 펼친 상태를 만들 때 사용한다. 트리메뉴 생성 후에만 지정할 수 있다.

예

mytree.openTo(4, true);

Parameters

Name	Type	Description
id	Number	메뉴의 id
select	Boolean	true면 연다. default는 false

 

 

-Configuration

환경 설정하기

예

트리메뉴이름.config.Variable = "값";

mytree.config.target = "mytarget";

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.