手机版

纯爪哇岛描述语言响应式树形菜单效果

时间:2021-09-22 来源:互联网 编辑:宝哥软件园 浏览:

简要教程aimaraJS是一款非常实用的纯爪哇岛描述语言响应式多级目录树结构插件。该目录树可以动态添加和删除树节点,可以制作多级树结构,每个节点上可以都带有右键上下文菜单,并且每个节点上都可以配置不同的图标。它的特点有:

可以创建一个基本的树结构并渲染它。可以实时添加和删除树节点。可以显示不同的树节点图标。在树节点打开和关闭的时候可以自定义事件。每个树节点上都可以制作右键上下文菜单

使用方法使用该幻灯片插件需要在页面中引入Aimara.css和Aimara.js文件。

链接rel='样式表href=' CSS/Aimara。CSS '/脚本src=' http : js/Aimara。js /脚本超文本标记语言结构

可以使用一个空的差异来作为这个目录树的容器。

div id='div_tree'/div JAVASCRIPT

然后你可以通过下面的方法来初始化该目录树插件。你可以创建一些树节点和子节点,然后渲染它们。节点可以在树被渲染之前或之后添加到树结构中。

脚本类型=' text/JavaScript '窗口。onload=function(){//创建树结构var tree=createTree('div_tree ',' white ');//创建树节点节点1 var节点1=树。创建节点('第一个节点',false,' images/star.png ',null,null,null);//node1添加到树结构中node1.createChildNode('第一个子节点,false,' images/blue_key.png ',null,null);//渲染树结构树。绘制树();//创建第二个树节点节点1=树。创建节点(' Second node ',false,' images/star.png ',null,null,null);节点1。createchildnode(' Second childnode ',false,' images/blue_key.png ',null,null);};/script为树节点创建上下文菜单

可以通过下面的方法来创建一个右键上下文菜单。

var contex _ menu={ ' context 1 ' : { elements :[{ text : ' Node Actions ',icon: 'images/blue_key.png ',action : function(node) { },子菜单: { elements :[{ text : ' Toggle Node ',icon: 'images/leaf.png ',action 33: function(Node){ Node。toggle node();} },{ text : 'Expand Node ',icon: 'images/leaf.png ',action : function(Node){ Node。expandnode();} },{ text : 'Collapse Node ',icon: 'images/leaf.png ',action : function(Node){ Node。collapse node();} },{ text : 'Expand Subtree ',icon: 'images/tree.png ',action : function(node){ node。expandsubtree();} },{ text : 'Collapse Subtree ',icon: 'images/tree.png ',action : function(node){ node。折叠子树();} },{ text : 'Delete Node ',icon: 'images/delete.png ',action : function(Node){ Node。remove node();} },] } },{ text : 'Child Actions ',icon: 'images/blue_key.png ',action : function(node) { },子菜单: { elements :[{ text : ' Create Child Node ',null,' context 1 ');} },{ text : '创建1000个子节点,icon: 'images/add1.png ',action : function(node){ for(var I=0;i1000I)节点。createchildnode(' Created-' I,false,' images/folder.png ',null,' context 1 ');} },{ text : 'Delete Child Nodes ',icon: 'images/delete.png ',action : function(node){ node。removechildnodes();} } ] } } ] }};然后通过下面的方法来初始化树结构:

tree=createTree('div_tree ',' white ',contex _ menu);tree . draw tree();渲染树结构后,实时添加树节点:

tree.createNode('Real Time ',false,' images/leaf.png ',null,null,' context 1 ');这是本文的全部内容,介绍了一个用纯js响应实现树形结构菜单栏的特殊效果。希望你喜欢。

版权声明:纯爪哇岛描述语言响应式树形菜单效果是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。

相关文章推荐