순수 자바스크립트 반응형 트리 메뉴 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으로 문의하세요.

저자별 최신 기사

• BlackRock은 BTC를 독특한 다각화자로 분류합니다
  2024-09-20 15:51:33
• 인터넷 컴퓨터(ICP) 가격 예측: ICP 가격이 24달러에 도달할까요?
  2024-09-20 15:47:32
• Worldcoin (WLD) Price Prediction 2022-23
  2024-09-20 15:45:32
• Top Meme Coins to Invest In Today
  2024-09-20 15:39:32
• Floki (FLOKI) Price Prediction: Will the Revamped Marketing Help Floki Catch Up on October Gains?
  2024-09-20 15:38:32
• Next Cryptocurrency to Explode: 5 Coins to Add to Your Watchlist
  2024-09-20 15:27:32
• Dogecoin: From an Internet Meme to a Digital Currency with a Billion-Dollar Market Capitalization
  2024-09-20 15:26:32
• ZChains Unveils a Series of Exciting Updates and Launches to Enhance Its Ecosystem
  2024-09-20 15:12:32
• 如何下载小狐狸支付平台的Apple版本
  2024-09-20 14:53:01
• 초보자가 MetaMask를 거래하는 방법과 장점과 단점
  2024-09-20 14:51:01

최신 이슈

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

관련 주제

더>

• 브러시 크기 단축키는 무엇입니까?
• 상위 노드 사용량
• 파이참의 역할
• .exe는 어떤 파일인가요?
• InstantiationException 예외 솔루션
• PROM은 어떤 통화인가요?
• SQL 인젝션을 방지하는 방법은 무엇입니까?
• 안드로이드 권한 제한을 잠금 해제하는 방법