基于客户端的分页导航(1)

丁小酷同学

丁小酷同学

2016-01-29 11:41

基于客户端的分页导航(1),基于客户端的分页导航(1)
  思路:用纯JS的方法,只能通过判断当前页面的文件名,然后算出上下页地址,首页和尾页需要在脚本中配置好,最后生成导航代码。用数据绑定的方法则要简单得多,设定dataPageSize,然后用 firstPage() 、previousPage() 、nextPage() 和 lastPage() 方法翻页。

  代码示例:

  1. 纯JS的,翻页导航的依据是文件名 page.js脚本文件代码

Number.prototype.add0 = function(){ //对数字类型的扩展,主要用于实现当数字小于一定位数时在前面补0,直到倍数达到为止
return (new Array(len).join("0")+this).slice(-len) //返回字符串,new Array(len).join("0")得到len个相连的"0",然后和数字相加,再从得到的字符串右边起向左截取len位
}
String.prototype.mlink = function(n){ //对字符类型的扩展,主要用于根据文件名中的数字生成链接
return this.link(prefix+n.add0()+suffix) //返回一个以字符串为链接文字,prefix+n.add0()+subffix为链接地址的HTML代码
}
var prefix = "page" //文件名前缀
var suffix = ".htm" //文件名后缀
var first = 1 //第一页的文件名中的数字
var last = 23 //最后一页的文件名中的数字
var len = 2 //文件名中的数字的位数,从以上四个变量中可知文件名为"page01.htm"和"page23.htm"这种形式
var cur_page = location.href.match(new RegExp(prefix+"(\d+)"+suffix,"i"))|0 //从当前页面地址中查找匹配的数字
var previous = cur_page-1 //的文件名中的数字为当前页的减1
var next = cur_page+1 //的文件名中的数字为当前页的加1
if(cur_page == first) previous = first //如果当前页为首页,则的链接为首页
if(cur_page == last) next = last //如果当前页为尾页,则的链接为尾页
navbar.innerHTML = ["首页".mlink(first),"".mlink(previous),"".mlink(next),"尾页".mlink(last)].join(" ") //在 id 为 navbar 的对象中生成导航链接


  然后在各页中用<div id="navbar"</div<script src="http://img.jcwcn.com/attachment/portal"</script调用
展开更多 50%)
分享

猜你喜欢

基于客户端的分页导航(1)

电脑网络
基于客户端的分页导航(1)

基于客户端的分页导航(2)

电脑网络
基于客户端的分页导航(2)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

基于客户端的分页导航(3)

电脑网络
基于客户端的分页导航(3)

客户端静态页面玩分页

Web开发
客户端静态页面玩分页

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

win客户端和linux客户端的区别

服务器
win客户端和linux客户端的区别

Zune 客户端

平面设计 标志设计 UI设计 VI设计
Zune 客户端

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

CSS入门教程:如何在网页中插入CSS样式表

CSS入门教程:如何在网页中插入CSS样式表

从业余到专业:03网页设计理论的对比准则

从业余到专业:03网页设计理论的对比准则
下拉加载更多内容 ↓