JavaScript_javascript 기술의 여러 형태의 트리 구조 메뉴

1. 정지 레이어 트리(Tree)
이 트리 구조는 탐색경로 탐색과 유사한 기능을 구현한 후 노드의 마우스 이동 이벤트를 수신한 다음 하위 노드를 아래 또는 오른쪽에 표시합니다. 노드의 하위 노드 등을 반복적으로 표시합니다.

사용자 홈페이지 블로그 설정 기사 앨범 메시지 댓글 시스템
여기서 주의해야 할 몇 가지 작은 문제가 있습니다. 먼저, 이러한 트리 구조는 레이어를 생성할 때의 절대 위치입니다. 아래에서는 IE의 스택 컨텍스트와 같은 항목에 대한 숨겨진 규칙이 있으므로 아래에서 모든 레이어를 덮을 수 있도록 수행됩니다. 나를 덮어? 오래된 질문은 각 부동 레이어 뒤에 iframe 요소를 추가하는 것입니다. 물론 동일한 레벨의 메뉴는 하나의 iframe 요소만 생성합니다. 메뉴에 여러 레벨이 있으면 메뉴가 여러 개 생성됩니다. 표시되고 숨겨지면 동시에 표시되고 숨겨집니다.

그러나 이러한 종류의 메뉴는 현재 스크립트에 메뉴 노드를 동적으로 추가하는 것만 지원하고 SEO 및 기타 요소를 위해 기존 HTML 요소에서 메뉴 노드를 얻을 수 없기 때문에 프런트엔드에 적합하지 않습니다. 프런트 엔드 탐색은 일반적으로 백그라운드에 동적으로 추가합니다. 출력의 경우 메뉴에 여러 레벨이 있는 경우 2레벨을 초과하지 않는 것이 좋습니다. 고객이 너무 많은 레벨을 보기에는 너무 게으르겠지만 여전히 매우 좋습니다. 탐색경로 탐색 표시를 표시합니다.

menu.js

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

