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

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

May 16, 2016 pm 05:42 PM
导航栏

最近比较清闲,自己做了个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
喜欢请点一下推荐,你的支持是我最大的动力!
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Wie stelle ich die Navigationsleiste oben in Douyin ein? Weitere Optionen zur Anpassung der Navigationsleiste Wie stelle ich die Navigationsleiste oben in Douyin ein? Weitere Optionen zur Anpassung der Navigationsleiste Mar 07, 2024 pm 02:50 PM

Die Navigationsleiste der Douyin-Oberfläche befindet sich oben und ist ein wichtiger Kanal für Benutzer, um schnell auf verschiedene Funktionen und Inhalte zuzugreifen. Da Douyin weiterhin aktualisiert wird, möchten Benutzer möglicherweise die Navigationsleiste entsprechend ihren persönlichen Vorlieben und Bedürfnissen anpassen und anpassen. 1. Wie stelle ich die Navigationsleiste oben in Douyin ein? Normalerweise werden in der oberen Navigationsleiste von Douyin einige beliebte Kanäle angezeigt, sodass Benutzer schnell nach interessanten Inhalten suchen und diese anzeigen können. Wenn Sie die Einstellungen für Ihren Top-Kanal anpassen möchten, befolgen Sie einfach diese Schritte: Öffnen Sie die TikTok-App und melden Sie sich bei Ihrem Konto an. Die Navigationsleiste finden Sie über der Hauptoberfläche, normalerweise in der Mitte oder oben auf dem Bildschirm. Klicken Sie auf das „+“-Symbol oder eine ähnliche Schaltfläche über der Navigationsleiste, um die Kanalbearbeitungsoberfläche aufzurufen. In der Kanalbearbeitungsoberfläche können Sie die Standardliste beliebter Kanäle sehen. Du kannst passieren

Implementierungsschritte zur Implementierung der Menünavigationsleiste mit Schatteneffekt mithilfe von reinem CSS Implementierungsschritte zur Implementierung der Menünavigationsleiste mit Schatteneffekt mithilfe von reinem CSS Oct 16, 2023 am 08:27 AM

Die Schritte zum Implementieren einer Menünavigationsleiste mit Schatteneffekt mithilfe von reinem CSS erfordern spezifische Codebeispiele. Im Webdesign ist die Menünavigationsleiste ein sehr häufiges Element. Durch das Hinzufügen eines Schatteneffekts zur Menünavigationsleiste können Sie nicht nur deren Ästhetik verbessern, sondern auch das Benutzererlebnis verbessern. In diesem Artikel verwenden wir reines CSS, um eine Menünavigationsleiste mit Schatteneffekt zu implementieren, und stellen spezifische Codebeispiele als Referenz bereit. Die Implementierungsschritte sind wie folgt: HTML-Struktur erstellen Zuerst müssen wir eine grundlegende HTML-Struktur erstellen, um die Menünavigationsleiste aufzunehmen. von

Die personalisierte Discuz-Navigationsleiste macht das Forum einzigartiger! Die personalisierte Discuz-Navigationsleiste macht das Forum einzigartiger! Mar 11, 2024 pm 01:45 PM

Im Discuz-Forum ist die Navigationsleiste einer der Teile, mit denen Benutzer beim Besuch der Website häufig in Berührung kommen. Daher kann die Anpassung der Navigationsleiste dem Forum einen einzigartigen und personalisierten Stil verleihen und das Benutzererlebnis verbessern. Als Nächstes stellen wir die Personalisierung der Navigationsleiste im Discuz-Forum vor und stellen spezifische Codebeispiele bereit. Zuerst müssen wir uns beim Backend-Verwaltungssystem von Discuz anmelden und die Seite „Schnittstelle“ -> „Navigationseinstellungen“ aufrufen. Auf dieser Seite können wir verschiedene Einstellungen und Anpassungen an der Navigationsleiste vornehmen. Hier sind einige

Wie man mit PHP einfache Navigationsleisten- und URL-Erfassungsfunktionen entwickelt Wie man mit PHP einfache Navigationsleisten- und URL-Erfassungsfunktionen entwickelt Sep 20, 2023 pm 03:14 PM

