Maison > Article > interface Web > Comment implémenter des onglets interactifs dans zTree
Comment implémenter des onglets interactifs dans zTree
- 亚连original
- 2018-06-15 16:48:472273parcourir
Maintenant, je vais partager avec vous comment implémenter l'effet d'onglet interactif du menu arborescent zTree. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.
1. Ajouter une page d'attributs personnalisés
2. Ajouter des événements de clic pour chaque nœud d'arbre de 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 = '<p style="width:100%;height:100%;overflow:hidden;">'+'<iframe src="'+treeNode.page+'" scrolling="auto" style="width:100%;height:100%;border:0;"></iframe></p>'
//没有设置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">
<p data-options="region:'north',title:'你我他学习吧-学习Java的好博客！'" style="height:100px"></p>
<p data-options="region:'west',title:'菜单导航'" style="width:200px">
<!--折叠面板-->
<p class="easyui-accordion" data-options="fit:true">
<p data-options="title:'基础菜单'">
<!--通过ztree插件，制作树形菜单-->
<ul id="baseMenu" class="ztree"></ul>
</p>
<p data-options="title:'系统菜单'">你我他学习吧</p>
</p>
</p>
<p data-options="region:'center',title:'中部区域'">
<!--选项卡面板-->
<p id="mytabs" class="easyui-tabs" data-options="fit:true">
<p data-options="title:'选项卡面板一',closable:true">选项卡面板一</p>
<p data-options="title:'选项卡面板二',closable:true">选项卡面板二</p>
</p>
</p>
<p data-options="region:'east',title:'东部区域'" style="width:100px"></p>
<p data-options="region:'south',title:'南部区域'" style="height:100px"></p>
</body>
</html>Ce qui précède est ce que j'ai compilé pour tout le monde, je l'espère. sera utile à tout le monde à l’avenir.
Articles associés :
Comment revenir à la position initiale de la page d'origine après un saut de page en vue
Comment configurer en utilisant vue-router La méthode de titre de chaque page
Comment résoudre le problème lorsque Vue.js affiche des données, la page clignote
ajax request+vue.js render+ Chargement de la page
Comment utiliser ajax pour rendre une page dans vue.js
Utilisation du pool de connexion MySQL via Node .js
Comment référencer l'icône de la police Ali dans vue
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!