网站导航网页是纯html的,不用数据库,不用jsp,这时候,我们可以将网站的链接信息放到js数组中,需要的时候可以来获取,当然,这可能会影响到小小的性能,当网站链接库数据量非常大是而浏览器使用IE是极有可能面临崩溃的问题...
下面是我的实现思路,,,请慎重用于实际项目中...
more.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>显示更多网站</title>
<script type="text/javascript" src="more.js"></script>
<style type="text/css">
a{ text-decoration:none; color:orange;}
a:hover{ text-decoration:underline; color:red;}
</style>
</head>
<body>
<table align="center">
<tbody id="show"></tbody>
</table>
</body>
<script type="text/javascript">
onload=init;
function init(){
show(1,"show");//show是table的id,如要换成ul显示修改more.js中的show方法则可
}
</script>
</html>
more.js
var more=[];
/*
type: 网站类型
level:优先等级!等级越高,网站排列越靠前 例如:if(level==1)等级是最高的
name:网站的名称
loc:网站地址
logo:网站的logo(这个是个扩展内容)
*/
function add(type,level,name,loc,logo){
var json={"type":type,"level":level,"name":name,"loc":loc,"logo":logo};
more.push(json);
}
//这个方法专门用来管理链接库....我们可以当做是一个js数据库吧...类似xml
function initialization(){
add(1,2,"百度","www.baidu.com");
add(1,3,"谷歌","www.google.com");
add(1,4,"雅虎搜索","www.yahoo.com.cn");
add(1,2,"xxxx","www.taobao.com");
add(1,1,"淘宝","www.taobao.com");
add(2,1,"中国中央电视台","www.cctv.com");
}
function getLocationByType(type){
initialization();
var temp=[];
for(var i=0;i<more.length;i++){
if(more[i].type==type){
temp.push(more[i]);
}
}
return sort(temp);
}
function sort(array){
var temp="";
var setp=array.length-1;
for(var i=0;i<setp;i++){
for(var j=0;j<setp-i;j++){
if(array[j].level>array[j+1].level){
temp=array[j];
array[j]=array[j+1];
array[j+1]=temp;
}
}
}
return array;
}
//这个方法是显示链接库的方式...可以随意改动的
function show(type,objId){
var array=getLocationByType(type);
var show=document.getElementById(objId);
var max=0;
var rowCount=5;//在table中一行显示5条数据
for(var i=1;i<=Math.ceil(array.length/rowCount);i++){
var tr=document.createElement("tr");
for(var j=1;j<=rowCount;j++){
var td=document.createElement("td");
td.width="100px";
td.align="center";
if(max<array.length){
var a=document.createElement("a");
a.href="http://"+array[max].loc;
a.innerHTML=array[max].name;
max++;
td.appendChild(a);
}
tr.appendChild(td);
}
show.appendChild(tr);
}
}
大家可以下载附件查看效果....
分享到:
相关推荐
使用该标记库,利用 Google 为你的网站提供网站查询,并且可以直接在你的网页里面显示搜查的结果。 github-java-api github-java-api 是 Github 网站 API 的 Java 语言版本。 java缓存工具 SimpleCache ...
使用该标记库,利用 Google 为你的网站提供网站查询,并且可以直接在你的网页里面显示搜查的结果。 github-java-api github-java-api 是 Github 网站 API 的 Java 语言版本。 java缓存工具 SimpleCache ...
使用该标记库,利用 Google 为你的网站提供网站查询,并且可以直接在你的网页里面显示搜查的结果。 github-java-api github-java-api 是 Github 网站 API 的 Java 语言版本。 java缓存工具 SimpleCache ...
SharpRewriter:javascript + xml技术利用#实现url重定向 采用XHTML和CSS设计可重用可换肤的WEB站点 asp.net的网址重定向方法的比较:面向搜索引擎友好 也谈 ASP.NET 1.1 中 QueryString 的安全获取写法 ASP.NET运行...
31.编辑器里面的图片库,文件库可以从我们附件表里面选择 32.对于禁用的会员,希望后台可以增加解除禁用功能 33.公司简介区块更多链接放在标题右侧 34.文章列表显示的条目数可自己设置。 35.站点增加类型设置,可以...
Java实现HTTP连接与浏览,Java源码下载,输入html文件地址或网址,显示页面和HTML源文件,一步步的实现过程请下载本实例的Java源码,代码中包括丰富的注释,对学习有帮助。 Java实现的FTP连接与数据浏览程序 1个...
Java实现HTTP连接与浏览,Java源码下载,输入html文件地址或网址,显示页面和HTML源文件,一步步的实现过程请下载本实例的Java源码,代码中包括丰富的注释,对学习有帮助。 Java实现的FTP连接与数据浏览程序 1个...
(2)针对跨域数据交互问题,指出并分析了跨域缓存交互问题出现的原因,通过在HTML5存储技术的基础上,重写LocalStorage,用移动端本地的Sqlite进行数据维护,实现跨域数据交互。 (3)针对页面自适应问题,本文结合...
使用该标记库,利用 Google 为你的网站提供网站查询,并且可以直接在你的网页里面显示搜查的结果。 github-java-api github-java-api 是 Github 网站 API 的 Java 语言版本。 java缓存工具 SimpleCache ...
使用该标记库,利用 Google 为你的网站提供网站查询,并且可以直接在你的网页里面显示搜查的结果。 github-java-api github-java-api 是 Github 网站 API 的 Java 语言版本。 java缓存工具 SimpleCache ...
使用该标记库,利用 Google 为你的网站提供网站查询,并且可以直接在你的网页里面显示搜查的结果。 github-java-api github-java-api 是 Github 网站 API 的 Java 语言版本。 java缓存工具 SimpleCache ...
使用该标记库,利用 Google 为你的网站提供网站查询,并且可以直接在你的网页里面显示搜查的结果。 github-java-api github-java-api 是 Github 网站 API 的 Java 语言版本。 java缓存工具 SimpleCache ...
使用该标记库,利用 Google 为你的网站提供网站查询,并且可以直接在你的网页里面显示搜查的结果。 github-java-api github-java-api 是 Github 网站 API 的 Java 语言版本。 java缓存工具 SimpleCache ...
使用该标记库,利用 Google 为你的网站提供网站查询,并且可以直接在你的网页里面显示搜查的结果。 github-java-api github-java-api 是 Github 网站 API 的 Java 语言版本。 java缓存工具 SimpleCache ...
使用该标记库,利用 Google 为你的网站提供网站查询,并且可以直接在你的网页里面显示搜查的结果。 github-java-api github-java-api 是 Github 网站 API 的 Java 语言版本。 java缓存工具 SimpleCache ...
使用该标记库,利用 Google 为你的网站提供网站查询,并且可以直接在你的网页里面显示搜查的结果。 github-java-api github-java-api 是 Github 网站 API 的 Java 语言版本。 java缓存工具 SimpleCache ...
使用该标记库,利用 Google 为你的网站提供网站查询,并且可以直接在你的网页里面显示搜查的结果。 github-java-api github-java-api 是 Github 网站 API 的 Java 语言版本。 java缓存工具 SimpleCache ...
使用该标记库,利用 Google 为你的网站提供网站查询,并且可以直接在你的网页里面显示搜查的结果。 github-java-api github-java-api 是 Github 网站 API 的 Java 语言版本。 java缓存工具 SimpleCache ...