dtree를 사용하여 트리 메뉴 구현 dtree 사용 지침

dtree를 사용하여 트리 메뉴 구현 dtree 사용 지침_탐색 메뉴

WBOY

풀어 주다： 2016-05-16 18:00:44

원래의

1711명이 탐색했습니다.

준비:
스크립트 홈에서 dtree.zip 파일을 다운로드하세요http://www.jb51.net/jiaoben/31974.html
dtree.zip 압축 패키지 소개:
dtree는 현재 무료 오픈 소스인 JavaScript로 작성된 간단한 트리 메뉴 구성 요소입니다.
현재 많은 트리 메뉴 구성 요소(예: ext)가 있습니다. dtree는 간단하고 이해하기 쉬운 js 구성 요소입니다.
복잡한 작업 없이 제작할 수 있으며 데이터베이스에서 데이터를 동적으로 도입할 수 있도록 지원합니다. 🎜>압축해제 다음과 같은 부분이 있습니다.
img 폴더: 트리 메뉴를 표시하는 데 필요한 아이콘이 포함되어 있습니다.
api.html: 작성자가 작성한 dtree 도움말 문서
dtree.css: 트리 메뉴 스타일
dtree .js: js 코어 파일, 코드가 모두 들어있습니다
example01.html: 트리 메뉴 인스턴스 dtree의 기본 메소드 소개:
dtree의 기본 메소드 소개:
add(parameters ): 트리 노드 추가, 실제 매개변수 9개 있음 add(id,pid,name,url,title,target,icon,iconOpen,open)
위치 매개변수 별칭 유형 함수
1 id int 노드 자체 ID (고유)
2 pid int 노드의 상위 노드 id
3 name string 페이지에 표시되는 노드의 이름
4 url string 노드의 링크 주소
5 title string 노드에 마우스를 올렸을 때 표시되는 프롬프트 정보
6 target string 노드 링크에 의해 열린 대상 프레임
7 icon string 노드가 닫힐 때 표시되는 아이콘
8 iconOpen string 표시되는 아이콘 노드가 열려 있을 때
9 open bool 노드가 처음 로드될 때 열리는지 여부
참고: dtree.js 파일에는 일부 기본 이미지의 경로가 포함되어 있습니다. 이미지와 경로는 직접 구성할 수 있습니다. . 제가 다운로드한 것은 44~57번째 줄에 있습니다.
openAll()은 모든 노드를 열고 트리 개체가 생성되기 전이나 후에 호출할 수 있습니다.
closeAll()은 모든 노드를 닫습니다. 지정된 ID를 가진 노드를 열기 위해 트리 객체가 생성되기 전이나 후에 openTo(id,select):
id는 열려야 하는 고유 노드를 지정합니다.
　select 여부. 노드 선택
config 구성
변수 유형 기본값 설명
모든 노드의 대상 문자열 대상
folderLinks bool true 폴더 연결 가능
useSelection bool true 노드 선택 및 강조 표시 가능
useCookies bool true 트리는 쿠키를 사용하여 상태를 기억할 수 있습니다
useLines bool true 구조적 연결선으로 트리 생성
useIcons bool true 차트로 트리 생성
useStatusText bool false 상태 표시줄에 표시된 노드 URL을 노드 이름
closeSameLevel bool false 형제 노드는 하나의 노드만 열 수 있도록 허용합니다.
inOrder bool false 상위 노드 트리 표시 속도를 높입니다.
예: tree.config.closeSameLevel =true; 특정 레벨의 노드가 열리면 해당 레벨의 같은 레벨에 있는 다른 열린 노드도 닫힙니다
샘플 코드:

코드 복사 코드는 다음과 같습니다.

Tree

 /html>