/*
** 작성자 : Jonllen
** 작성 : 2009-12-13
** 업데이트 : 2010-05-08
** SVN : 152
** 웹사이트: http://www.jonllen.com/
*/
var 메뉴 = 함수(컨테이너) {
this.container = 컨테이너;
이것을 돌려주세요;
}
Menu.prototype = {
list : new Array(),
active : new Array(),
iframes : new Array(),
settings : {
id : null,
parentId : 0,
name : null,
url : null,
level : 1,
parent : null,
children : null,
css : null,
element : null
},
push : function(item) {
var list = Object.prototype.toString.apply(item) === '[object Array]' ? 항목 : [항목];
for( var i=0; ivar settings = list[i];
for( p in this.settings) {
if( !settings.hasOwnProperty(p) ) 설정[p] = this.settings[p];
}
this.list.push(설정);
}
이것을 반환하세요.
},
getChlid : 함수(id) {
var list = new Array();
for( var i=0;i < this.list.length; i )
{
var item = this.list[i];
if( item.parentId == id)
{
list.push(item);
}
}
반품 목록;
},
render : 함수(컨테이너) {
var _this = this;
var menuElem = 컨테이너 || this.컨테이너;
for( var i=0;i < this.list.length; i )
{
var item = this.list[i];
if ( item.parentId != 0 ) 계속;
var itemElem = document.createElement('div');
itemElem.innerHTML = '' item.name '';
itemElem.className = '항목';
if ( item.css ) itemElem.className = ' ' item.css;
var 비활성화 = (' ' item.css ' ').indexOf(' 비활성화 ')!=-1;
if ( 비활성화 ) {
itemElem.childNodes[0].disabled = true;
itemElem.childNodes[0].className = '비활성화됨';
itemElem.childNodes[0].removeAttribute('href');
}
if ( (' ' item.css ' ').indexOf(' Hidden ')!=-1 ) {
itemElem.style.display = 'none';
}
itemElem.menu = 항목;
itemElem.menu.children = this.getChlid(item.id);
itemElem.onmouseover = 함수(e){
_this.renderChlid(this);
};
menuElem.appendChild(itemElem);
}
document.onclick = 함수(e){
e = window.event || 이자형;
var target = e.target || e.srcElement;
if (!target.menu) {
var self = _this;
for( var i=1;i<_this.active.length;i ) {
var item = _this.active[i];
var menuElem = document.getElementById('menu' item.id);
if ( menuElem !=null)
menuElem.style.display = 'none';
}
for(var j=1;j<_this.iframes.length;j ){
_this.iframes[j].style.display = 'none';
}
}
};
},
renderChlid : 함수(대상){
var self = this;
var 항목 = target.menu;
var activeItem = self.active[item.level];
while(activeItem) {
var activeItemElem = activeItem.element;
if ( activeItemElem!= null ) activeItemElem.style.display = 'none';
activeItem = self.active[activeItem.level 1];
}
self.active[item.level] = 아이템;
var level = item.level;
while(this.iframes[level]) {
this.iframes[level].style.display = 'none';
레벨 ;
}
var childElem = document.getElementById('menu' item.id);
if (childElem==null) {
var hasChild = false;
for( var j=0;jif( (' ' item.children[j].css ' ').indexOf(' Hidden ') == - 1) {
hasChild = true;
휴식;
}
}
if( hasChild) {
var xy = self.elemOffset(target);
var x = xy.x;
var y = target.offsetHeight xy.y;
if ( item.level >= 2 )
{
x = target.offsetWidth - 1;
y -= target.offsetHeight;
}
childElem = document.createElement('div');
childElem.id = '메뉴' item.id;
childElem.className = '자식';
childElem.style.position = '절대';
childElem.style.left = x 'px';
childElem.style.top = y 'px';
childElem.style.zIndex = 1000 item.level;
for( var i=0;i < item.children.length; i )
{
var childItem = item.children[i];
var childItemElem = document.createElement('a');
var 비활성화 = (' ' childItem.css ' ').indexOf('disabled')!=-1;
if ( 비활성화 ) {
childItemElem.disabled = true;
childItemElem.className = ' ' childItem.css;
}else {
childItemElem.href = childItem.url;
}
if ( (' ' childItem.css ' ').indexOf(' Hidden ')!=-1 ) {
childItemElem.style.display = 'none';
}
childItemElem.innerHTML = childItem.name;
childItemElem.menu = childItem;
childItemElem.menu.children = self.getChlid(childItem.id);
var hasChild = false;
for( var j=0;jif( (' ' childItemElem.menu.children[j].css ' ').indexOf(' 숨겨진 ' ) == -1) {
hasChild = true;
휴식;
}
}
if( hasChild ) {
childItemElem.className = ' hasChild';
}
childItemElem.onmouseover = function (e) {
self.renderChlid(this)
};
childElem.appendChild(childItemElem);
}
document.body.insertBefore(childElem,document.body.childNodes[0]);
item.element = childElem;
}
}
if( childElem!=null) {
var iframeElem = this.iframes[item.level];
if ( iframeElem == null) {
iframeElem = document.createElement('iframe');
iframeElem.scrolling = '아니요';
iframeElem.frameBorder = 0;
iframeElem.style.cssText = '위치:절대; 오버플로:숨김;';
document.body.insertBefore(iframeElem,document.body.childNodes[0]);
this.iframes[item.level]=iframeElem;
}
childElem.style.display = '차단';
iframeElem.width = childElem.offsetWidth;
iframeElem.height = childElem.offsetHeight;
iframeElem.style.left = parsInt(childElem.style.left) 'px';
iframeElem.style.top = parsInt(childElem.style.top) 'px';
iframeElem.style.display = '차단';
}
},
elemOffset : function(elem){
if( elem==null) return {x:0,y:0};
var t = elem.offsetTop;
var l = elem.offsetLeft;
while( elem = elem.offsetParent) {
t = elem.offsetTop;
l = elem.offsetLeft;
}
return {x : l,y : t};
}
};

演示地址 http://demo.jb51.net/js/tree_json/menu.htm
打包下载地址

2.右键菜单树(ContextMenu)
자정义右键菜单(ContextMenu) 및 悬浮层树(Tree)其实现上本大同小异，島是在脚本里动态添加节点，然后재생일个绝对对对对对对层，只不过右键菜单树 (ContextMenu)触发的事件不一样 .菜单项功能，以实现右击不素可以显示不同右键菜单，我这里提供一种"回调函数"，使用见如下代码：
ContextMenu回调函数

