日期:2014-05-17 浏览次数:20890 次
<html>
<head>
<title>菜单栏</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core-3.3.js"></script>
<SCRIPT type="text/javascript">
var curMenu = null, zTree_Menu = null;
var setting = {
view: {
showLine: true,
selectedMulti: false,
dblClickExpand: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
onNodeCreated: this.onNodeCreated,
beforeClick: this.beforeClick,
onClick: this.onClick
}
};
。。。
function onClick(e, treeId, node) {
alert("Do what you want to do!");
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
curMenu = zTree_Menu.getNodes()[0].children[0].children[0];
zTree_Menu.selectNode(curMenu);
var a = $("#" + zTree_Menu.getNodes()[0].tId + "_a");
a.addClass("cur");
});
</SCRIPT>
<style type="text/css">
.ztree li a.level0 {width:200px;height: 20px; text-align: center; display:block; background-color: #0B61A4; border:1px silver solid;}
.ztree li a.level0.cur {background-color: #66A3D2; }
.ztree li a.level0 span {display: block; color: white; padding-top:3px; font-size:12px; font-weight: bold;word-spacing: 2px;}
.ztree li a.level0 span.button {float:right; margin-left: 10px; visibility: visible;display:none;}
.ztree li span.button.switch.level0 {display:none;}
</style>
</HEAD>
<BODY>
<ul id="treeDemo" class="ztree"></ul>
</BODY>
</html>