使用方法
1、将NodeTree-JSON.js以及CSS文件夹复制到项目中并引用。
2、引用JQuery框架。
3、修改NodeTree-JSON.js中的NodeT">
Rumah hujung hadapan web tutorial js JavaScript NodeTree导航栏(菜单项JSON类型/自制)_javascript技巧

JavaScript NodeTree导航栏(菜单项JSON类型/自制)_javascript技巧

May 16, 2016 pm 05:42 PM
Bar navigasi

最近比较清闲,自己做了个JavaScript NodeTree,网上类似的东西其实挺多的,功能也比这个全,我做这个纯粹为了练练手。

图标可以自定义(16X16),菜单项完全是JSON类型定义的,方便修改。
界面
JavaScript NodeTree导航栏(菜单项JSON类型/自制)_javascript技巧
使用方法
1、将NodeTree-JSON.js以及CSS文件夹复制到项目中并引用。
2、引用JQuery框架。
3、修改NodeTree-JSON.js中的NodeTreeMenu菜单项,以下是简单说明。

复制代码 代码如下:

var NodeTreeMenu = [
//id:节点ID,pId:父节点Id,没有父节点则为0,name:显示名称,img:显示图标,open:只有父节点存在此属性,子节点默认是否展开,file:只有子节点由此属性,点击后打开的页面
{ id: 1, pId: 0, name: "父节点一", img: "CSS/Images/001.png", open: true },
{ id: 101, pId: 1, name: "子节点一", img: "CSS/Images/002.png", file: "http://www.cnblogs.com/nnzfly/" }//注意最后一行数据末尾一定不能加逗号!否则IE下报错!
]

4、在要显示NodeTree的地方添加如下代码:
复制代码 代码如下:




5、在页面中添加如下代码:
复制代码 代码如下:

或者是(二者任选其一):



NodeTree("mainFrame") 中,mainFrame是目标frame的name,比如说导航栏在左边的frame里,右边显示的frame的name=“mainFrame”。
实在不理解看看demo.htm的代码,就明白了。
附上源代码,感兴趣的可以看看~
http://dl.vmall.com/c0b7wda1ps
喜欢请点一下推荐,你的支持是我最大的动力!
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk melaraskan bar navigasi di bahagian atas Douyin? Pilihan pelarasan bar navigasi lain Bagaimana untuk melaraskan bar navigasi di bahagian atas Douyin? Pilihan pelarasan bar navigasi lain Mar 07, 2024 pm 02:50 PM

Bar navigasi antara muka Douyin terletak di bahagian atas dan merupakan saluran penting untuk pengguna mengakses fungsi dan kandungan yang berbeza dengan pantas. Memandangkan Douyin terus mengemas kini, pengguna mungkin mahu dapat menyesuaikan dan melaraskan bar navigasi mengikut keutamaan dan keperluan peribadi mereka. 1. Bagaimana untuk melaraskan bar navigasi di bahagian atas Douyin? Biasanya, bar navigasi teratas Douyin memaparkan beberapa saluran popular, membolehkan pengguna menyemak imbas dan melihat kandungan yang diminati dengan pantas. Jika anda ingin melaraskan tetapan untuk saluran teratas anda, ikuti langkah berikut: Buka apl TikTok dan log masuk ke akaun anda. Cari bar navigasi di atas antara muka utama, biasanya di tengah atau atas skrin. Klik simbol "+" atau butang serupa di atas bar navigasi untuk memasuki antara muka penyuntingan saluran. Dalam antara muka penyuntingan saluran, anda boleh melihat senarai lalai saluran popular. Anda boleh lulus

Langkah-langkah pelaksanaan melaksanakan bar navigasi menu dengan kesan bayangan menggunakan CSS tulen Langkah-langkah pelaksanaan melaksanakan bar navigasi menu dengan kesan bayangan menggunakan CSS tulen Oct 16, 2023 am 08:27 AM

Langkah-langkah untuk melaksanakan bar navigasi menu dengan kesan bayangan menggunakan CSS tulen memerlukan contoh kod khusus Dalam reka bentuk web, bar navigasi menu adalah elemen yang sangat biasa. Dengan menambahkan kesan bayangan pada bar navigasi menu, anda bukan sahaja boleh meningkatkan estetikanya, tetapi juga meningkatkan pengalaman pengguna. Dalam artikel ini, kami akan menggunakan CSS tulen untuk melaksanakan bar navigasi menu dengan kesan bayangan dan menyediakan contoh kod khusus untuk rujukan. Langkah-langkah pelaksanaan adalah seperti berikut: Cipta struktur HTML Pertama, kita perlu mencipta struktur HTML asas untuk menampung bar navigasi menu. oleh

Cara menggunakan PHP untuk membangunkan bar navigasi ringkas dan fungsi pengumpulan URL Cara menggunakan PHP untuk membangunkan bar navigasi ringkas dan fungsi pengumpulan URL Sep 20, 2023 pm 03:14 PM

