How to implement interactive tabs in zTree
Below I will share with you an article on how to implement the interactive tab effect of the zTree tree menu. It has a good reference value and I hope it will be helpful to everyone.
1. Add a custom attribute page
2. Add a click event for each tree node of 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>The above is what I compiled for everyone. I hope it will be useful in the future. Helpful to everyone.
Related articles:
How to implement page jump in vue and return to the initial position of the original page
How to set up using vue-router The title method of each page
How to solve the problem when Vue.js displays data, the page flashes
ajax requests vue.js to render the page load
How to use ajax to render the page in vue.js
Using MySQL connection pool through Node.js
How to reference Ali font icon in vue
The above is the detailed content of How to implement interactive tabs in zTree. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
Fix: ERR_ADDRESS_UNREACHABLE error in Google Chrome
May 15, 2023 pm 06:22 PM
Several Windows users have complained that when they try to access some websites on Google Chrome browser on their systems, they are unable to access the web pages. It also displays a message on the browser saying "The site cannot be reached" with error code ERR_ADDRESS_UNREACHABLE. There could be many potential reasons behind this issue, it could be due to website server issues, proxy server settings, unstable internet connection, etc. If you encounter similar problems, don't panic. After deeply analyzing the problem in this article, we got a bunch of solutions. Before proceeding, try the following workarounds: Try checking if the user is trying to access the site from other devices and there are no issues, then this
Can't use MSI Afterburner in Windows 11? Try the following fixes.
May 09, 2023 am 09:16 AM
MSIAfterburner is an overclocking tool suitable for most graphics cards. Apart from that, you can also use it to monitor the performance of your system. But some users reported that MSIAfterburner is not working in Windows 11. This may be due to several reasons, which we discuss in the following sections. However, when this happens, it prevents you from changing the performance or monitoring it while playing the game. As expected, this poses a significant challenge to gamers. That’s why we’ve dedicated this tutorial to help you understand the issue and walk you through the most effective fixes for MSIAfterburned not working in Windows 11 issue.
Fix: VAN 1067 error when running Valorant on Windows 11
May 22, 2023 pm 02:41 PM
The operating system looks much better than its predecessor and has gamer-oriented features like AutoHDR and DirectStorage, but Valorant players have had some trouble launching the game. This is not the first issue faced by gamers earlier, Valorant not opening on Windows 11 is another issue plaguing them but we have covered the ways to fix it. Now it seems that Valorant players who switched to Windows 11 are facing issues due to Secure Boot and TPM2.0 services, which causes the game menu to only show an exit option while running. Many users are getting the VAN1067 error, but it shouldn't be a cause for alarm
DirectX function GetDeviceRemovedReason fails with error
May 17, 2023 pm 03:38 PM
Almost every high-end game we play relies on DirectX to run efficiently. However, some users reported encountering the DirectX function GetDeviceRemovedReasonfailedwith followed by the error reason. The above reasons are not self-evident to the average user and require some level of research to determine the root cause and the most effective solution. To make things easier, we've dedicated this tutorial to this problem. In the following sections, we will help you identify the potential causes and walk you through the troubleshooting steps to eliminate the DirectX function GetDeviceRemovedReasonfailedwitherror. what causes
How to change font color on iPhone
May 13, 2023 pm 01:01 PM
Color helps how we process things visually, so using a variety of colors in documents, emails, lock screens, and other elements looks better. As with font styles, choosing different font colors can be a good way to avoid text on your phone looking monotonous. How to Change Font Color in Pages App You can change the text color of a document on your iPhone, or you can do it by opening the Pages app on iOS. Within Pages, click the document you want to open. If the document is open in screen view, click the Edit button in the upper right corner. The selected document will now enter editing mode. To change the font color of text in this document, click the desired text to highlight it. Highlight
3 Ways to Fix System Idle Process High CPU in Windows 11
Apr 28, 2023 pm 07:49 PM
The system idle process helps make your computer more efficient and responsive by freeing up resources used by other programs and processes. However, you may have noticed that sometimes, your computer's CPU usage is high for system idle processes. System Idle Process High CPU may consume a lot of system resources instead of helping your system run at its peak. This can be a problem for gamers with limited hardware. This problem also occurs when your PC is running for a long time or when you are using multiple programs at the same time and the CPU usage suddenly rises to 100%. Fortunately, you can easily fix high CPU issues in Windows 11. Why is my CPU usage so low in Windows 11
How to add artistic page borders in Microsoft Word
Apr 27, 2023 pm 08:25 PM
Are you tired of seeing the traditional black borders on your Word documents all the time? Are you looking for ways how to add some colorful and artistic borders to your documents to make them more attractive and fun? How about adding different artistic borders to different pages of your Word document? Or apply a single artistic border to all pages in the document at once? I know you’re as excited as we are about this whole artistic borders thing! Go straight to this article to learn how to successfully apply artistic borders to Word documents. Part 1: How to Apply the Same Artistic Page Border to All Pages in a Word Document Step 1: Open the Word document and click the "Design" tab in the top ribbon. Choose in DESIGN
How to add/remove watermark in Word document
May 24, 2023 pm 12:52 PM
Basically, a watermark is a phrase or image in a light gray shade that is added as a background to any page or part of a document. It is placed in such a way that it has a light shadow so that it does not interfere with the visibility of the content in the document. Typically, you must see documents with a company logo, brand name, or phrases like Draft or Confidential as watermarks. Using watermarks in your documents helps protect your content or any other items that you don't want others to claim as theirs. Therefore, watermarks can be used to prevent copying/forgery of your document content. Are you considering adding a watermark to protect your documents or removing the existing watermark once it has served its purpose? In this article, we discussed how to add and remove watermarks in Word documents. How to add watermark in Word 1. Click
