闲暇之余,制作一用表格实现的简单的网站导航条,分享给大家。这里的数据基于json格式,学习json的朋友可以参考下。

调用很简单,只要将数据组织成json格式即可:格式如下: 
window.onload = function() 

var tf="if1"; 
var data=[{m:"体育网站",s:[{sn:"百度体育",st:"http://news.baidu.com/n?cmd=1&class=sportnews"}, 
{sn:"搜狐体育",st:"http://sports.sohu.com/"}, 
{sn:"新浪体育",st:"http://sports.sina.com.cn/"}]}, 
{m:"新闻网站",s:[{sn:"百度",st:"http://news.baidu.com/"}, 
{sn:"搜狐",st:"http://news.sohu.com/"}, 
{sn:"新浪",st:"http://news.sina.com.cn/"}]}, 
{m:"视频网站",s:[{sn:"百度视频",st:"http://vedio.baidu.com/"}, 
{sn:"搜狐视频",st:"http://tv.sohu.com/"}, 
{sn:"新浪视频",st:"http://vedio.sina.com.cn/"}]} 
{sn:"脚本学堂",st:"http://www.jbxue.com/"}]} 
]; 
var nav=new tableNav("table1",data,tf); 
var bautoClose=false; //打开当前导航条时其它导航条是否关闭 
nav.generateNav(bautoClose); 

js+json用表格实现简单网站左侧导航的更多相关文章

  1. js : json和 cookie 的简单操作

    使用 cookie,可以记录用户的最近的浏览历史 <!DOCTYPE HTML> <html lang="zh-cn"> <head> < ...

  2. Table Dragger - 简单的 JS 拖放排序表格插件

    Table Dragger 是一个极简的实现拖放排序的表格插件,纯 JavaScript 库,不依赖 jQuery.用于构建操作方便的拖放排序功能,超级容易设置,有平滑的动画,支持触摸事件. 在线演示 ...

  3. js循环读取json数据,将读取到的数据用js写成表格

    ①js循环读取json数据的方式: var data=[{"uid":"2688","uname":"*江苏省南菁高级中学 022 ...

  4. JS组件系列——表格组件神器:bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  5. [转]JS组件系列——表格组件神器:bootstrap table

    原文地址:https://www.cnblogs.com/landeanfen/p/4976838.html 前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉 ...

  6. JS组件系列——表格组件神器:bootstrap table 包含了js对象的定义和对象成员函数的定义

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  7. JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)

    前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

  8. JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  9. 用node.js从零开始去写一个简单的爬虫

    如果你不会Python语言,正好又是一个node.js小白,看完这篇文章之后,一定会觉得受益匪浅,感受到自己又新get到了一门技能,如何用node.js从零开始去写一个简单的爬虫,十分钟时间就能搞定, ...

随机推荐

  1. 多个桌面Deskspace如何使用

    1 给Deskspace设置背景.在DeskSpace选项中设置显示背景为天空箱体图像(软件自带的图像效果,也可以使用静态图像,即自己的图片) 2 给六个桌面各设置一个背景(也可以使用同一个背景)右击 ...

  2. IT创业失败案例解析 - 第一篇

    创业启示录:创业失败报告这个系列包括30多家创业公司的失败案例分析.本文就有由其中一家IT创业公司的CTO所撰写.还是那句老话,成功的故事固然非常鼓舞人心,但我们也可以从失败故事中学到很多. 以下是译 ...

  3. Linux内核二层数据包接收流程

    本文主要讲解了Linux内核二层数据包接收流程,使用的内核的版本是2.6.32.27 为了方便理解,本文采用整体流程图加伪代码的方式从内核高层面上梳理了二层数据包接收的流程,希望可以对大家有所帮助.阅 ...

  4. 常见的前端UI框架

    Bootstrap 首先说 Bootstrap,估计你也猜到会先说或者一定会有这个( 呵呵了 ),这是说明它的强大之处,拥有框架一壁江山的势气.自己刚入道的时候本着代码任何一个字母都得自己敲出来挡我者 ...

  5. 安装 Flex2packagebeta_1.994

    下载文件 解压到/var/root/Media/Cydia/AutoInstall/这个路径重启手机,Cydia会自动安装好DEB文件的 patch路径 下载 /private/var/mobile/ ...

  6. eclipse中java项目转成Web项目

    1.找到项目目录下的.project文件 2.编辑.project文件,找到<natures>...</natures> 3.2中找到的结点中加下面的的代码 <natur ...

  7. ebay分布式事务方案中文版

    http://cailin.iteye.com/blog/2268428 不使用分布式事务实现目的  -- ibm https://www.ibm.com/developerworks/cn/clou ...

  8. 工具-VIM配置

    设置缩进的空格数 shiftwidth=4 设置制表符宽度 tabstop=4 高亮显示当前行 cursorline 高亮显示当前列 cursorcolumn

  9. 戴尔大力宣传Ubuntu 对比与Windows的差异

    2010-06-18 10:58:36   11175 人阅读   作者:萧萧 编辑:萧萧[爆料]  评论(46)   戴尔近日上线了一个新的网页,对比Linux开源系统(主要是Ubuntu)与Win ...

  10. hduoj----(1033)Edge

    Edge                         Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K ( ...