Codebeispiel mit nativem Javascript zur Erzielung eines Paging-Effekts

In diesem Artikel wird hauptsächlich das native Javascript vorgestellt, um den Paging-Effekt im Detail zu erzielen. Interessierte Freunde können darauf verweisen

Mit In den letzten Jahren hat sich die Front-End-Branche rasant entwickelt, verschiedene neue Frameworks sind nacheinander entstanden und neue Methoden haben uns ein wenig verblüfft.

Ich habe in letzter Zeit einfach viel Freizeit, also bin ich bereit, das grundlegende Javascript im Frontend zu lernen. Ich werde übrigens nur eine Seite schreiben und sie mit Ihnen teilen .

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 = &#39;<span>...</span>&#39;+str
 };
 if(page+4<total){
 str = str+&#39;<span>...</span>&#39;
 };
 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(&#39;page-coat&#39;).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(&#39;page-coat&#39;).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(&#39;page-coat&#39;).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(&#39;attr-action&#39;) || src.getAttribute(&#39;class&#39;) ;
 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;
 }
};

So verwenden Sie:

<!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">
 <p id="page-coat">
 
 </p> 
</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 = {
 &#39;total&#39;:100,
 &#39;click&#39;:function(e){ //e为当前页码
/* $.get(&#39;/php&#39;,{"page":e},function(data){
  console.log(&#39;ok&#39;)
 })*/
 }
}
var page = new pageFunc(conf);
</script>
</html>

Es ist immer noch mühsam, nativ zu verwenden. Um das Geschäft zu realisieren, müssen Sie eine .on-Ereignisbindungsmethode kapseln, die es imitiert JQ. Das Schreiben ist relativ einfach und einige Konfigurationen Schnittstellen werden nicht offengelegt und können abstrakt offengelegt werden.

Das obige ist der detaillierte Inhalt vonCodebeispiel mit nativem Javascript zur Erzielung eines Paging-Effekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!