Cara menggunakan PHP untuk membangunkan bar navigasi ringkas dan fungsi koleksi laman web Bar navigasi dan fungsi koleksi laman web adalah salah satu fungsi biasa dan praktikal dalam pembangunan web. Artikel ini akan memperkenalkan cara menggunakan bahasa PHP untuk membangunkan bar navigasi ringkas dan fungsi pengumpulan URL, dan menyediakan contoh kod khusus. Cipta antara muka bar navigasi Mula-mula, kita perlu mencipta antara muka bar navigasi. Bar navigasi biasanya mengandungi pautan untuk navigasi pantas ke halaman lain. Kita boleh menggunakan HTML dan CSS untuk mereka bentuk dan mengatur pautan ini. Berikut ialah antara muka bar navigasi yang mudah

Bar navigasi Discuz yang diperibadikan menjadikan forum lebih unik! Bar navigasi Discuz yang diperibadikan menjadikan forum lebih unik! Mar 11, 2024 pm 01:45 PM

Dalam forum Discuz, bar navigasi adalah salah satu bahagian yang sering digunakan oleh pengguna apabila melawati tapak web Oleh itu, menyesuaikan bar navigasi boleh menambah gaya yang unik dan diperibadikan pada forum dan meningkatkan pengalaman pengguna. Seterusnya, kami akan memperkenalkan cara memperibadikan bar navigasi dalam forum Discuz dan memberikan contoh kod khusus. Pertama, kita perlu log masuk ke sistem pengurusan belakang Discuz dan masukkan halaman "Antara Muka" -> "Tetapan Navigasi". Pada halaman ini, kami boleh melakukan pelbagai tetapan dan penyesuaian pada bar navigasi. Berikut adalah beberapa

Langkah untuk melaksanakan kesan menu tab lungsur pada bar navigasi responsif menggunakan CSS tulen Langkah untuk melaksanakan kesan menu tab lungsur pada bar navigasi responsif menggunakan CSS tulen Oct 28, 2023 am 09:58 AM

Langkah-langkah untuk melaksanakan kesan menu tab lungsur turun bar navigasi responsif menggunakan CSS tulen Bar navigasi ialah salah satu elemen biasa dalam halaman web dan menu tab lungsur turun ialah kesan yang sering digunakan dalam bar navigasi, yang. boleh menyediakan lebih banyak pilihan navigasi. Artikel ini akan memperkenalkan cara menggunakan CSS tulen untuk melaksanakan kesan menu tab lungsur turun bar navigasi responsif. Langkah 1: Bina struktur HTML asas Kita perlu membina struktur HTML asas untuk demonstrasi dan menambah beberapa gaya pada bar navigasi. Di bawah ialah struktur HTML yang mudah

Langkah untuk melaksanakan kesan terapung bar navigasi menu menggunakan CSS tulen Langkah untuk melaksanakan kesan terapung bar navigasi menu menggunakan CSS tulen Oct 19, 2023 am 10:13 AM

Langkah-langkah untuk melaksanakan kesan terapung bar navigasi menu menggunakan CSS tulen Dengan kemajuan berterusan reka bentuk web, permintaan pengguna untuk tapak web semakin tinggi. Untuk memberikan pengalaman pengguna yang lebih baik, kesan penggantungan telah digunakan secara meluas dalam reka bentuk tapak web. Artikel ini akan memperkenalkan cara menggunakan CSS tulen untuk mencapai kesan terapung bar navigasi menu untuk meningkatkan kebolehgunaan dan estetika tapak web. Cipta struktur menu asas Mula-mula, kita perlu mencipta struktur asas menu dalam dokumen HTML. Berikut ialah contoh mudah: <navclass=&q

Bagaimana untuk menggunakan JavaScript untuk mencapai kesan kecerunan warna latar belakang bar navigasi tetap di bahagian bawah halaman web? Bagaimana untuk menggunakan JavaScript untuk mencapai kesan kecerunan warna latar belakang bar navigasi tetap di bahagian bawah halaman web? Oct 20, 2023 pm 07:36 PM

Bagaimana untuk menggunakan JavaScript untuk mencapai kesan kecerunan warna latar belakang bar navigasi tetap di bahagian bawah halaman web? Dalam reka bentuk web moden, bar navigasi tetap telah menjadi kaedah susun atur biasa. Jika anda ingin menambah kesan kecerunan warna latar belakang pada bar navigasi tetap di bahagian bawah halaman web, JavaScript ialah pilihan yang sangat sesuai. Artikel ini akan memperkenalkan anda kepada cara menggunakan JavaScript untuk mencapai kesan ini dan memberikan contoh kod khusus. Langkah 1: Struktur HTML Mula-mula kita perlu mencipta HTML

Bagaimana untuk menggunakan Vue untuk mencapai kesan dinamik bar navigasi? Bagaimana untuk menggunakan Vue untuk mencapai kesan dinamik bar navigasi? Jun 25, 2023 pm 12:17 PM

Vue ialah rangka kerja JavaScript yang sangat popular yang boleh digunakan untuk membina aplikasi web dinamik. Dalam Vue, anda boleh dengan mudah menyedari kesan dinamik bar navigasi dan memberikan pengguna pengalaman interaksi antara muka yang lebih baik. Berikut ialah beberapa langkah asas untuk melaksanakan dinamik bar navigasi menggunakan Vue. Untuk mencipta contoh Vue, pertama, anda perlu memperkenalkan perpustakaan Vue ke dalam HTML, dan kemudian mencipta tika Vue. Anda boleh menggunakan kod berikut untuk membuat contoh Vue: var

See all articles