原生javascript实现分页效果
程序员文章站
2022-09-04 19:43:16
随着近几年前端行业的迅猛发展,各种层出不穷的新框架,新方法让我们有点眼花缭乱。
最近刚好比较清闲,所以没事准备撸撸前端的根基javascript,纯属练练手,写个分页,顺...
随着近几年前端行业的迅猛发展,各种层出不穷的新框架,新方法让我们有点眼花缭乱。
最近刚好比较清闲,所以没事准备撸撸前端的根基javascript,纯属练练手,写个分页,顺便跟大家分享一下
function pagefunc(conf){ this.myfunc = conf.click //用户点击要执行的方法 this.total = conf.total; //总页数 this.currentpage = 1; //当前页码 this.init() //初始化 } pagefunc.prototype.init = function(){ var total = this.total, currentpage = this.currentpage, _this = this; listeners = { 'setwhat' : function(opts) { _this.aclick(opts.src) return false; } }; listenerspre = { 'lmw-pre' : function(opts) { _this.prevclick() return false; } }; listenersadd = { 'lmw-add' : function(opts) { _this.addclick() return false; } }; var rootele = this.createpage(1,total); document.getelementbyid('page-coat').innerhtml = rootele $on(document.getelementbyid('page-coat'), ['click'], listeners);//点击a标签 $on(document.getelementbyid('page-coat'), ['click'], listenerspre);//点击上一页 $on(document.getelementbyid('page-coat'), ['click'], listenersadd);//点击下一页 } //创建html分页结构字符串 pagefunc.prototype.createpage = function(page,total){ var str = `<a class="lmw-current" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >${page}</a>` for(var i=1;i<=3;i++){ if(page-i>1){ str = `<a attr-action="setwhat" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >${page-i}</a>`+str } if(page+i<total){ str = str+`<a attr-action="setwhat" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >${(page+i)}</a>` } }; if(page-4>1){ str = '<span>...</span>'+str }; if(page+4<total){ str = str+'<span>...</span>' }; if(page>1){ str = `<a class="lmw-pre" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上一页</a><a attr-action="setwhat" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a>`+str }; if(page<total){ str = str+`<a attr-action="setwhat" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >${total}</a><a class="lmw-add" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一页</a>` }; return str } //上一页方法 pagefunc.prototype.prevclick = function(){ var total = this.total var va = --this.currentpage var newret = this.createpage(va, total) document.getelementbyid('page-coat').innerhtml = newret this.myfunc(va) } //下一页方法 pagefunc.prototype.addclick = function(){ var total = this.total var va = ++this.currentpage var newret = this.createpage(va, total) document.getelementbyid('page-coat').innerhtml = newret this.myfunc(va) }; //点击方法 pagefunc.prototype.aclick = function(_this){ var total = this.total var va = parseint(_this.innertext); this.currentpage = va var rootele = this.createpage(va, total) document.getelementbyid('page-coat').innerhtml = rootele this.myfunc(va) }; //二:封装事件代理方法 function $on(dom, event, listeners) { $addevent(dom, event, function(e) { var e = e || window.event, src = e.target || e.srcelement, action, returnval; while (src && src !== dom) { action = src.getattribute('attr-action') || src.getattribute('class') ; if (listeners[action]) { returnval = listeners[action]({ src : src, e : e, action : action }); if (returnval === false) { break; } } src = src.parentnode; } }); }; //1、封装跨浏览器事件绑定方法 function $addevent(obj, type, handle) { if(!obj || !type || !handle) { return; } if( obj instanceof array) { for(var i = 0, l = obj.length; i < l; i++) { $addevent(obj[i], type, handle); } return; } if( type instanceof array) { for(var i = 0, l = type.length; i < l; i++) { $addevent(obj, type[i], handle); } return; } //2、解决ie中this指向window的问题 function createdelegate(handle, context) { return function() { return handle.apply(context, arguments); }; } if(window.addeventlistener) { var wrapper = createdelegate(handle, obj); obj.addeventlistener(type, wrapper, false); } else if(window.attachevent) { var wrapper = createdelegate(handle, obj); obj.attachevent("on" + type, wrapper); } else { obj["on" + type] = handle; } };
使用方法:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>分页效果</title> <style type="text/css"> #page-coat a{ text-decoration:none; display: inline; float: left; padding: 3px 10px 3px 10px; overflow: hidden; border:1px solid #ccc; color:#999; margin-right: 5px; cursor: pointer; background: #fff; } #page-coat a:hover{ border: 1px solid #ff6600; background-color: #ff6600; color: #fff; } #page-coat span{ display: inline; float: left; color:#999; background: #fff; } #page-coat a.lmw-current{ color: #ff6600; border: 1px solid #ff6600; background-color: #ffeee5; } </style> </head> <body class="l-bg2"> <div id="page-coat"> </div> </body> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/public.js"></script> <script type="text/javascript"> var conf = { 'total':100, 'click':function(e){ //e为当前页码 /* $.get('/php',{"page":e},function(data){ console.log('ok') })*/ } } var page = new pagefunc(conf); </script> </html>
用原生还是比较麻烦的,为了实现业务,还得去封装一个模仿jq的.on事件绑定方法。写的比较简陋,一些配置接口没有暴露出来,还可以再抽象暴露。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。