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

WBOY
풀어 주다: 2016-05-16 15:33:00
원래의
1558명이 탐색했습니다.

간단한 튜토리얼
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 반응형 구현을 소개합니다.

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