JavaScript NodeTree 네비게이션 바(메뉴 항목 JSON 유형/자체 제작)_javascript 기술

최근에 좀 여유가 있어서 JavaScript NodeTree를 직접 만들어 봤습니다. 실제로 인터넷에 비슷한 것들이 꽤 있고, 이것보다 더 많은 기능이 있습니다. 순전히 실력을 연습하기 위해 만들었습니다.

아이콘은 사용자 정의(16X16)가 가능하며, 메뉴 항목은 JSON 형식으로 완전히 정의되어 있어 쉽게 수정할 수 있습니다.
인터페이스:

사용법 :
1. NodeTree-JSON.js 및 CSS 폴더를 프로젝트에 복사하고 참조합니다.
2. JQuery 프레임워크를 참조하세요.
3. NodeTree-JSON.js의 NodeTreeMenu 메뉴 항목을 수정합니다. 다음은 간단한 설명입니다.

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

var NodeTreeMenu = [
// id: 노드 ID, pId: 상위 노드 ID, 상위 노드가 없는 경우 0, name: 표시 이름, img: 표시 아이콘, open: 상위 노드에만 이 속성이 있으며, 하위 노드가 기본적으로 확장되는지 여부, file: 하위 노드에만 이 속성이 있는 경우
{ id: 1, pId: 0, name: "Parent Node One", img: "CSS/Images/001.png", open: true } 이후에 열린 페이지를 클릭합니다.
{ id: 101, pId: 1, 이름: "Subnode One", img: "CSS/Images/002.png", 파일: "http://www.cnblogs.com/nnzfly/" }// 데이터의 마지막 줄은 쉼표 끝에 추가하면 안 됩니다! 그렇지 않으면 IE에서 오류가 보고됩니다!
]

4. NodeTree를 표시하려는 위치에 다음 코드를 추가합니다.

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

5. 페이지에 다음 코드를 추가하세요.

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

< ;script type="text/javascript"> ;
$(function () {
NodeTree("mainFrame");
})
또는 (다음 중 하나 선택) 2):
< script type="text/javascript">
window.onload=function (){
NodeTree("mainFrame")

NodeTree("mainFrame")에서 mainFrame은 대상 프레임의 이름입니다. 예를 들어 탐색 모음은 왼쪽 프레임에 있고, 프레임 이름은 다음과 같습니다. 오른쪽에 표시된 것은 = "mainFrame"입니다.
정말 이해가 안가신다면 Demo.htm 코드를 보시면 이해가 되실 겁니다.
소스코드가 첨부되어 있으니 관심 있으신 분들은 구경해보세요~
http://dl.vmall.com/c0b7wda1ps
좋아하시면 클릭해서 추천해주세요. 여러분의 응원은 저의 힘입니다. 가장 큰 동기부여!