ext树形菜单加上右键菜单是不是很酷,ext当然也能实现。 树形菜单如果加上右键事件是不是更接近C/S软件的效果呢?ext当然能够做到,看下面的代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
//定义树的跟节点
var root=new Ext.tree.TreeNode({
id:"root",//根节点id
text:"我是树根"
});
//定义树节点
var c1=new Ext.tree.TreeNode({
id:*c1*,//子结点id
text:*我是大儿子*
});
root.appendChild(c1);//为根节点增加子结点c1
//生成树形面板
var tree=new Ext.tree.TreePanel({
renderTo:"show",
root:root,//定位到根节点
animate:true,//开启动画效果
enableDD:false,//不允许子节点拖动
border:false,//没有边框
rootVisible:true//设为false将隐藏根节点,很多情况下,我们选择隐藏根节点增加美观性
});
//定义右键菜单
var rightClick = new Ext.menu.Menu({
id :*rightClickCont*,
items : [{
id:*rMenu1*,
text : *菜单1*,
//增加菜单点击事件
handler:function (){
alert(*我被点击了!*);
}
}, {
id:*rMenu2*,
text : *菜单2*
}, {
id:*rMenu3*,
text : *菜单3*
}]
});
//增加右键点击事件
c1.on(*contextmenu*,function(node,event){//声明菜单类型
event.preventDefault();//这行是必须的,谁能解释下,我没搞懂-_-||
rightClick.showAt(event.getXY());//取得鼠标点击坐标,展示菜单
});
})
</script>
<div id="show"></div>
</body>
</html>
带右键菜单的树
最新推荐文章于 2021-03-05 03:42:54 发布