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

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

관련 라벨：

javascript树形菜单 响应式树形菜单 javascript树形结构 javascript下拉菜单 javascr

원천：php.cn

이전 기사：Javascript는 별 5개 등급 function_javascript 기술을 구현합니다. 다음 기사：자바스크립트 비밀번호 확인_자바스크립트 기술

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

• NullPointerException은 무엇이며 어떻게 해결합니까?
  2024-10-22 09:46:29
• 초보자에서 코더까지: C 기초로 시작되는 여정
  2024-10-13 13:53:41
• PHP로 웹 개발 잠금 해제: 초보자 가이드
  2024-10-12 12:15:51
• C에 대한 이해: 새로운 프로그래머를 위한 명확하고 간단한 길
  2024-10-11 22:47:31
• 코딩 잠재력 발휘: 완전 초보자를 위한 C 프로그래밍
  2024-10-11 19:36:51
• 내면의 프로그래머를 깨워보세요: 완전 초보자를 위한 C
  2024-10-11 15:50:41
• C로 일상을 자동화하세요: 초보자를 위한 스크립트 및 도구
  2024-10-11 15:07:41
• PHP가 쉬워졌습니다: 웹 개발의 첫 번째 단계
  2024-10-11 14:21:21
• Python으로 무엇이든 빌드하기: 창의력을 발휘하기 위한 초보자 가이드
  2024-10-11 12:59:11
• 코딩의 핵심: 초보자를 위한 Python의 힘 활용
  2024-10-11 12:17:31

최신 이슈

Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...

에서 2024-04-06 14:54:03

0

2

421

그림자 복제 버전으로 메뉴 버튼을 x 모양으로 변환하는 호버 효과 만들기 먼저 제 제목이 혼란스럽다는 점을 인정하고 죄송합니다. 내가 달성하고 싶은 것은 hover에 대한 다음과 같은 효과입니다. 내 웹 사이트는 여기 https://w...

에서 2024-04-04 11:55:21

0

2

315

관련 주제

더>

• 배열을 정의하는 방법
• 파이썬 숫자를 문자열로
• ffdshow 디코더를 사용하는 방법
• git에서 두 버전의 파일 내용을 비교하는 방법
• 토렌트 파일을 여는 방법
• 내 컴퓨터에서 두 번 클릭해도 열 수 없습니다.
• C 언어에서 소문자를 대문자로 변환하는 방법
• Xiaomi 전화를 플래시하는 방법