js+json用表格实现简单网站左侧导航
闲暇之余,制作一用表格实现的简单的网站导航条,分享给大家。这里的数据基于json格式,学习json的朋友可以参考下。
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/"}]}
];
var nav=new tableNav("table1",data,tf);
var bautoClose=false; //打开当前导航条时其它导航条是否关闭
nav.generateNav(bautoClose);
}
js+json用表格实现简单网站左侧导航的更多相关文章
- js : json和 cookie 的简单操作
使用 cookie,可以记录用户的最近的浏览历史 <!DOCTYPE HTML> <html lang="zh-cn"> <head> < ...
- Table Dragger - 简单的 JS 拖放排序表格插件
Table Dragger 是一个极简的实现拖放排序的表格插件,纯 JavaScript 库,不依赖 jQuery.用于构建操作方便的拖放排序功能,超级容易设置,有平滑的动画,支持触摸事件. 在线演示 ...
- js循环读取json数据,将读取到的数据用js写成表格
①js循环读取json数据的方式: var data=[{"uid":"2688","uname":"*江苏省南菁高级中学 022 ...
- JS组件系列——表格组件神器:bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
- [转]JS组件系列——表格组件神器:bootstrap table
原文地址:https://www.cnblogs.com/landeanfen/p/4976838.html 前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉 ...
- JS组件系列——表格组件神器:bootstrap table 包含了js对象的定义和对象成员函数的定义
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
- JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)
前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
- JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
- 用node.js从零开始去写一个简单的爬虫
如果你不会Python语言,正好又是一个node.js小白,看完这篇文章之后,一定会觉得受益匪浅,感受到自己又新get到了一门技能,如何用node.js从零开始去写一个简单的爬虫,十分钟时间就能搞定, ...
随机推荐
- Missing styles. Is the correct theme chosen for this layout? Use the Theme combo box above the layou
android无法静态显示ui效果. Missing styles. Is the correct theme chosen for this layout? Use the Theme combo ...
- C#.NET常见问题(FAQ)-如何生成release版本的程序,生成debug版本的程序
除了右击项目在生成中配置改成Release还要在顶部切换成Release 更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http://i.youku.com/acetaohai1 ...
- UITextView自适应高度
- (float) heightForTextView: (UITextView *)textView WithText: (NSString *) strText{ float fPadding = ...
- 移动H5前端性能优化指南[转]
移动H5前端性能优化指南 米随随2015.01.23 移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首 ...
- HDOJ 4686 Arc of Dream 矩阵高速幂
矩阵高速幂: 依据关系够建矩阵 , 高速幂解决. Arc of Dream Time Limit: 2000/2000 MS (Java/Others) Memory Limit: 65535/ ...
- 深入理解Object提供的阻塞和唤醒API
深入理解Object提供的阻塞和唤醒API 前提 前段时间花了大量时间去研读JUC中同步器AbstractQueuedSynchronizer的源码实现,再结合很久之前看过的一篇关于Object提供的 ...
- 在Ubuntu Server是配置iptables防火墙
iptables 是一个安装在Ubuntu Server上的默认防火墙.在正常的ubuntu安装过程中,iptables是被安装上了的,但是它默认允许所有的流量(不管防火墙是否是无效的) 关于ipta ...
- Oracle-client支持exp|imp|rman
官方精简版的驱动,不支持持exp/imp/rman,故需要安装oracle_client客户端. 实验环境: Centos6.5 x64 Oracle 11.2.0.4.0 Oracle_clie ...
- Javakeyword之this
this的作用: 1) this是当前对象的一个引用.便于对当前对象參数的使用. 2)能够返回对象的自己这个类的引用.同一时候还能够在一个构造函数其中调用还有一个构造函数 this演示样例: publ ...
- maven 亲测可用国内镜像 阿里云(20170123)
来源于:http://www.jianshu.com/p/4d5bb95b56c5 http://blog.csdn.net/qq_27093465/article/details/52982484 ...