这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家分享了纯 javascript 响应式树形菜单效果的简单教程,对多级目录树形菜单感兴趣的小伙伴们可以参考一下
简要教程 aimaraJS 是一款非常实用的纯 javascript 响应式多级目录树结构插件。该目录树可以动态添加和删除树节点,可以制作多级树结构,每个节点上可以都带有右键上下文菜单,并且每个节点上都可以配置不同的图标。它的特点有:
使用方法 使用该幻灯片插件需要在页面中引入 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');
来源: http://www.phperz.com/article/17/0410/268804.html