Kemahiran effect_javascript pokok responsif javascript tulen-tutorial js-php.cn

Kemahiran effect_javascript pokok responsif javascript tulen

WBOY

Lepaskan： 2016-05-16 15:33:00

asal

1557 orang telah melayarinya

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>

Salin selepas log masuk

Struktur HTML

Anda boleh menggunakan

kosong sebagai bekas untuk pepohon direktori ini.

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

Salin selepas log masuk

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>

Salin selepas log masuk

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

Salin selepas log masuk

Kemudian mulakan struktur pokok melalui kaedah berikut:

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

Salin selepas log masuk

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

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

Salin selepas log masuk

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