简单的分页代码射流研究…实现

先看看效果图：

简单的分页射流研究…代码：1、效果描述：不用分页即可显示的框架插件框架分页插件——jQuery.page.js用法很简单，效果很棒2、调用方法：

$('.'tcdPageCode ').createPage({ pageCount:10，current:1，backFn:function(p){ //单击回调方法，p是当前页码} });页数：总页数当前：当前页3、js封装代码

//分页插件/* * ch * */(function($){ var ms={ init : function(obj，args){ return(function(){ ms . FillHTML(obj，args))；ms.bindEvent(obj，args)；})();}, //填充html fillHtml:function(obj，args){ return(function(){ obj。empty()；//上一页if(args。当前1){ obj。追加(' a href=' JavaScript :class=' prevPage '上一页/a ')；}else{ obj.remove(' .前置页’)；物体。追加(' span class=' disabled ')上一页/span’)；} //中间页码if(args.current！=1个args.current=4个args.pageCount！=4){ obj。追加(' a href=' JavaScript :class=' tcdn number ' 1 '/a ')；} if(args。当前-2 2个参数。当前=参数。页数参数。页数5){ obj。追加(' span./span’)；} var start=args.current -2，end=args。电流2；if ((开始1个参数。当前4)| |参数。当前==1){ end；} if(args。当前参数。页数-4个参数。当前=参数。页数){ start-；} for(；开始=结束；start){ if(start=args。页数start=1){ if(start！=args。当前){ obj。追加(' a href=' JavaScript :class=' tcdn number ' ' start '/a ')；} else { obj。追加(' span class=' current ' ' start '/span ')；} } } if(args。当前2个参数。页数-1个参数。电流=1个参数。页数5){ obj。追加(' span./span’)；} if(args.current！=args。页数参数。当前参数。页数-2个参数。页数！=4){ obj。追加(' a href=' JavaScript :class=' tcdnnumber '参数。页数'/a ')；} //下一页if(args。当前参数。页数){ obj。追加(' a href=' JavaScript :class='nextPage '下一页/a ')；}else{ obj.remove(' .下一页’)；物体。追加(' span class=' disabled ')下一页/span’)；} })();}, //绑定事件bindEvent:function(obj，args){ return(function(){ obj。on(' click '，' a.tcdNumber '，function(){ var current=parsent($(this)).text())；ms.fillHtml(obj，{'current':current，' PageCount ' : args。page count })；if ((args的类型。back fn)=' function '){ args。背面fn(当前);} });//上一页obj.on('click '，' a.prevPage '，function(){ var current=ParSeint(obj。儿童(' span。当前').text())；ms.fillHtml(obj，{'current':current-1，' PageCount ' :个参数。page count })；if ((args的类型。back fn)=' function '){ args。反向fn(电流-1)；} });//下一页obj.on('click '，' a.nextPage '，function(){ var current=ParSeint(obj。儿童(' span。当前').text())；ms.fillHtml(obj，{'current':current 1，' PageCount ' :个参数。page count })；if ((args的类型。back fn)=' function '){ args。背面fn(当前1);} });})();} } $ .fn。create page=function(options){ var args=$ .extend({ pageCount : 10，current : 1，backFn : function(){} }，options)；ms.init(this，args)；} })(jQuery)；4、使用demo:

！DOCTYPE html html lang=' zh-cn ' xmlns=' http://www。w3。org/1999/XHTML ' head meta charset=' utf-8 '/title一个非常简单的框架分页插件/title style * { margin 33600；划水：0;列表式：无；} a { text-decoration : none} a :悬停{ text-decoration : none} .tcdPageCode { padding: 15px 20px文本-左对齐：color: # ccc}。tcdPageCode a { display:内联块；color : # 428 bcadidisplay :内联块；高度： 25px线高： 25pxpadding: 0 10pxborder: 1px固体# dddmargin : 0 2px border-radius : 4px；垂直对齐： 中间；} .tcdPageCode a :悬停{ text-decoration : noneborder: 1px固体# 428bca}。tcdPageCode跨度。当前{显示器： }内联块；高度： 25px线高： 25pxpadd : 0 10pxmargin : 0 2pxcolor : # fff背景色： # 428 BCA；border: 1px固体# 428 bcaborder-radius : 4px；垂直对齐： 中间；} .tcdPageCode跨度。禁用{显示器： }内联块；高度： 25px线高： 25pxpadd : 0 10pxmargin 3360 0 2pxcolor : # bfbfbf背景# f2f2f2border: 1px固体# bfbfbfborder-radius : 4px；垂直对齐： 中间；}/风格/头身风格百度_广告{ width:960px高度：90 px位置：绝对；左侧：50%;底部：0;边距-左侧：-480像素；飞越：隐藏；}/style div class=' Baidu _ ads '/div span style=' display : none；'/span！-代码部分begin-div class=' tcdPageCode '/div pre调用方法： $('.'tcdPageCode ').createPage({ pageCount:10，current:1，backFn:function(p){ //单击回调方法，p是当前页码} });页数：总页数当前：当前页/pre/body script src=' http://www .JB 51。net/ajaxjs/jquery。量滴js '/script script src=' http://www。JB 51。net/ajaxjs/jquery。佩奇。js '/script script $().tcdPageCode ').createPage({ pageCount:6，current:1，back fn :函数(p){ console。log(p)；} });/脚本！-代码部分end - /html以上就是本文的全部内容，希望对大家学习爪哇岛描述语言有所帮助。