使用方法
1、将NodeTree-JSON.js以及CSS文件夹复制到项目中并引用。
2、引用JQuery框架。
3、修改NodeTree-JSON.js中的NodeT">
Maison interface Web js tutoriel 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
喜欢请点一下推荐,你的支持是我最大的动力!
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment ajuster la barre de navigation en haut de Douyin ? Autres options de réglage de la barre de navigation Comment ajuster la barre de navigation en haut de Douyin ? Autres options de réglage de la barre de navigation Mar 07, 2024 pm 02:50 PM

La barre de navigation de l'interface Douyin est située en haut et constitue un canal important permettant aux utilisateurs d'accéder rapidement aux différentes fonctions et contenus. À mesure que Douyin continue de se mettre à jour, les utilisateurs souhaiteront peut-être pouvoir personnaliser et ajuster la barre de navigation en fonction de leurs préférences et besoins personnels. 1. Comment ajuster la barre de navigation en haut de Douyin ? Habituellement, la barre de navigation supérieure de Douyin affiche certaines chaînes populaires, permettant aux utilisateurs de parcourir et d'afficher rapidement le contenu qui les intéresse. Si vous souhaitez ajuster les paramètres de votre chaîne principale, suivez simplement ces étapes : Ouvrez l'application TikTok et connectez-vous à votre compte. Recherchez la barre de navigation au-dessus de l'interface principale, généralement au milieu ou en haut de l'écran. Cliquez sur le symbole « + » ou un bouton similaire au-dessus de la barre de navigation pour accéder à l'interface d'édition de chaîne. Dans l'interface d'édition des chaînes, vous pouvez voir la liste par défaut des chaînes populaires. Tu peux passer

Étapes de mise en œuvre de la mise en œuvre d'une barre de navigation dans les menus avec effet d'ombre en utilisant du CSS pur Étapes de mise en œuvre de la mise en œuvre d'une barre de navigation dans les menus avec effet d'ombre en utilisant du CSS pur Oct 16, 2023 am 08:27 AM

Les étapes pour implémenter une barre de navigation dans les menus avec effet d'ombre en utilisant du CSS pur nécessitent des exemples de code spécifiques. Dans la conception Web, la barre de navigation dans les menus est un élément très courant. En ajoutant un effet d'ombre à la barre de navigation du menu, vous pouvez non seulement augmenter son esthétique, mais également améliorer l'expérience utilisateur. Dans cet article, nous utiliserons du CSS pur pour implémenter une barre de navigation de menu avec un effet d'ombre et fournirons des exemples de code spécifiques pour référence. Les étapes d'implémentation sont les suivantes : Créer une structure HTML Tout d'abord, nous devons créer une structure HTML de base pour accueillir la barre de navigation des menus. par

Comment utiliser PHP pour développer des fonctions simples de barre de navigation et de collecte d'URL Comment utiliser PHP pour développer des fonctions simples de barre de navigation et de collecte d'URL Sep 20, 2023 pm 03:14 PM

Comment utiliser PHP pour développer une barre de navigation simple et une fonction de collection de sites Web. La barre de navigation et la fonction de collection de sites Web sont l'une des fonctions courantes et pratiques du développement Web. Cet article expliquera comment utiliser le langage PHP pour développer une barre de navigation simple et une fonction de collecte d'URL, et fournira des exemples de code spécifiques. Créer une interface de barre de navigation Tout d'abord, nous devons créer une interface de barre de navigation. La barre de navigation contient généralement des liens permettant une navigation rapide vers d'autres pages. Nous pouvons utiliser HTML et CSS pour concevoir et organiser ces liens. Ce qui suit est une interface de barre de navigation simple

La barre de navigation Discuz personnalisée rend le forum plus unique ! La barre de navigation Discuz personnalisée rend le forum plus unique ! Mar 11, 2024 pm 01:45 PM

