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

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

图标可以自定义（16X16），菜单项完全是JSON类型定义的，方便修改。
界面：

使用方法：
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的地方添加如下代码：


代码如下:

<ul id="NodeTree-JSON">
</ul>

5、在页面中添加如下代码：


代码如下:

<script type="text/javascript">
$(function () {
NodeTree("mainFrame");
});
</script>或者是（二者任选其一）：
<script type="text/javascript">
window.onload=function (){
NodeTree("mainFrame");
}
</script>

NodeTree("mainFrame") 中，mainFrame是目标frame的name，比如说导航栏在左边的frame里，右边显示的frame的name=“mainFrame”。
实在不理解看看demo.htm的代码，就明白了。
附上源代码，感兴趣的可以看看～
http://dl.vmall.com/c0b7wda1ps
喜欢请点一下推荐，你的支持是我最大的动力！

赞 (0)

相关推荐

  • JS 实现导航栏悬停效果(续)

    JS 实现导航栏悬停效果(续)

    上次[JS-实现导航栏悬停]说到,导航栏悬停的那个页面在IE上运行的时候,会出导航栏不停的抖动问题. 解决方法如下: 将导航栏的定位方式由原来的absolute改为fixed,也不知道为什么改为fixed,就不抖了..-_-|| 复制代码 代码如下: div.navigation{ width: 800px; height: 40px; background: red; margin: 4px auto 0; top: 400px; left: 0px; position: fixed; } 为

  • JS 实现导航栏悬停效果

    JS-实现导航栏悬停 先布个局: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <met

  • 一步步教大家编写酷炫的导航栏js+css实现

    一步步教大家编写酷炫的导航栏js+css实现

    一步一步的学习制作导航栏,文章末尾再做个综合页面,分享给大家一个炫酷的导航栏供大家参考,具体内容如下 1.当前页面高亮显示的导航栏 首先是HTML代码,很简单,ul+li实现菜单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏一</title> </head> <body>

  • JS滚动到指定位置导航栏固定顶部

    最近整理一下之前做的一个项目,把滚动条动态固定顶部的代码整理出来和大家分享,上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js滚动到指定位置导航栏固定顶部</title> <style type="text/css"> body{height: 2500px; margin: 0; padding: 0

  • js导航栏单击事件背景变换示例代码

    如下所示; 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv=

  • JS 实现导航栏悬停效果(续2)

    [JS-实现导航栏悬停] [JS-实现导航栏悬停(续)] 用Jquery重新写完这个页面之后,发现原来的方法还有是有几个问题: 1.首先Js代码冗余,导航条上的Tab是用js实现跳转而不是超链接: 2.还有导航条本身用fixed定位,但没有被设置为水平居中,而是在JS中更改left值使其居中. 问题2就导致了,当浏览器窗口尺寸发生变化的时候,浏览器中的div的位置都发生了变化,也就导致了没法通过页面中的div动态的给已fixed定位的导航条来定位. 最终的代码更改如下: test.html 复制

  • javascript 禁用IE工具栏,导航栏等等实现代码

    处理问题时候遇到的,就顺便记录下, 复制代码 代码如下: function OnOpenWin() { if (window.name != "OAopenWindow") { win = window.open("login.aspx", "OAopenWindow", "toolbar=no, menubar=no, scrollbars=no, resizable=yes,location=no,status=no,width=&

  • Fullpage.js固定导航栏-实现定位导航栏

    Fullpage.js固定导航栏-实现定位导航栏

    FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和移动设备. 开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自动定位到这一页的标签 2.当然点击标签时,也是滚动到那一页而不是直接跳转的. 一.准备工

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

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

    最近比较清闲,自己做了个JavaScript NodeTree,网上类似的东西其实挺多的,功能也比这个全,我做这个纯粹为了练练手. 图标可以自定义(16X16),菜单项完全是JSON类型定义的,方便修改. 界面: 使用方法: 1.将NodeTree-JSON.js以及CSS文件夹复制到项目中并引用. 2.引用JQuery框架. 3.修改NodeTree-JSON.js中的NodeTreeMenu菜单项,以下是简单说明. 复制代码 代码如下: var NodeTreeMenu = [ //id:节

  • JavaScript满天星导航栏实现方法

    说明 分享一个满天星导航栏的效果,代码不多,但效果挺好看,先看看效果图吧. 解释 实现这个效果,需要掌握的知识不用很多,知道简单的CSS,会用JS 获取元素, 能绑定事件基本就足够了. 好的,我们直接来看代码,注释已经写的很详细了,不想看有注释的,点这里点击预览. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <style> b

  • javascript实现导航栏分页效果

    javascript实现导航栏分页效果

    本文实例为大家分享了js实现导航栏分页效果的具体代码,供大家参考,具体内容如下 1.结构搭建HTML代码 <div class="page"></div> 2.页面修饰的css样式代码 .page{ width:500px;margin:100px auto;color: #ccc; }.page a{ display: inline-block;color: #428bca;height: 25px; line-height: 25px;padding: 0

  • JavaScript实现鼠标点击导航栏变色特效

    废话不多说了,直接给大家贴js实现鼠标点击导航栏变色代码,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • HTML+JavaScript实现筋斗云导航栏效果

    HTML+JavaScript实现筋斗云导航栏效果

    功能要求: 1.鼠标经过某个li,筋斗云跟着到当前的位置 2.鼠标离开这个li,筋斗云回到原来的位置 3.鼠标点击了某个li,筋斗云就留在点击这个位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge&qu

  • 详解微信小程序胶囊按钮返回|首页自定义导航栏功能

    项目代码:https://github.com/Shay0921/header-navbar.git 在小程序中,从转发出来的小程序消息卡片进入,因为页面栈中只有一个,所以不会出现返回按钮,对于一些电商平台来说,当商品被转发后会很影响客户查看其它产品和首页,这时候就需要使用自定义导航栏自己写一个"胶囊按钮".如下图所示: 从别的页面点到商品页时会有返回和首页按钮: 当从分享页进入到商品页时,因为页面栈只有一个,所以只有首页按钮: 首先我们需要如何开启自定义导航栏,查看手册后会发现一个页

  • 如何用uni-app实现顶部导航栏显示按钮和搜索框

    如何用uni-app实现顶部导航栏显示按钮和搜索框

    最近公司准备做app,最终决定使用uni-app框架开发,但是当把设计图给我的时候我心里有点没底,因为他的设计图顶部长成这个样子: 因为这个功能在小程序是根本无法实现的,可能受这个影响,我感觉好像实现不了,但是我还是回头看了看文档,才发现,这个功能是可以实现的,只需要在pages.json中做一些配置即可 这个在官方称作app-plus,可以自定义导航区域,具体配置如下: "pages": [ { "path": "pages/index/index&qu

  • Javascript Bootstrap的网格系统,导航栏和轮播详解

    Javascript Bootstrap的网格系统,导航栏和轮播详解

    目录 bootstrap简介及其相关内容 网格系统 列嵌套 列偏移 列排序 导航栏 轮播 总结 bootstrap简介及其相关内容 Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.引用其时需要具备一定的基本模板: <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=&q

  • 基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项，一个下拉菜单和登录表单导航条)

    基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项，一个下拉菜单和登录表单导航条)

    效果图如下所示: 实现代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="

  • JavaScript实现精美个性导航栏筋斗云效果

    JavaScript实现精美个性导航栏筋斗云效果

    实现效果: 实现效果如下图所示 实现原理: 什么是筋斗云效果: •这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录. 实现思路: •鼠标经过的时候,利用offsetLeft获得当前盒子距离左侧的距离,把这个值赋给缓动动画的end值. •当点击的时候记住当前的offsetLeft值,当鼠标经过的时候把之前点击的offsetLeft给现在经过时候的值. 实现代码: 下面是实现代码以及详细注释,核心设置一个position为absolute的span标签,通过绑定鼠标事件

随机推荐