基于jquery编写分页插件

扩展JQuery很容易，作为一个练习，编写一个简单的分页插件，代码量不大，直接看代码好了：

$.fn.mypagination = function(totalProperty,opts){
  opts = $.extend({
    perPage:10, 

    callback:function(){
    }
  },opts||{}); 

  return this.each(function(){
    function numPages(){
      return Math.ceil(totalProperty/opts.perPage);
    } 

    function selectPage(page){
      return function(){
        currPage = page;
        if (page<0) currPage = 0;
        if (page>=numPages()) currPage = numPages()-1;
        render(); 

        $('img.page-wait',panel).attr('src','images/wait.gif');
        opts.callback(currPage+1);
        $('img.page-wait',panel).attr('src','images/nowait.gif');
      }
    } 

    function render(){ 

      var html = '<table><tbody><tr>'
        +'<td><a href="#"><img class="page-first"></a></td>'
        +'<td><a href="#"><img class="page-prev"></a></td>'
        +'<td><span>第<input type="text" class="page-num">页/共'+numPages()+'页</span></td>'
        +'<td><a href="#"><img class="page-next"></a></td>'
        +'<td><a href="#"><img class="page-last"></a></td>'
        +'<td><img src="images/nowait.gif" class="page-wait"></td>'
        +'<td><span style="padding-left:50px;">检索到'+totalProperty+'记录</span></td>'
        +'</tr></tbody></table>';
      var imgFirst = 'images/page-first-disabled.gif';
      var imgPrev = 'images/page-prev-disabled.gif';
      var imgNext = 'images/page-next-disabled.gif';
      var imgLast = 'images/page-last-disabled.gif';
      if (currPage > 0){
        imgFirst = 'images/page-first.gif';
        imgPrev = 'images/page-prev.gif';
      }
      if (currPage < numPages()-1){
        imgNext = 'images/page-next.gif';
        imgLast = 'images/page-last.gif';
      }
      panel.empty();
      panel.append(html);
      $('img.page-first',panel)
        .bind('click',selectPage(0))
        .attr('src',imgFirst);
      $('img.page-prev',panel)
        .bind('click',selectPage(currPage-1))
        .attr('src',imgPrev);
      $('img.page-next',panel)
        .bind('click',selectPage(currPage+1))
        .attr('src',imgNext);
      $('img.page-last',panel)
        .bind('click',selectPage(numPages()-1))
        .attr('src',imgLast);
      $('input.page-num',panel)
        .val(currPage+1)
        .change(function(){
          selectPage($(this).val()-1)();
        });
    } 

    var currPage = 0;
    var panel = $(this);
    render(); 

  });
}

下面测试一下：

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="mypagination.css"/>
  <script type="text/javascript" src="jquery-1.2.6.js"></script>
  <script type="text/javascript" src="jquery.mypagination.js"></script>
  <script>
    $(document).ready(function(){
      $('#mypage').mypagination(10112,{
        callback:function(page){
          alert(page);
        }
      });
    });
  </script>
</head>
<div id="mypage" class="mypagination"></div>

运行效果图如下：

