순수 자바스크립트 반응형 트리 메뉴 effect_javascript 기술-JS 튜토리얼-php.cn

순수 자바스크립트 반응형 트리 메뉴 effect_javascript 기술

WBOY

풀어 주다： 2016-05-16 15:33:00

원래의

1563명이 탐색했습니다.

간단한 튜토리얼
aimaraJS는 매우 실용적인 순수 자바스크립트 반응형 다단계 디렉토리 트리 구조 플러그인입니다. 디렉토리 트리는 트리 노드를 동적으로 추가 및 삭제할 수 있고, 다단계 트리 구조를 생성할 수 있으며, 각 노드는 마우스 오른쪽 버튼 클릭 상황에 맞는 메뉴를 가질 수 있고, 각 노드에 다른 아이콘을 구성할 수 있습니다. 기능은 다음과 같습니다.

기본 트리 구조를 생성하고 렌더링할 수 있습니다.
트리 노드는 실시간으로 추가 및 삭제가 가능합니다.
다른 트리 노드 아이콘이 표시될 수 있습니다.
트리 노드가 열리고 닫힐 때 이벤트를 맞춤 설정할 수 있습니다.
각 트리 노드에 마우스 오른쪽 버튼 클릭 컨텍스트 메뉴를 생성할 수 있습니다.

사용방법
이 슬라이드쇼 플러그인을 사용하려면 Aimara.css 및 Aimara.js 파일을 페이지에 도입해야 합니다.

<link rel="stylesheet" href="css/Aimara.css" />
<script src="js/Aimara.js"></script>

로그인 후 복사

HTML 구조

빈

를 이 디렉토리 트리의 컨테이너로 사용할 수 있습니다.

<div id="div_tree"></div>

로그인 후 복사

JAVASCRIPT

그러면 다음 방법을 통해 디렉토리 트리 플러그인을 초기화할 수 있습니다. 일부 트리 노드와 하위 노드를 만든 다음 렌더링할 수 있습니다. 트리가 렌더링되기 전이나 후에 노드를 트리 구조에 추가할 수 있습니다.

<script type="text/javascript">
  window.onload = function() {
    //创建树结构
    var tree = createTree('div_tree','white');
    //创建树节点node1
    var node1 = tree.createNode('First node',false,'images/star.png',null,null,null);
    //node1添加到树结构中
    node1.createChildNode('First child node', false, 'images/blue_key.png',null,null);
    //渲染树结构
    tree.drawTree();
    //创建第二个树节点
    node1 = tree.createNode('Second node',false,'images/star.png',null,null,null);
    node1.createChildNode('Second child node', false, 'images/blue_key.png',null,null);
  };
</script>

로그인 후 복사

트리 노드에 대한 컨텍스트 메뉴 만들기

다음 방법을 통해 마우스 오른쪽 버튼 클릭 컨텍스트 메뉴를 생성할 수 있습니다.

var contex_menu = {
 'context1' : {
  elements : [
   {
    text : 'Node Actions',
    icon: 'images/blue_key.png',
    action : function(node) {
 
    },
    submenu: {
     elements : [
      {
       text : 'Toggle Node',
       icon: 'images/leaf.png',
       action : function(node) {
        node.toggleNode();
       }
      },
      {
       text : 'Expand Node',
       icon: 'images/leaf.png',
       action : function(node) {
        node.expandNode();
       }
      },
      {
       text : 'Collapse Node',
       icon: 'images/leaf.png',
       action : function(node) {
        node.collapseNode();
       }
      },
      {
       text : 'Expand Subtree',
       icon: 'images/tree.png',
       action : function(node) {
        node.expandSubtree();
       }
      },
      {
       text : 'Collapse Subtree',
       icon: 'images/tree.png',
       action : function(node) {
        node.collapseSubtree();
       }
      },
      {
       text : 'Delete Node',
       icon: 'images/delete.png',
       action : function(node) {
        node.removeNode();
       }
      },
     ]
    }
   },
   {
    text : 'Child Actions',
    icon: 'images/blue_key.png',
    action : function(node) {
 
    },
    submenu: {
     elements : [
      {
       text : 'Create Child Node',
       icon: 'images/add1.png',
       action : function(node) {
        node.createChildNode('Created',false,'images/folder.png',null,'context1');
       }
      },
      {
       text : 'Create 1000 Child Nodes',
       icon: 'images/add1.png',
       action : function(node) {
        for (var i=0; i<1000; i++)
         node.createChildNode('Created -' + i,false,'images/folder.png',null,'context1');
       }
      },
      {
       text : 'Delete Child Nodes',
       icon: 'images/delete.png',
       action : function(node) {
        node.removeChildNodes();
       }
      }
     ]
    }
   }
  ]
 }
};

로그인 후 복사

그런 다음 다음 방법을 통해 트리 구조를 초기화합니다.

tree = createTree('div_tree','white',contex_menu);
tree.drawTree();

로그인 후 복사

트리 구조가 렌더링된 후 실시간으로 트리 노드 추가:

tree.createNode('Real Time',false,'images/leaf.png',null,null,'context1');

로그인 후 복사

위 내용은 이 기사의 전체 내용입니다. 트리 구조 메뉴 표시줄에 대한 특수 효과의 순수 JS 반응형 구현을 소개합니다.