<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - beforeClick / onClick</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="jQueryUI/css/redmond/jquery-ui-1.9.2.custom.min.css"/>
<link rel="stylesheet" href="zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jQueryUI/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="zTree/js/jquery.ztree.core-3.5.js"></script>
<!-- <script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>-->
<!-- <script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>-->
<script type="text/javascript" src="jquery.popupSmallMenu.js"></script>
<style>
.small-menu {
position: absolute;
width: 120px;
z-index: 99999;
border: solid 1px #CCC;
background: #EEE;
padding: 0px;
margin: 0px;
display: none;
}
.small-menu li {
list-style: none;
padding: 0px;
margin: 0px;
}
.small-menu li A {
color: #333;
text-decoration: none;
display: block;
line-height: 20px;
height: 20px;
background-position: 6px center;
background-repeat: no-repeat;
outline: none;
padding: 1px 5px;
padding-left: 28px;
}
.small-menu li a:hover {
color: #FFF;
background-color: #3399FF;
}
.small-menu-separator {
padding-bottom:0;
border-bottom: 1px solid #DDD;
}
.small-menu LI.edit A { background-image: url(images/page_white_edit.png); }
.small-menu LI.cut A { background-image: url(images/cut.png); }
.small-menu LI.copy A { background-image: url(images/page_white_copy.png); }
.small-menu LI.paste A { background-image: url(images/page_white_paste.png); }
.small-menu LI.delete A { background-image: url(images/page_white_delete.png); }
.small-menu LI.quit A { background-image: url(images/door.png); }
</style>
<SCRIPT type="text/javascript">
<!--
var setting = {
check: {
enable: true
},
data: {
key: {
checked: "isChecked",
title:"t",
name:"nnnn",
},
simpleData: {
enable: true,
idKey :"key",
pIdKey:"pkey"
}
},
callback: {
beforeClick: beforeClick,
onClick: onClick,
onNodeCreated:OnNodeCreated,
onRightClick:OnRightClick
}
};
var zNodes =[
{ key:1, pkey:0, nnnn:"普通的父节点", t:"我很普通,随便点我吧", open:true,isChecked:0},
{ key:11, pkey:1, nnnn:"叶子节点 - 1", t:"我很普通,随便点我吧"},
{ key:12, pkey:1, nnnn:"叶子节点 - 2", t:"我很普通,随便点我吧"},
{ key:13, pkey:1, nnnn:"叶子节点 - 3", t:"我很普通,随便点我吧"},
{ key:2, pkey:0, nnnn:"NB的父节点", t:"点我可以,但是不能点我的子节点,有本事点一个你试试看?", open:true},
{ key:21, pkey:2, nnnn:"叶子节点2 - 1", t:"你哪个单位的?敢随便点我?小心点儿..", click:false},
{ key:22, pkey:2, nnnn:"叶子节点2 - 2", t:"我有老爸罩着呢,点击我的小心点儿..", click:false},
{ key:23, pkey:2, nnnn:"叶子节点2 - 3", t:"好歹我也是个领导,别普通群众就来点击我..", click:false},
{ key:3, pkey:0, nnnn:"郁闷的父节点", t:"别点我,我好害怕...我的子节点随便点吧...", open:true, click:false },
{ key:31, pkey:3, nnnn:"叶子节点3 - 1", t:"唉,随便点我吧"},
{ key:32, pkey:3, nnnn:"叶子节点3 - 2", t:"唉,随便点我吧"},
{ key:33, pkey:3, nnnn:"叶子节点3 - 3", t:"唉,随便点我吧"}
];
var log, className = "dark";
function beforeClick(treeId, treeNode, clickFlag) {
className = (className === "dark" ? "":"dark");
showLog("[ "+getTime()+" beforeClick ] " + treeNode.nnnn );
return (treeNode.click != false);
}
function onClick(event, treeId, treeNode, clickFlag) {
showLog("[ "+getTime()+" onClick ] clickFlag = " + clickFlag + " (" + (clickFlag===1 ? "普通选中": (clickFlag===0 ? "<b>取消选中</b>" : "<b>追加选中</b>")) + ")");
}
function showLog(str) {
if (!log) log = $("#log");
log.append("<li class='"+className+"'>"+str+"</li>");
if(log.children("li").length > 8) {
log.get(0).removeChild(log.children("li")[0]);
}
}
function getTime() {
var now= new Date(),
h=now.getHours(),
m=now.getMinutes(),
s=now.getSeconds();
return (h+":"+m+":"+s);
}
var ztree;
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
ztree = $.fn.zTree.getZTreeObj("treeDemo");
});
function OnRightClick(event, treeId, treeNode) {
ztree.selectNode(treeNode);
if(treeNode) {
//console.log(treeNode.tId);
//console.dir($('#'+treeNode.tId));
$("#menu").popupSmallMenu({
event : event,
onClickItem : function(item) {
chuli(treeNode,item);
}
});
}
}
function chuli(treeNode,item){
alert(item);
}
function OnNodeCreated(event, treeId, treeNode) {
//console.log(treeId);
//console.dir(treeNode);
//$(treeNode).contextMenu({x: 123, y: 123});
// console.dir($('#treeDemo_10'));
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1 id="s">单击节点控制</h1>
<h6>[ 文件路径: core/click.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>1、beforeClick / onClick 事件回调函数控制</h2>
<ul class="list">
<li>利用 click 事件回调函数 可以进行各种其他的附加操作,这里简单演示如何监控此事件</li>
<li><p><span class="highlight_red">请尝试按下 <b>Ctrl</b> 键进行 多节点选择 和 取消选择</span><br/>
click log:<br/>
<ul id="log" class="log"></ul></p>
</li>
</ul>
</li>
<li class="title"><h2>2、setting 配置信息说明</h2>
<ul class="list">
<li class="highlight_red">需要设置 setting.callback.beforeClick 和 setting.callback.onClick 属性, 详细请参见 API 文档中的相关内容</li>
</ul>
</li>
<li class="title"><h2>3、treeNode 节点数据说明</h2>
<ul class="list">
<li>对 节点数据 没有特殊要求,用户可以根据自己的需求添加自定义属性</li>
</ul>
</li>
</ul>
</div>
</div>
<div>
<ul id="menu" class="small-menu">
<li class="edit"><a href="#">编辑</a></li>
<li class="cut"><a href="#">添加</a></li>
<li class="copy"><a href="#">删除</a></li>
<li class="small-menu-separator"></li>
<li class="delete"><a href="#"><span class="icon icon-edit"></span>Zoom Out</a></li>
</ul>
</div>
</BODY>
</HTML>
没有合适的资源?快使用搜索试试~ 我知道了~
ztree 右键菜单,html的静态的,js和css都有
共27个文件
png:18个
js:3个
gif:3个
5星 · 超过95%的资源 需积分: 34 51 下载量 164 浏览量
2016-02-02
16:15:55
上传
评论
收藏 81KB ZIP 举报
温馨提示
ztree 右键菜单,html的静态的,js和css都有,下载后直接就可以看到功能介绍,网上可真不好找啊,特此奉献
资源推荐
资源详情
资源评论
收起资源包目录
右键菜单.zip (27个子文件)
右键菜单
jquery-1.8.2.min.js 91KB
images
door.png 412B
page_white_add.png 442B
page_white_edit.png 618B
page_white_delete.png 536B
page_white_copy.png 309B
page_white_paste.png 620B
cut.png 648B
jquery ui click.html 7KB
zTree
css
zTreeStyle
img
diy
5.png 710B
9.png 467B
1_close.png 601B
1_open.png 580B
6.png 432B
2.png 570B
7.png 534B
4.png 399B
8.png 529B
3.png 762B
zTreeStandard.gif 5KB
line_conn.gif 45B
zTreeStandard.png 11KB
loading.gif 381B
zTreeStyle.css 6KB
demo.css 2KB
js
jquery.ztree.core-3.5.js 55KB
jquery.popupSmallMenu.js 2KB
共 27 条
- 1
资源评论
- wh080836232016-08-23挺好的,正好用到,不错,谢谢分享
- tereser2018-05-22谢谢分享学习中
ejufang
- 粉丝: 1
- 资源: 9
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功