以上就是本文的全部内容，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • 基于编写jQuery的无缝滚动插件

    基于编写jQuery的无缝滚动插件

    首先来看下html骨架,如下: <div class="box"> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </div> 结构简单明了,没什么说的. 讲下实现原理: div box是最外层盒子,给它指定的宽高,记得给box添加一个 overflow:hidden (超出的内容隐藏)样式,因为滚动肯定是会超出b

  • 基于jquery插件编写countdown计时器

    基于jquery插件编写countdown计时器

    废话不多说,直接上代码: 先展示一下插件调用方式:  1. 需要先加载countdown插件对应的css文件,也就几行代码而已,可以不用引入,自己手写一样啦 <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>jquery countdown倒计时插

  • jQuery插件编写步骤详解

    本文实例讲述了jQuery插件编写步骤.分享给大家供大家参考,具体如下: 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jquery的插件机制,jquery有着成千上万的第 三方插件,有时我们写好了一个独立的功能,也想将其与jquery结合起来,可以用jquery链式调用,这就要扩展jquery,写成插件形式了,如下 面就是一个简单扩展Jquery

  • 如何编写jquery插件

    前面的话 编写插件的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,提高开发效率和方便后期维护.本文将详细介绍如何编写jQuery插件 类型 jQuery的插件主要分为3种类型 1.封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件.此类插件可以发挥出jQuery选择器的强大优势,有相当一部分的jQuery的方法,都是在jQuery脚本库内部通过这种形式"插"在内核上的,例如:parent()方法.appe

  • 编写自己的jQuery插件简单实现代码

    编写自己的jQuery插件简单实现代码

    这里只阐述如何编写自己的插件,至于要实现什么功能,要因人而异了...好了,下面开始... jQuery插件主要分为三种 1.封装对象方法的插件 2.封装全局函数的插件 3.扩展选择器的插件 这里只编写前俩种,即比较常见的.. 大多数插件都是已这种形式编写的: 复制代码 代码如下: (function ($) { /* 这里放置代码 */ })(jQuery); 这样的好处是函数内部依然可以使用$作为jQuery的别名,而不影响到其他库使用$ jQuery提供了俩个扩展用于编写插件 $.fn.ex

  • jQuery弹簧插件编写基础之“又见弹窗”

    本文将通过一个实例来引出jQuery插件开发中的一些细节,首先介绍下jQuery插件开发的一些基础知识. jQuery的插件开发主要分为两类: 1. 类级别,即在jQuery类本身上扩展方法,类似与 $.ajax,$.get 等. 2. 对象级别,这里所谓的对象是指通过jQuery选择器选中的jQuery对象,在该对象上添加方法.例如:$('div').css(), $('div').show() 等. 在实际开发中,我们通常选用对象级别的方法来开发插件,jQuery强大的选择器及对象操作是我们

  • Jquery插件编写简明教程

    复制代码 代码如下: /* 1.jQuery插件文件名推荐命名为 jquery.[插件名].js 以免和其他javascript库插件混淆.例如命名为jquery.color.js 2.所有的对象方法名都应当附加到jQuery.fn对象上而所有的全局函数都应当附加到jQuery对象本身上. 3.在插件内部,this指向的是当前通过选择器获取的jquery对象,而不像一般方法哪样,例如chick()方法,内部的this指向的dom元素 4.可以通过this.each来遍历所有元素 5.所有的方法或

  • jQuery编写设置和获取颜色的插件

    jQuery编写设置和获取颜色的插件

    分享一下编写设置和获取颜色的插件,首先我将插件的名字命名为jquery.color.js. 该插件用来实现以下两个功能 设置元素的颜色. 获取元素的颜色. 先在搭建好如下编写插件的框架: ;(function($){ //这里编写插件代码 })(jQuery); 我这里采用jQuery.fn.extend().这种方法来编写,代码如下: ;(function($){ $.fn.extend({ "color":function(value){ //这里写插件代码 } }); })(jQ

  • 编写自己的jQuery提示框（Tip）插件

    编写自己的jQuery提示框（Tip）插件

    对jQuery相信很多同学和我一样平时都是拿来主义,没办法,要怪只能怪jQuery太火了,各种插件基本能满足平时的要求.但是这毕竟不是长久之道,古人云:"授之以鱼,不如授之以渔". 为了方便之前没有接触的同学,先来回顾一下jQuery的插件机制吧. 复制代码 代码如下: //添加check和uncheck插件 jQuery.fn.extend({   check: function() {     return this.each(function() { this.checked =

  • 编写简单的jQuery提示插件

    编写简单的jQuery提示插件

    很简单的代码,就不多废话了. 代码: 复制代码 代码如下: /** * 2014年11月13日 * 提示插件 */ (function ($) {     $.fn.tips = function (text) {         var divtipsstyle = "position: absolute; left: 0; top: 0; background-color: #dceaf2; padding: 3px; border: solid 1px #6dbde4; visibilit

  • 基于jquery编写的放大镜插件

    本文实例为大家分享了自己动手实现的jquery放大镜插件,供大家参考,具体内容如下 /** *********************************************** **此插件使用须知--------------- ** **滤镜(inner)与其活动区(active)之比要等于 ** **放大区(movequ)与其内部图片之比.如比值不相 ** **等,请改变图片大小.------------------------** **参数介绍 ** **active:滤镜活动区

随机推荐