复主代码 代码如下:

//ContextMenu
var contextmenu = new ContextMenu(...{ 컨테이너 : document.getElementById('treemenu') });
contextmenu.push( ...{ html : 'Powered By: Jonllen', css : 'disabled'});
contextmenu.push( ...{ html : '', css : 'line'});
contextmenu.push( ...{ html : '刷新(R)', href : 'javascript:location.reload();'});
for(var i=0;icontextmenu.push(...{
id : menu[i].id,
level : menu[i].level,
parentId : menu[i].parentId,
html : menu[i].name,
href : menu[i].url
});
}
contextmenu.render();
//원유유回调函数
var contextmenuOnShow = contextmenu.onShow;
//设置 새로운 기능
contextmenu.onShow = function (target, _this)...{
var item = target.treemenu || target.parentNode.treemenu;
if( item ) ...{
var html = '添加' item.html '“子节点' (item.children.length 1) '”';
_this.push( ...{
html : html,
click : 함수(e)...{
item.expand = false;
var newItem = ...{
id : item.id '0' (item.children.length 1),
level : item.level 1,
parentId : item.id,
html : item.html '子节点' (item.children.length 1),
href : '#',
css : 'item',
createExpand : true
}
item.children.push(newItem) ;
treemenu.list.push(newItem);
treemenu.renderChild(item);
},
clickClose: true,
index: 1,
type: '동적'
});
_this.push( ...{
html : '删除节点'' item.html ''',
click : 기능(e)...{
if( verify('是否确认删除节点“' item.html '”?'))
treemenu.remove(item);
},
clickClose : true,
index : 2,
type : 'dynamic '
});
}
contextmenuOnShow(target, _this);
};

그럼 '콜백 함수'는 어떻게 구현하나요? 실제로는 매우 간단합니다. 함수가 특정 코드 줄에 도달하면 미리 설정된 "콜백 함수"를 실행합니다. 이는 여러 개의 window.onload 이벤트를 바인딩하는 것과 같은 이벤트 메커니즘과 비슷합니다. 이전에는 이전 함수를 먼저 기록한 다음 새로 바인딩된 함수를 설정하고 이전에 바인딩된 함수를 호출합니다. 위에 표시된 코드는 마우스 오른쪽 버튼 클릭 요소가 트리 메뉴 노드인 경우 마우스 오른쪽 버튼 클릭 시 트리 메뉴 노드 추가 및 삭제 메뉴가 추가된다는 것을 인식하고 있으며, 그 효과는 아래 노드 트리(TreeMenu) 예제에 나와 있습니다.
콜백 함수의 범위에 주의해야 합니다. this 포인터는 콜백 함수가 실행되는 컨텍스트가 아니라 현재 콜백 함수 개체를 가리킵니다. 그러나 call 메서드를 사용하여 실행할 수도 있습니다. 현재 this 컨텍스트의 콜백 함수입니다. 여기서는 콜백 함수가 이 객체와 다른 변수를 쉽게 얻을 수 있도록 2개의 매개변수를 콜백 함수에 전달하는 방법을 채택합니다. 이는 Ajax 콜백 함수에서 일반적으로 사용됩니다.
사용자 정의 오른쪽 클릭 메뉴(ContextMenu)는 일부 보조 기능의 바로 가기 작업에만 적합합니다. 예를 들어 복잡한 비즈니스 기능을 가진 일부 OA 시스템이 있는 경우 노드 트리(TreeMenu)와도 함께 사용합니다. ) 아래에. 가능하다면 마우스 오른쪽 버튼 클릭 메뉴를 사용하지 않도록 하세요. 둘째, 마우스 오른쪽 버튼 클릭 메뉴를 사용자 정의하면 보기 등 원래 오른쪽 클릭 메뉴의 일부 기능이 손실됩니다. 소스 파일.
오른쪽 클릭 메뉴 영역은 다음과 같습니다.
나를 마우스 오른쪽 버튼으로 클릭하면 속성을 볼 수 있습니다.
나를 선택하고 마우스 오른쪽 버튼을 클릭하여 복사할 수도 있습니다.
저를 커버해 주실 수 있나요?
ContextMenu.js

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

