jQuery simplePage+AJAX plus分页插件用法实例

2019-11-20 10:34:50

字体：大中小

来源：转载

供稿：网友

本文实例讲述了jQuery simplePage+AJAX plus分页插件。分享给大家供大家参考，具体如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>simplePage</title><style type="text/css">html,body{ margin:0 auto; text-align:center; }.main{ font:12px/24px "Microsoft YaHei"; height:1000px; }#page{ margin:100px auto; width:960px; text-align:center; }#page a{ text-decoration:none; display:inline-block; height:24px; padding:0 8px; border-radius:3px; background-color:#DEF39E; color:#8CAC2C; text-align:center; margin:0 2px; }#page a:hover,#page .now{ background-color:#8CAC2C; color:#fff; transition:all .5s ease 0s; }</style></head><body><div class="main">  <div id="page">    <!--     <a href="#3">上一页</a>    <a href="#4">4</a>    <a href="#5">5</a>    <a href="#6" class="now">6</a>    <a href="#7">7</a>    <a href="#8">8</a>    <a href="#9">下一页</a>     -->  </div>  <div class="back"></div></div><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript">$(function(){  $.simplePage({    obj : "#page",    nowNum : 1,    allNum : 20,    callBack : function(now, all){      $(".back").html(now + "-" + all);    }  });});/*! * jQuery simple page plus v1.0 * http://t.qq.com/websole  * Author:sole * Mail:macore@163.com * Created:2012/10/31 * Copyright 2012 - http://t.qq.com/websole */$.extend({  //obj:分页对象; noeNum:当前页； allNum:总页数； callBack：回调函数  simplePage : function(opt){    if(!opt.obj){ return false; };    var obj = $(opt.obj);     var nowNum = opt.nowNum || 1;     var allNum = opt.allNum || 5;     var callBack = opt.callBack || function(){};    var apd_ele = "";    function ele(num, cls){      var str = "";      if(cls){        str = "<a href='#"+num+"' class='"+cls+"'>"+num+"</a>";      }else{        str = "<a href='#"+num+"'>"+num+"</a>";      }      return str;    }    if(nowNum > 1){      apd_ele = "<a href='#"+ ( nowNum - 1 ) +"'>上一页</a>";      obj.append(apd_ele);    }    if(allNum <= 5){      for(var i=1; i<=allNum; i++){        if(nowNum == i){          apd_ele = ele(i, "now");        }else{          apd_ele = ele(i);        }        obj.append(apd_ele);      }    }else{      for(var i=1; i<=5; i++){        if(nowNum == 1 || nowNum == 2){          if(nowNum == i){            apd_ele = ele(i, "now");          }else{            apd_ele = ele(i);          }        }else if( (allNum - nowNum) == 0 || (allNum - nowNum) == 1 ){          if( (allNum - nowNum) == 0 && i == 5){            apd_ele = ele( (allNum - 5 + i), "now");          }else if( (allNum - nowNum) == 1 && i == 4){            apd_ele = ele( (allNum - 5 + i), "now");          }else{            apd_ele = ele( allNum - 5 + i );          }        }else{          if(i == 3){            apd_ele = ele(nowNum-3+i, "now");          }else{            apd_ele = ele(nowNum-3+i);          }        }        obj.append(apd_ele);      }    }    if((allNum - nowNum) >= 1){      apd_ele = "<a href='#"+ ( nowNum + 1 ) +"'>下一页</a>";      obj.append(apd_ele);    }    callBack(nowNum, allNum);    obj.find("a").click(function(){      var nowNum = parseInt($(this).attr("href").substring(1));      obj.html("");      $.simplePage({        obj : "#page",        nowNum : nowNum,        allNum : allNum,        callBack :callBack      });      return false;    });  }});</script></body></html>

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》及《jquery常用操作技巧汇总》

希望本文所述对大家jQuery程序设计有所帮助。

上一篇：jQuery实现伪分页的方法分享

下一篇：DeviceOne 让你一见钟情的App快速开发平台