So entwickeln Sie mit PHP eine einfache Navigationsleiste und Website-Sammlungsfunktion. Die Navigationsleiste und die Website-Sammlungsfunktion sind eine der häufigsten und praktischen Funktionen in der Webentwicklung. In diesem Artikel wird erläutert, wie Sie mithilfe der PHP-Sprache eine einfache Navigationsleiste und URL-Erfassungsfunktion entwickeln und spezifische Codebeispiele bereitstellen. Erstellen Sie eine Navigationsleistenoberfläche. Zuerst müssen wir eine Navigationsleistenoberfläche erstellen. Die Navigationsleiste enthält normalerweise Links zur schnellen Navigation zu anderen Seiten. Wir können HTML und CSS verwenden, um diese Links zu entwerfen und anzuordnen. Das Folgende ist eine einfache Navigationsleistenoberfläche

Schritte zum Implementieren des Dropdown-Tab-Menüeffekts einer responsiven Navigationsleiste mit reinem CSS Schritte zum Implementieren des Dropdown-Tab-Menüeffekts einer responsiven Navigationsleiste mit reinem CSS Oct 28, 2023 am 09:58 AM

Schritte zum Implementieren des Dropdown-Tab-Menüeffekts einer responsiven Navigationsleiste mithilfe von reinem CSS. Die Navigationsleiste ist eines der häufigsten Elemente in Webseiten, und das Dropdown-Tab-Menü ist ein Effekt, der häufig in der Navigationsleiste verwendet wird kann mehr Navigationsmöglichkeiten bieten. In diesem Artikel wird erläutert, wie Sie mithilfe von reinem CSS einen responsiven Dropdown-Menüeffekt für die Navigationsleiste implementieren. Schritt 1: Erstellen Sie eine grundlegende HTML-Struktur. Zuerst müssen wir eine grundlegende HTML-Struktur zur Demonstration erstellen und der Navigationsleiste einige Stile hinzufügen. Nachfolgend finden Sie eine einfache HTML-Struktur

Schritte zum Implementieren des schwebenden Effekts der Menünavigationsleiste mithilfe von reinem CSS Schritte zum Implementieren des schwebenden Effekts der Menünavigationsleiste mithilfe von reinem CSS Oct 19, 2023 am 10:13 AM

Schritte zur Implementierung des schwebenden Effekts der Menünavigationsleiste mithilfe von reinem CSS Mit der kontinuierlichen Weiterentwicklung des Webdesigns werden die Anforderungen der Benutzer an Websites immer höher. Um ein besseres Benutzererlebnis zu bieten, wird der Suspensionseffekt häufig im Website-Design eingesetzt. In diesem Artikel wird erläutert, wie Sie mithilfe von reinem CSS den schwebenden Effekt der Menünavigationsleiste erzielen und so die Benutzerfreundlichkeit und Ästhetik der Website verbessern. Erstellen Sie die grundlegende Menüstruktur. Zuerst müssen wir die grundlegende Struktur des Menüs im HTML-Dokument erstellen. Hier ist ein einfaches Beispiel: <navclass=&q

Wie kann ich mit JavaScript den Hintergrundfarbverlaufseffekt der festen Navigationsleiste unten auf der Webseite erzielen? Wie kann ich mit JavaScript den Hintergrundfarbverlaufseffekt der festen Navigationsleiste unten auf der Webseite erzielen? Oct 20, 2023 pm 07:36 PM

Wie kann ich mit JavaScript den Hintergrundfarbverlaufseffekt der festen Navigationsleiste unten auf der Webseite erzielen? Im modernen Webdesign sind feste Navigationsleisten zu einer gängigen Layoutmethode geworden. Wenn Sie der festen Navigationsleiste unten auf der Webseite einen Hintergrundfarbverlaufseffekt hinzufügen möchten, ist JavaScript eine sehr geeignete Wahl. In diesem Artikel erfahren Sie, wie Sie mit JavaScript diesen Effekt erzielen, und stellen spezifische Codebeispiele bereit. Schritt 1: HTML-Struktur Zuerst müssen wir den HTML-Code erstellen

Wie verwende ich Vue, um dynamische Effekte der Navigationsleiste zu erzielen? Wie verwende ich Vue, um dynamische Effekte der Navigationsleiste zu erzielen? Jun 25, 2023 pm 12:17 PM

Vue ist ein sehr beliebtes JavaScript-Framework, mit dem dynamische Webanwendungen erstellt werden können. In Vue können Sie den dynamischen Effekt der Navigationsleiste problemlos realisieren und Benutzern ein besseres Interaktionserlebnis mit der Benutzeroberfläche bieten. Hier sind einige grundlegende Schritte zum Implementieren der Navigationsleistendynamik mit Vue. Um eine Vue-Instanz zu erstellen, müssen Sie zunächst die Vue-Bibliothek in HTML einführen und dann eine Vue-Instanz erstellen. Sie können den folgenden Code verwenden, um eine Vue-Instanz zu erstellen: var

See all articles