/**//*
** 작성자 : Jonllen
** 생성일 : 2010-05-01
** 업데이트 : 2010-05-09
** SVN : 153
** 웹사이트: http://www.jonllen.com/
*/
var ContextMenu = 기능(설정) ...{
for( p in this.settings)
...{
if ( !settings.hasOwnProperty(p) ) 설정[p] = this.settings[p];
}
this.settings = 설정;
this.settings.menu = document.createElement('div');
this.settings.menu.className = this.settings.css;
this.settings.menu.style.cssText = '위치:절대;표시:없음;';
document.body.insertBefore(this.settings.menu,document.body.childNodes[0]);
이것을 돌려주세요;
}
ContextMenu.prototype = ...{
list : new Array(),
active : new Array(),
iframes : new Array(),
settings : ...{
menu : null,
excursionX : 0,
excursionY : 0,
css : 'contextmenu',
container : null,
locked : false
},
항목 : ...{
id : null,
level : 1,
parentId : 0,
html : '',
title : '',
href : 'javascript:;',
대상 : '_self',
css : null,
element : null,
childElement : null,
parent : null,
children : null,
type : 'static',
click : null,
clickClose : false
},
push : 함수(항목) ...{
var list = 개체 .prototype.toString.apply(item) === '[객체 배열]' ? 항목 : [항목];
for( var i=0; i< list.length; i ) ...{
var _item = list[i];
for( p in this.item) ...{
if( !_item.hasOwnProperty(p) ) _item[p] = this.item[p];
}
_item.element = null;
if( _item.name ) _item.html = _item.name;
if( _item.url ) _item.href = _item.url;
if( _item.type == 'static') ...{
this.list.push(_item);
}else ...{
if(this.dynamic == null) this.dynamic = new Array();
this.dynamic.push(_item);
}
}
이것을 반환하세요.
},
bind : 함수()...{
var _this = this;
for( var i=0; this.dynamic && i...{
var item = this.dynamic[i];
var itemElem = document.createElement('div');
itemElem.title = 항목.제목;
itemElem.innerHTML = '' item.html '';
itemElem.className = '항목'(item.css?' 'item.css:'');
item.element = itemElem;
if( item.click ) ...{
(함수(항목)...{
item.element.childNodes[0].onclick = 함수(e)...{
if( item.clickClose) _this.hidden();
return item.click(e)
})(item);
}
itemElem.contextmenu = 항목;
itemElem.onmouseover = 함수(e)...{ _this.hidden(item.level);};
var index = item.index || 0;
if( index >= this.settings.menu.childNodes.length)
index = this.settings.menu.childNodes.length - 1;
if( index < 0 )
this.settings.menu.appendChild(itemElem);
else
this.settings.menu.insertBefore(itemElem, this.settings.menu.childNodes[index]);
}
},
render : 함수(컨테이너) ...{
var _this = this;
컨테이너 = 컨테이너 || this.settings.container;
this.settings.menu.innerHTML = '';
for( var i=0;i < this.list.length; i )
...{
var item = this.list[i];
if ( item.parentId != 0 ) 계속;
var itemElem = document.createElement('div');
itemElem.title = 항목.제목;
itemElem.innerHTML = '' item.html '';
itemElem.className = '항목'(item.css?' ' item.css:'');
var 비활성화 = _this.hasClass(itemElem, 'disabled');
if ( 비활성화 ) ...{
itemElem.childNodes[0].disabled = true;
itemElem.childNodes[0].className = '비활성화됨';
itemElem.childNodes[0].removeAttribute('href');
}
if ( _this.hasClass(itemElem, 'hidden') ) ...{
itemElem.style.display = 'none';
}
if( item.click ) ...{
(함수(항목)...{
item.element.childNodes[0].onclick = 함수(e)... {
if( item.clickClose) _this.hidden();
return item.click(e)
})(item);
}
itemElem.contextmenu = 항목;
itemElem.contextmenu.children = this.getChlid(item.id);
if( itemElem.contextmenu.children.length > 0 )
itemElem.childNodes[0].className = ' hasChild';
itemElem.onmouseover = 함수(e)...{ _this.renderChlid(this);};
this.settings.menu.appendChild(itemElem);
}
this.active[0] = ...{ 요소 : _this.settings.menu };
this.settings.menu.contextmenu = _this;
container.oncontextmenu = 함수(e)...{
e = window.event || 이자형;
var target = e.target || e.srcElement;
if( e.preventDefault)
e.preventDefault();
var mouseCoords = _this.mouseCoords(e);
_this.settings.menu.style.left = mouseCoords.x _this.settings.excursionX 'px';
_this.settings.menu.style.top = mouseCoords.y _this.settings.excursionY 'px';
_this.hidden();
_this.show(0, 대상);
거짓을 반환합니다.
};
this.addEvent(문서, '클릭', 함수(e)...{
e = window.event || e;
var target = e.target || e.srcElement;
var isContextMenu = !!target.contextmenu;
if( isContextMenu == false) ...{
var parent = target.parentNode;
while( parent!=null) ...{
if( parent.contextmenu) ...{
isContextMenu = true;
break;
}
parent = parent.parentNode;
}
if(isContextMenu == 거짓) ...{
_this.hidden()
}
});
},
renderChlid : 함수( 대상 )...{
if(this.settings.locked) return;
var contextmenu = target.contextmenu;
var currentLevel = contextmenu.level;
this.hidden(현재레벨);
var hasChild = false;
for( var j=0;jif( (' ' contextmenu.children[j].css ' ').indexOf(' Hidden ') == -1) ...{
hasChild = true;
휴식;
}
}
if( !hasChild) return;
var childElem = contextmenu.element;
if (childElem == null) ...{
childElem = document.createElement('div');
childElem.className = this.settings.css;
childElem.style.position = '절대';
childElem.style.zIndex = 1000 contextmenu.level;
var _this = this;
for( var i=0;i < contextmenu.children.length; i )
...{
var childItem = contextmenu.children[i];
var childItemElem = document.createElement('div');
childItemElem.title = childItem.title;
childItemElem.innerHTML = '' childItem.html '';
childItemElem.className = 'item' (childItem.css?' ' childItem.css : '');
var 비활성화 = this.hasClass(childItemElem, 'disabled');
if ( 비활성화 ) ...{
childItemElem.childNodes[0].disabled = true;
childItemElem.childNodes[0].removeAttribute('href');
}
if ( this.hasClass(childItemElem, 'hidden') ) ...{
childItemElem.style.display = 'none';
}
if( childItem.click ) ...{
(함수(childItem)...{
childItem.element.childNodes[0].onclick = 함수(e)... {
if( childItem.clickClose) _this.hidden();
return childItem.click(e)
})(childItem);
}
childItem.parent = contextmenu;
childItemElem.contextmenu = childItem;
childItemElem.contextmenu.children = this.getChlid(childItem.id);
var hasChild = false;
for( var j=0; jif( (' ' childItemElem.contextmenu.children[j].css ' ').indexOf( ' 숨김 ') == -1) ...{
hasChild = true;
휴식;
}
}
if( hasChild ) ...{
childItemElem.childNodes[0].className = ' hasChild';
}
childItemElem.onmouseover = 함수(e)...{ _this.renderChlid(this);};
childElem.appendChild(childItemElem);
}
document.body.insertBefore(childElem,document.body.childNodes[0]);
contextmenu.element = childElem;
}
this.active[현재레벨] = contextmenu;
var xy = this.elemOffset(target);
var x = xy.x target.offsetWidth this.settings.excursionX;
var y = xy.y this.settings.excursionY;
childElem.style.left = x 'px';
childElem.style.top = y 'px';
childElem.style.display = '차단';
this.show(현재레벨);
},
getChlid : 함수(id) ...{
var list = new Array();
for( var i=0;i < this.list.length; i )
...{
var item = this.list[i];
if( item.parentId == id)
...{
list.push(item);
}
}
반품 목록;
},
show : 함수(레벨, 대상) ...{
if(this.settings.locked) return;
수준 = 수준 || 0;
var item = this.active[level];
if ( level == 0 ) ...{
for( var i=0;this.dynamic && i < this.dynamic.length; i )
...{
var DynamicItemElem = this.dynamic[i].element;
if(dynamicItemElem !=null)dynamicItemElem.parentNode.removeChild(dynamicItemElem);
}
if (this.dynamic) this.dynamic.length = 0;
this.onShow(대상, this);
}
var menuElem = item.element;
menuElem.style.display = '차단';
var iframeElem = this.iframes[level];
if ( iframeElem == null) ...{
iframeElem = document.createElement('iframe');
iframeElem.scrolling = '아니요';
iframeElem.frameBorder = 0;
iframeElem.style.cssText = '위치:절대; 오버플로:숨김;';
document.body.insertBefore(iframeElem,document.body.childNodes[0]);
this.iframes.push(iframeElem);
}
iframeElem.width = menuElem.offsetWidth;
iframeElem.height = menuElem.offsetHeight;
var menuElemOffset = this.elemOffset(menuElem);
iframeElem.style.left = menuElemOffset.x 'px';
iframeElem.style.top = menuElemOffset.y 'px';
iframeElem.style.display = '차단';
},
onShow : 함수 (target, _this) ...{
if( target.nodeType == 1 && target.tagName == 'A' && target.innerHTML.indexOf('.rar') != -1 )...{
//解压文件
_this.push( ...{
html : '解压缩到“' target.innerHTML.substring(0,target.innerHTML.lastIndexOf( '.')) '\”...',
클릭: 함수 (e)...{
e = e || window.event
var srcElement = e.srcElement || .target;
srcElement.className = 'on';
srcElement.innerHTML = '解压缩到“' target.innerHTML.substring(0,target.innerHTML.lastIndexOf('.')) '\”. ..';
var url = '/Ajax/FileZip.aspx?mode=unzip&files=' target.href.substring(target.href.replace('//','xx').indexOf('/' ));
if( Ajax 유형 == '정의되지 않음') return;
Ajax.get(url, function (data, _this)...{
_this.settings.locked = true;
eval(데이터);
if( rs.success ) ...{
location.reload()
}else...{
alert(rs.error); _this.hidden();
}
}, _this);
srcElement.onclick = null;
_this.settings.locked =
},
clickClose: false
색인 : 2,
유형 : '동적'
});
}
else if( target.nodeType == 1 && target.title.indexOf('添加到') == 0) ...{
//添加单个压缩文件
_this. push( ...{
html : target.title,
title : target.title,
click : 함수(e)...{
var index = target.href.indexOf(' ?path=');
if( index != -1)...{
var fullName = target.href.substring(index '?path='.length);
}else .. .{
var fullName = target.href.substring(target.href.replace('//','xx').indexOf('/'))
}
e = e ||
var srcElement = e.srcElement || e.target;
srcElement.className = 'on';
srcElement.innerHTML = '정재添加到'' fullName.lastIndexOf ('/') 1) '.rar'...';
var url = '/Ajax/FileZip.aspx?mode=zip&files=' fullName
if( typeof Ajax == 'undefine') return;
Ajax.get(url, function (data, _this)...{
_this.settings.locked = true;
eval(data);
if( rs.success ) . ..{
location.reload();
}else...{
alert(rs.error)
_this.hidden(); );
srcElement.onclick = null
_this.settings.locked = true;
},
clickClose : false,
index : 2,
type : 'dynamic',
css : 'on'
});
}else ...{
//添加多个压缩文件
var fileName = '';
var 파일 = 새 배열();
var ids = document.getElementsByName('ids');
for( var i=0; iif( !ids[i].checked) continue;
var 파일 = ids[i].value;
files.push(파일);
if( files.length == 1) ...{
fileName = file.substring(file.lastIndexOf('/') 1) '.rar';
}
}
if( files.length > 0 )...{
_this.push( ...{
html : '添加' files.length '个文件到压缩包“' fileName '"',
click : function (e)...{
e = e || window.event;
var srcElement = e.srcElement || 🎜>srcElement.className = 'on';
srcElement.innerHTML = '정재添加到' fileName ''...'
var url = '/Ajax/FileZip.aspx?mode=zip&files=' files.join('|');
if( typeof Ajax == 'undefine') return
Ajax.get(url, function (data, _this)...{
_this.settings. 잠김 = true;
eval(data);
if( rs.success ) ...{
location.reload()
}else...{
alert(rs. 오류);
}
}, _this)
srcElement.onclick = null;
🎜>clickClose : false,
index : 2,
type : 'dynamic'
});
}
}
if( target.nodeType == 1 && target.tagName == 'A') ...{
_this.push( ...{
html : '属性“' target.innerHTML '”',
href : target.href,
click : function (e)...{
prompt('属性“' target.innerHTML '"',target. href);
false 반환
},
clickClose: true,
index: 3,
type: 'dynamic'
});
}
var 선택 = window.getSelection ? window.getSelection().toString() : document.selection.createRange().text;
if( 선택 ) ...{
_this.push( ...{
html : '复제“' (selection.length > 15 ? Selection.substring(0,12) '.. .' : 선택) ''',
제목 : '复제“' 선택''',
클릭 : 기능 (e) ...{
if(window.clipboardData) ...{
window.clipboardData.clearData();
window.clipboardData.setData("텍스트", 선택)
}else ...{
netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
var 클립 = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
if (!clip || !trans) return;
trans.addDataFlavor('text/unicode');
var len = new Object();
var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
str.data = 선택;
trans.setTransferData("text/unicode",str,selection.length*2);
var clipsid=Components.interfaces.nsIClipboard;
(!clip)이 false를 반환하는 경우;
clip.setData(trans,null,clipid.kGlobalClipboard);
}
},
clickClose : true,
index : 0,
type : 'dynamic'
});
}
_this.bind();
},
hidden : 함수(레벨) ...{
레벨 = 레벨 || 0;
for( var i = level; ivar item = this.active[i];
var iframeElem = this.iframes[i];
if ( iframeElem !=null)
iframeElem.style.display = 'none';
if(this.settings.locked) return;
var menuElem = item.element;
if ( menuElem !=null)
menuElem.style.display = 'none';
}
this.onHidden(레벨);
},
onHidden : 함수(수준) ...{
},
hasClass : 함수(요소, 이름)
...{
return !!elem &&( ' ' elem.className ' ').indexOf(' ' 이름 ' ') != -1;
},
elemOffset : function(elem)...{
var left = 0;
var top = 0;
while (elem.offsetParent)...{
left = elem.offsetLeft;
top = elem.offsetTop;
elem = elem.offsetParent;
}
left = elem.offsetLeft;
top = elem.offsetTop;
반환 ...{x:왼쪽, y:상단};
},
mouseCoords : function (e)...{
if (e.pageX && e.pageY) ...{
return ...{
x: e. pageX,
y: e.pageY
};
}
var d = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement : document.body;
return ...{
x: e.clientX d.scrollLeft,
y: e.clientY d.scrollTop
};
},
addEvent : function(target,eventType,func)...{
if(target.attachEvent)
...{
target.attachEvent("on" eventType, 기능);
}else if(target.addEventListener)
...{
target.addEventListener(eventType == 'mousewheel' ? 'DOMMouseScroll' : eventType, func, false);
}
이것을 반환하세요.
},
removeEvent : function(target,eventType,func)...{
if(target.detachEvent)
...{
target.detachEvent("on" eventType, 기능);
}else if(target.removeEventListener)
...{
target.removeEventListener(eventType == 'mousewheel' ? 'DOMMouseScroll' : eventType, func, false);
}
이것을 반환하세요.
}
}

데모 주소http://demo.jb51.net/js/tree_json/ContextMenu.htm

3. 노드 트리(TreeMenu)
노드 트리(TreeMenu)는 실제 프로젝트에서 가장 많이 사용됩니다. 인터넷에서 유명한 Meihuaxue의 MzTreeVew는 대용량 데이터에 최적화되어 매우 효율적입니다. 하지만 저는 어떤 것을 채택하는 것을 별로 좋아하지 않습니다. 어떤 것들은 왜 그런 일을 하는지 이해하지 못하기 때문에 스스로 "바퀴를 발명"해 보고 싶습니다. 물론, MzTreeVew만큼 강력한 기능은 아닙니다. 데이터 양이 많을 때는 효율성 테스트를 먼저 하지 않았습니다.

무한대 노드트리

무한대 기능을 이루려면 별다른 트릭이 없다면 재귀밖에 방법이 없는 것 같습니다. 다만, 무한루프를 피하기 위해서는 수익률을 결정하기 위해서는 올바른 조건이 있어야 한다는 점에 유의해야 한다. 데이터 저장 구조 측면에서 일반적으로 데이터베이스는 id, name 및 parentId 필드를 저장합니다. 이 구조는 여전히 트리 구조에 저장됩니다. 트리 노드를 확장할 때 id를 기반으로 모든 하위 노드를 가져와 저장해야 합니다. . , 두 번째로 반복되는 순회를 방지합니다.

계층적 관계 구조

여기서 제가 말씀드리고 싶은 것은 제시된 HTML이 계층적 관계를 가지며, 각 트리 노드 객체도 계층적 관계를 갖는다는 것입니다. HTML 계층 관계는 하위 노드의 요소가 상위 노드 요소의 하위 노드여야 함을 보여줍니다. 원래는 이것이 필요하지 않다고 생각했지만 나중에는 이렇게 해야 하위 노드의 상태가 유지될 수 있다는 것을 알았습니다. 예를 들어 1단계 노드를 클릭하면 2단계 노드를 모두 확장하기만 하면 되고 3단계나 4단계 노드의 상태는 변경할 필요가 없습니다. HTML 구조는 구현하기 쉽습니다. 이 계층적 관계 지원을 통해. 이에 대응하는 것은 재귀 호출을 용이하게 하기 위해 상위 노드 객체, 하위 노드 컬렉션 객체, 참조 요소 등을 저장하는 트리 노드 객체입니다. 이 정보는 해당 DOM 요소에 첨부됩니다.

체크박스 및 라디오 선택

실제 프로젝트의 요구사항은 복잡하고 변경 가능합니다. 때로는 라디오 단일 선택 기능을 제공해야 할 수도 있고, 때로는 체크박스 다중 선택 기능을 제공해야 할 수도 있습니다. 그러기 위해서는 선택된 값을 백그라운드에서 직접 얻어오고 체크박스와 라디오 선택 기능을 제공하는 것도 필요합니다. 물론 인스턴스화 중에 체크박스나 라디오를 생성할지 여부를 구성하고 지정할 수 있으며, 초기화 시 각 노드를 선택할지 여부도 설정하고 지정할 수 있습니다. 여기서 주목해야 할 점은 직접 생성할 때 name 속성을 지정할 수 없다는 점입니다. 체크박스나 라디오를 비틀어 생각하면 달성할 수 있습니다.

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

var inputTemp = document.createElement('div ');
inputTemp.innerHTML = ''
var inputElem = inputTemp.childNodes[0]

tie만 클릭 이벤트 정의

좀 더 복잡한 트리 구조처럼 보이지만 실제로는 가장 바깥쪽 컨테이너 요소에만 클릭 이벤트를 바인딩했습니다. 또한 체크박스 클릭에 대한 연결도 에서 처리됩니다. 이 클릭 이벤트는 요소의 이벤트가 버블링되어 상위 요소에 대해 트리거되고 이벤트 객체 이벤트를 사용하여 트리거 소스 요소를 가져오는 것이 쉽기 때문에 체크박스를 클릭했는지 아니면 다른 요소를 클릭했는지 알 수 있습니다. 매우 편리합니다. 이것의 장점은 각 요소에 이벤트를 추가하는 대신 하나의 이벤트 처리에 집중할 수 있다는 점이며, 이는 코드의 우아함과 아름다움을 완벽하게 보여줍니다.

데모 효과: http://demo.jb51.net/js/tree_json/TreeMenu.htm
패키지 다운로드 주소JavaScript 다중 트리 구조 메뉴 효과
여기에 재인쇄됨 기사 Jinlong 블로그: http://www.jonllen.com/jonllen/js/menu.aspx, 재인쇄 시 이 진술을 보관하시기 바랍니다.