原生javascript實(shí)現(xiàn)分頁(yè)效果
隨著近幾年前端行業(yè)的迅猛發(fā)展,各種層出不窮的新框架,新方法讓我們有點(diǎn)眼花繚亂。
最近剛好比較清閑,所以沒(méi)事準(zhǔn)備擼擼前端的根基javascript,純屬練練手,寫(xiě)個(gè)分頁(yè),順便跟大家分享一下
function pageFunc(conf){ this.myFunc = conf.click //用戶點(diǎn)擊要執(zhí)行的方法 this.total = conf.total; //總頁(yè)數(shù) this.currentPage = 1; //當(dāng)前頁(yè)碼 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);//點(diǎn)擊a標(biāo)簽 $on(document.getElementById('page-coat'), ['click'], listenersPre);//點(diǎn)擊上一頁(yè) $on(document.getElementById('page-coat'), ['click'], listenersAdd);//點(diǎn)擊下一頁(yè) } //創(chuàng)建HTML分頁(yè)結(jié)構(gòu)字符串 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" >上一頁(yè)</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" >下一頁(yè)</a>` }; return str } //上一頁(yè)方法 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) } //下一頁(yè)方法 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) }; //點(diǎn)擊方法 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的問(wèn)題 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>分頁(yè)效果</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為當(dāng)前頁(yè)碼 /* $.get('/php',{"page":e},function(data){ console.log('ok') })*/ } } var page = new pageFunc(conf); </script> </html>
用原生還是比較麻煩的,為了實(shí)現(xiàn)業(yè)務(wù),還得去封裝一個(gè)模仿JQ的.on事件綁定方法。寫(xiě)的比較簡(jiǎn)陋,一些配置接口沒(méi)有暴露出來(lái),還可以再抽象暴露。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS中數(shù)組常用的循環(huán)遍歷你會(huì)幾種
JS 遍歷數(shù)組(循環(huán)數(shù)組)的方式有多種,但你都知道嗎?下面這篇文章主要給大家介紹了關(guān)于JS中數(shù)組常用循環(huán)遍歷的相關(guān)資料,需要的朋友可以參考下2021-06-06Autocomplete Textbox Example javascript實(shí)現(xiàn)自動(dòng)完成成功
Autocomplete Textbox Example javascript實(shí)現(xiàn)自動(dòng)完成成功...2007-08-08javascript中的注釋使用與注意事項(xiàng)小結(jié)
在javascript中有兩種注釋方式,單行注釋與多行注釋。2011-09-09JavaScript高級(jí)程序設(shè)計(jì) 閱讀筆記(七) ECMAScript中的語(yǔ)句
ECMAScript中的語(yǔ)句,學(xué)習(xí)js的朋友可以參考下2012-02-02