Dans le forum Discuz, la barre de navigation est l'une des parties avec lesquelles les utilisateurs entrent souvent en contact lorsqu'ils visitent le site Web. Par conséquent, la personnalisation de la barre de navigation peut ajouter un style unique et personnalisé au forum et améliorer l'expérience utilisateur. Ensuite, nous présenterons comment personnaliser la barre de navigation dans le forum Discuz et fournirons des exemples de code spécifiques. Tout d'abord, nous devons nous connecter au système de gestion backend de Discuz et accéder à la page « Interface » -> « Paramètres de navigation ». Sur cette page, nous pouvons effectuer divers réglages et personnalisations sur la barre de navigation. Voilà quelque

Étapes pour implémenter l'effet de menu à onglets déroulants d'une barre de navigation réactive utilisant du CSS pur Étapes pour implémenter l'effet de menu à onglets déroulants d'une barre de navigation réactive utilisant du CSS pur Oct 28, 2023 am 09:58 AM

Étapes pour implémenter l'effet de menu à onglets déroulants d'une barre de navigation réactive utilisant du CSS pur La barre de navigation est l'un des éléments courants dans les pages Web, et le menu à onglets déroulants est un effet souvent utilisé dans la barre de navigation, qui. peut fournir plus d’options de navigation. Cet article explique comment utiliser du CSS pur pour implémenter un effet de menu à onglets déroulants dans la barre de navigation réactive. Étape 1 : Créer une structure HTML de base. Nous devons d'abord créer une structure HTML de base pour la démonstration et ajouter quelques styles à la barre de navigation. Vous trouverez ci-dessous une structure HTML simple

Étapes pour implémenter l'effet flottant de la barre de navigation de menu en utilisant du CSS pur Étapes pour implémenter l'effet flottant de la barre de navigation de menu en utilisant du CSS pur Oct 19, 2023 am 10:13 AM

Étapes pour implémenter l'effet flottant de la barre de navigation de menu en utilisant du CSS pur Avec l'avancement continu de la conception Web, les demandes des utilisateurs en matière de sites Web sont de plus en plus élevées. Afin d’offrir une meilleure expérience utilisateur, l’effet suspension a été largement utilisé dans la conception de sites Web. Cet article expliquera comment utiliser du CSS pur pour obtenir l'effet flottant de la barre de navigation des menus afin d'améliorer la convivialité et l'esthétique du site Web. Créer la structure de base du menu Tout d'abord, nous devons créer la structure de base du menu dans le document HTML. Voici un exemple simple : <navclass=&q

Comment utiliser JavaScript pour obtenir l'effet dégradé de couleur d'arrière-plan de la barre de navigation fixe en bas de la page Web ? Comment utiliser JavaScript pour obtenir l'effet dégradé de couleur d'arrière-plan de la barre de navigation fixe en bas de la page Web ? Oct 20, 2023 pm 07:36 PM

Comment utiliser JavaScript pour obtenir l'effet dégradé de couleur d'arrière-plan de la barre de navigation fixe en bas de la page Web ? Dans la conception Web moderne, les barres de navigation fixes sont devenues une méthode de mise en page courante. Si vous souhaitez ajouter un effet dégradé de couleur d'arrière-plan à la barre de navigation fixe en bas de la page Web, JavaScript est un choix très approprié. Cet article vous expliquera comment utiliser JavaScript pour obtenir cet effet et fournira des exemples de code spécifiques. Étape 1 : Structure HTML Nous devons d’abord créer le HTML

Comment utiliser Vue pour obtenir des effets dynamiques de la barre de navigation ? Comment utiliser Vue pour obtenir des effets dynamiques de la barre de navigation ? Jun 25, 2023 pm 12:17 PM

Vue est un framework JavaScript très populaire qui peut être utilisé pour créer des applications Web dynamiques. Dans Vue, vous pouvez facilement réaliser l'effet dynamique de la barre de navigation et offrir aux utilisateurs une meilleure expérience d'interaction avec l'interface. Voici quelques étapes de base pour implémenter la dynamique de la barre de navigation à l'aide de Vue. Pour créer une instance Vue, vous devez d'abord introduire la bibliothèque Vue dans HTML, puis créer une instance Vue. Vous pouvez utiliser le code suivant pour créer une instance Vue : var

See all articles