Kemahiran effect_javascript pokok responsif javascript tulen

Tutorial Ringkas
aimaraJS ialah pemalam struktur pokok direktori berbilang peringkat responsif javascript tulen yang sangat praktikal. Pepohon direktori boleh menambah dan memadam nod pokok secara dinamik, mencipta struktur pepohon berbilang peringkat, setiap nod boleh mempunyai menu konteks klik kanan, dan ikon berbeza boleh dikonfigurasikan pada setiap nod. Ciri-cirinya ialah:

• Boleh mencipta struktur pokok asas dan menjadikannya.
• Nod pokok boleh ditambah dan dipadamkan dalam masa nyata.
• Ikon nod pokok yang berbeza boleh dipaparkan.
• Anda boleh menyesuaikan acara apabila nod pokok dibuka dan ditutup.
• Menu konteks klik kanan boleh dibuat pada setiap nod pokok.

Cara menggunakan
Untuk menggunakan pemalam tayangan slaid ini, anda perlu memperkenalkan fail Aimara.css dan Aimara.js ke dalam halaman.

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

Struktur HTML

Anda boleh menggunakan dc6dce4a544fdca2df29d5ac0ea9906b kosong sebagai bekas untuk pepohon direktori ini.

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

JAVASCRIPT

Kemudian anda boleh memulakan pemalam pokok direktori melalui kaedah berikut. Anda boleh mencipta beberapa nod pokok dan nod anak dan kemudian menjadikannya. Nod boleh ditambah pada struktur pokok sebelum atau selepas pokok itu diberikan.

<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>        

Buat menu konteks untuk nod pokok

Anda boleh mencipta menu konteks klik kanan melalui kaedah berikut.

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();
       }
      }
     ]
    }
   }
  ]
 }
};        

Kemudian mulakan struktur pokok melalui kaedah berikut:

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

Tambahkan nod pokok dalam masa nyata selepas struktur pokok itu dipaparkan:

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

Di atas adalah keseluruhan kandungan artikel ini, saya perkenalkan kepada anda pelaksanaan js responsif tulen untuk bar menu struktur pokok saya harap anda menyukainya.