在zTree中如何实现交互选项卡
下面我就为大家分享一篇zTree树形菜单交互选项卡效果的实现方法，具有很好的参考价值，希望对大家有所帮助。
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 = '<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>上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Atas ialah kandungan terperinci 在zTree中如何实现交互选项卡. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Betulkan: Ralat ERR_ADDRESS_UNREACHABLE dalam Google Chrome
May 15, 2023 pm 06:22 PM
Beberapa pengguna Windows telah mengadu bahawa apabila mereka cuba mengakses beberapa tapak web pada penyemak imbas Google Chrome pada sistem mereka, mereka tidak dapat mengakses halaman web tersebut. Ia juga memaparkan mesej pada penyemak imbas yang mengatakan "Tapak tidak boleh dicapai" dengan kod ralat ERR_ADDRESS_UNREACHABLE. Mungkin terdapat banyak sebab yang berpotensi di sebalik isu ini, ia mungkin disebabkan oleh isu pelayan tapak web, tetapan pelayan proksi, sambungan internet yang tidak stabil, dsb. Jika anda menghadapi masalah yang sama, jangan panik. Selepas menganalisis masalah dengan mendalam dalam artikel ini, kami mendapat banyak penyelesaian. Sebelum meneruskan, cuba penyelesaian berikut: Cuba semak sama ada pengguna cuba mengakses tapak daripada peranti lain dan tiada masalah, kemudian ini
Tidak boleh menggunakan MSI Afterburner dalam Windows 11? Cuba pembaikan berikut.
May 09, 2023 am 09:16 AM
MSIAfterburner ialah alat overclocking yang sesuai untuk kebanyakan kad grafik. Selain itu, anda juga boleh menggunakannya untuk memantau prestasi sistem anda. Tetapi sesetengah pengguna melaporkan bahawa MSIAfterburner tidak berfungsi dalam Windows 11. Ini mungkin disebabkan oleh beberapa sebab, yang kita bincangkan dalam bahagian berikut. Walau bagaimanapun, apabila ini berlaku, ia menghalang anda daripada mengubah prestasi atau memantaunya semasa bermain permainan. Seperti yang dijangkakan, ini menimbulkan cabaran penting kepada pemain. Itulah sebabnya kami telah mendedikasikan tutorial ini untuk membantu anda memahami isu ini dan membimbing anda melalui pembetulan paling berkesan untuk MSIAfterburned tidak berfungsi dalam isu Windows 11.
Betulkan: Ralat VAN 1067 semasa menjalankan Valorant pada Windows 11
May 22, 2023 pm 02:41 PM
Sistem pengendalian kelihatan jauh lebih baik daripada pendahulunya dan mempunyai ciri berorientasikan pemain seperti AutoHDR dan DirectStorage, tetapi pemain Valorant menghadapi masalah melancarkan permainan. Ini bukan isu pertama yang dihadapi oleh pemain sebelum ini, Valorant tidak membuka pada Windows 11 adalah satu lagi isu yang melanda mereka tetapi kami telah membincangkan cara untuk membetulkannya. Kini nampaknya pemain Valorant yang beralih kepada Windows 11 menghadapi masalah disebabkan perkhidmatan Secure Boot dan TPM2.0, yang menyebabkan menu permainan hanya menunjukkan pilihan keluar semasa berjalan. Ramai pengguna mendapat ralat VAN1067, tetapi ia tidak sepatutnya menjadi punca penggera
Fungsi DirectX GetDeviceRemovedReason gagal dengan ralat
May 17, 2023 pm 03:38 PM
Hampir setiap permainan mewah yang kami mainkan bergantung pada DirectX untuk berjalan dengan cekap. Walau bagaimanapun, sesetengah pengguna melaporkan menghadapi fungsi DirectX GetDeviceRemovedReasonfailedwith diikuti dengan sebab ralat. Sebab di atas tidak jelas kepada pengguna biasa dan memerlukan beberapa tahap penyelidikan untuk menentukan punca dan penyelesaian yang paling berkesan. Untuk memudahkan urusan, kami telah mendedikasikan tutorial ini untuk masalah ini. Dalam bahagian berikut, kami akan membantu anda mengenal pasti punca yang berpotensi dan membimbing anda melalui langkah penyelesaian masalah untuk menghapuskan fungsi DirectX GetDeviceRemovedReasonfailedwitherror. apa yang menyebabkan
Bagaimana untuk menukar warna fon pada iPhone
May 13, 2023 pm 01:01 PM
Warna membantu cara kami memproses sesuatu secara visual, jadi menggunakan pelbagai warna dalam dokumen, e-mel, skrin kunci dan elemen lain kelihatan lebih baik. Seperti gaya fon, memilih warna fon yang berbeza boleh menjadi cara yang baik untuk mengelakkan teks pada telefon anda kelihatan monoton. Cara Menukar Warna Fon dalam Apl Halaman Anda boleh menukar warna teks dokumen pada iPhone anda, atau anda boleh melakukannya dengan membuka apl Pages pada iOS. Dalam Halaman, klik dokumen yang ingin anda buka. Jika dokumen dibuka dalam paparan skrin, klik butang Edit di penjuru kanan sebelah atas. Dokumen yang dipilih kini akan memasuki mod pengeditan. Untuk menukar warna fon teks dalam dokumen ini, klik teks yang dikehendaki untuk menyerlahkannya. Serlahkan
3 Cara untuk Memperbaiki Proses Terbiar Sistem CPU Tinggi dalam Windows 11
Apr 28, 2023 pm 07:49 PM
Proses melahu sistem membantu menjadikan komputer anda lebih cekap dan responsif dengan membebaskan sumber yang digunakan oleh program dan proses lain. Walau bagaimanapun, anda mungkin perasan bahawa kadangkala, penggunaan CPU komputer anda adalah tinggi untuk proses melahu sistem. Proses Terbiar Sistem CPU tinggi mungkin menggunakan banyak sumber sistem dan bukannya membantu sistem anda berjalan pada kemuncaknya. Ini boleh menjadi masalah bagi pemain dengan perkakasan terhad. Masalah ini juga berlaku apabila PC anda berjalan untuk masa yang lama atau apabila anda menggunakan berbilang program pada masa yang sama dan penggunaan CPU tiba-tiba meningkat kepada 100%. Nasib baik, anda boleh membetulkan isu CPU tinggi dalam Windows 11 dengan mudah. Mengapa penggunaan CPU saya sangat rendah dalam Windows 11
Bagaimana untuk menambah sempadan halaman artistik dalam Microsoft Word
Apr 27, 2023 pm 08:25 PM
Adakah anda bosan melihat sempadan hitam tradisional pada dokumen Word anda sepanjang masa? Adakah anda sedang mencari cara untuk menambahkan beberapa sempadan berwarna-warni dan artistik pada dokumen anda untuk menjadikannya lebih menarik dan menyeronokkan? Bagaimana pula dengan menambahkan sempadan artistik yang berbeza pada halaman dokumen Word anda? Atau gunakan sempadan artistik tunggal pada semua halaman dalam dokumen sekaligus? Saya tahu anda teruja seperti kami tentang keseluruhan perkara sempadan artistik ini! Pergi terus ke artikel ini untuk mengetahui cara berjaya menggunakan sempadan artistik pada dokumen Word. Bahagian 1: Cara Menggunakan Sempadan Halaman Artistik yang Sama pada Semua Halaman dalam Dokumen Word Langkah 1: Buka dokumen Word dan klik tab "Reka Bentuk" di reben atas. Pilih dalam DESIGN
Bagaimana untuk menambah / mengalih keluar tera air dalam dokumen Word
May 24, 2023 pm 12:52 PM
Pada asasnya, tera air ialah frasa atau imej dalam warna kelabu muda yang ditambahkan sebagai latar belakang pada mana-mana halaman atau bahagian dokumen. Ia diletakkan sedemikian rupa sehingga ia mempunyai bayang-bayang terang supaya ia tidak mengganggu keterlihatan kandungan dalam dokumen. Biasanya, anda mesti melihat dokumen dengan logo syarikat, nama jenama atau frasa seperti Draf atau Sulit sebagai tera air. Menggunakan tera air dalam dokumen anda membantu melindungi kandungan anda atau mana-mana item lain yang anda tidak mahu orang lain tuntut sebagai milik mereka. Oleh itu, tera air boleh digunakan untuk mengelakkan penyalinan/pemalsuan kandungan dokumen anda. Adakah anda mempertimbangkan untuk menambah tera air untuk melindungi dokumen anda atau mengalih keluar tera air sedia ada setelah ia memenuhi tujuannya? Dalam artikel ini, kami membincangkan cara menambah dan mengalih keluar tera air dalam dokumen Word. Cara menambah tera air dalam Word 1. Klik
