溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1、 添加自定義屬性 page
2、 為 ztree 每個樹形節點，添加點擊事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ztree樹形菜單的使用</title>
<!-- 導入jquery核心類庫 -->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<!-- 導入easyui類庫 -->
<link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="../css/default.css" rel="external nofollow" >
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<!--引入ztree-->
<script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css" rel="external nofollow" />
<script type="text/javascript">
//頁面加載后執行
$(function() {
//1.進行ztree樹形菜單設置，開啟簡單json數據支持
var setting = {
data:{
simpleData:{
enable:true//開啟簡單json數據格式支持
}
},
callback:{
onClick:function(event,treeId,treeNode,clickFlag){
var content = '<div >'+'<iframe src="'+treeNode.page+'" scrolling="auto" ></iframe></div>'
//沒有設置page屬性的樹形菜單，不打開選項卡
if(treeNode.page!=undefined && treeNode.page!=""){
//如果選項卡已經打開，就選中
if($("#mytabs").tabs('exists',treeNode.name)){
//選中選項卡
$("#mytabs").tabs('select',treeNode.name);
}else{
//如果沒有打開，添加選項卡
$("#mytabs").tabs('add',{
title:treeNode.name,
content:content,
closable:true
});
}
}
}
}
};
//2.提供ztree樹形菜單數據
var zNodes = [
{id:1,pId:0,name:"父節點一"},
{id:2,pId:0,name:"父節點二"},
{id:11,pId:1,name:"子節點一"},
{id:12,pId:1,name:"子節點二"},
{id:13,pId:2,name:"CSDN博客",page:"http://blog.csdn.net/a772304419"},
{id:14,pId:2,name:"博客園",page:"http://www.cnblogs.com/niwotaxuexiba/"}
];
//3.生成樹形菜單
$.fn.zTree.init($("#baseMenu"),setting,zNodes);
});
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',title:'你我他學習吧-學習Java的好博客！'" ></div>
<div data-options="region:'west',title:'菜單導航'" >
<!--折疊面板-->
<div class="easyui-accordion" data-options="fit:true">
<div data-options="title:'基礎菜單'">
<!--通過ztree插件，制作樹形菜單-->
<ul id="baseMenu" class="ztree"></ul>
</div>
<div data-options="title:'系統菜單'">你我他學習吧</div>
</div>
</div>
<div data-options="region:'center',title:'中部區域'">
<!--選項卡面板-->
<div id="mytabs" class="easyui-tabs" data-options="fit:true">
<div data-options="title:'選項卡面板一',closable:true">選項卡面板一</div>
<div data-options="title:'選項卡面板二',closable:true">選項卡面板二</div>
</div>
</div>
<div data-options="region:'east',title:'東部區域'" ></div>
<div data-options="region:'south',title:'南部區域'" ></div>
</body>
</html>
以上這篇zTree樹形菜單交互選項卡效果的實現方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
