js+json用表格实现简单网站左侧导航
作者:bea
调用很简单,只要将数据组织成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:/
调用很简单,只要将数据组织成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/"}]}
];
var nav=new tableNav("table1",data,tf);
var bautoClose=false; //打开当前导航条时其它导航条是否关闭
nav.generateNav(bautoClose);
}
整个实例代码如下:供初学者学习!
<!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>
<title>simple struct</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
#divtitle{
border:solid 1px #000000;
width:98%;
height:100px;
text-align:center;
}
#div1{
border:solid 1px #000000;
width:18%;
height:700px;
float:left;
}
#div2{
width:80%;
height:700px;
float:left;
}
<!--偶数行,0,2,4...-->
.oddrow{
margin-top:1px;
}
.oddrow td{
text-decoration:underline;
background-color:#666666;
color:#ccc;
cursor:pointer;
}
<!--奇数行-->
.evenrow{
display:none;
}
.evenrow a{
margin-left:10px;
margin-top:2px;
}
.evenrow td{
background-color:#eee;
display:block;
}
</style>
<script type="text/javascript">
window.onload = function()
{
var tf="if1";
var data=[{m:"",s:[{sn:"",st:"http://"},
{sn:"服务器常用软件",st:"http://s."},
{sn:"站长查询工具",st:"http://tools."}]},
{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);
}
function tableNav(tblid,data,ifname)
{
var tbl= document.getElementById(tblid);
//1.删除表格中存在的行
for (var t = 0; t < tbl.rows.length;t++){tbl.deleteRow(t);}
//2.添加数据
var idx=0;
for(var t=0;t<data.length;t++)
{
var row=tbl.insertRow(idx);
var cell=row.insertCell(0);
cell.innerHTML=data[t].m;
row.className="oddrow";
idx++;
var row=tbl.insertRow(idx);
row.className="evenrow";
var cell=row.insertCell(0);
for (var i=0;i<data[t].s.length;i++)
{
cell.innerHTML += "<a href='" +data[t].s[i].st+"' target='"+ ifname +"'>"+ data[t].s[i].sn +"</a><br>";
}
row.style.display="none";
idx++;
}
this.generateNav=function(bautoClose){
for (var i = 0; i < tbl.rows.length; i++)
if (i % 2==0)
{
var obj = tbl.rows[i].getElementsByTagName("td")[0];
obj.onclick = function()
{
var o = this.parentNode.nextSibling;
if (o.nodeType != 1)
{
o = o.nextSibling;
}
o.style.display = (o.style.display == "block") ? "none" : "block"
if (bautoClose)
{
for (var j = 1; j < tbl.rows.length; j =j+ 2)
{
if (tbl.rows[j] !=o)
{
tbl.rows[j].style.display = "none";
}
}
}
}
}
};
}
</script>
</head>
<body >
<div id="divtitle">
<h1>用表格实现简单网站左侧导航</h1>
</div>
<div id="div1">
<table id="table1">
</table>
</div>
<div id="div2">
<iframe id='if1' name='if1' src="" width="100%" height="100%" border="0″ marginwidth="0″ marginheight="0″ allowtransparency="yes"></iframe>
</div>
</body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
有用 | 无用
代码如下:
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/"}]}
];
var nav=new tableNav("table1",data,tf);
var bautoClose=false; //打开当前导航条时其它导航条是否关闭
nav.generateNav(bautoClose);
}
整个实例代码如下:供初学者学习!
<!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>
<title>simple struct</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
#divtitle{
border:solid 1px #000000;
width:98%;
height:100px;
text-align:center;
}
#div1{
border:solid 1px #000000;
width:18%;
height:700px;
float:left;
}
#div2{
width:80%;
height:700px;
float:left;
}
<!--偶数行,0,2,4...-->
.oddrow{
margin-top:1px;
}
.oddrow td{
text-decoration:underline;
background-color:#666666;
color:#ccc;
cursor:pointer;
}
<!--奇数行-->
.evenrow{
display:none;
}
.evenrow a{
margin-left:10px;
margin-top:2px;
}
.evenrow td{
background-color:#eee;
display:block;
}
</style>
<script type="text/javascript">
window.onload = function()
{
var tf="if1";
var data=[{m:"",s:[{sn:"",st:"http://"},
{sn:"服务器常用软件",st:"http://s."},
{sn:"站长查询工具",st:"http://tools."}]},
{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);
}
function tableNav(tblid,data,ifname)
{
var tbl= document.getElementById(tblid);
//1.删除表格中存在的行
for (var t = 0; t < tbl.rows.length;t++){tbl.deleteRow(t);}
//2.添加数据
var idx=0;
for(var t=0;t<data.length;t++)
{
var row=tbl.insertRow(idx);
var cell=row.insertCell(0);
cell.innerHTML=data[t].m;
row.className="oddrow";
idx++;
var row=tbl.insertRow(idx);
row.className="evenrow";
var cell=row.insertCell(0);
for (var i=0;i<data[t].s.length;i++)
{
cell.innerHTML += "<a href='" +data[t].s[i].st+"' target='"+ ifname +"'>"+ data[t].s[i].sn +"</a><br>";
}
row.style.display="none";
idx++;
}
this.generateNav=function(bautoClose){
for (var i = 0; i < tbl.rows.length; i++)
if (i % 2==0)
{
var obj = tbl.rows[i].getElementsByTagName("td")[0];
obj.onclick = function()
{
var o = this.parentNode.nextSibling;
if (o.nodeType != 1)
{
o = o.nextSibling;
}
o.style.display = (o.style.display == "block") ? "none" : "block"
if (bautoClose)
{
for (var j = 1; j < tbl.rows.length; j =j+ 2)
{
if (tbl.rows[j] !=o)
{
tbl.rows[j].style.display = "none";
}
}
}
}
}
};
}
</script>
</head>
<body >
<div id="divtitle">
<h1>用表格实现简单网站左侧导航</h1>
</div>
<div id="div1">
<table id="table1">
</table>
</div>
<div id="div2">
<iframe id='if1' name='if1' src="" width="100%" height="100%" border="0″ marginwidth="0″ marginheight="0″ allowtransparency="yes"></iframe>
</div>
</body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- jquery 学习笔记一
- ext jquery 简单比较
- jQuery asp.net 用json格式返回自定义对象
- FileUpload 控件 禁止手动输入或粘贴的实现代码
- js 小贴士一星期合集
- javascript 函数使用说明
- js下获取div中的数据的原理分析
- Exjs 入门篇
- javascript window.opener的用法分析
- JS的反射问题
- Extjs在exlipse中设置自动提示的方法
- javascript setTimeout()传递函数参数(包括传递对象参数)
- javascript在事件监听方面的兼容性小结
- javascript 程序库的比较(一)之DOM功能
- JS 文件大小判断的实现代码
- 查看QQ是否在线状态的网页代码
- 用jQuery简化Ajax开发实现方法
- 基于jquery的一个简单的脚本验证插件
- js获取单元格自定义属性值的代码(IE/Firefox)