CPage分页特效。。。

最新推荐文章于 2017-09-10 20:37:31 发布

muxrwc

最新推荐文章于 2017-09-10 20:37:31 发布

阅读量1.5k

点赞数

分类专栏： JavaScript 文章标签： function class constructor input button border

本文链接：https://blog.csdn.net/muxrwc/article/details/2028809

版权

JavaScript 专栏收录该内容

55 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBbuttonC "-//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 runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CPage</title>
<style type="text/css">
#CPage {
    background-color:#F4F4F4;
    text-align:center;
    margin:0px;
}

#CPage input {
    vertical-align:middle;
    height:20px;
    border:none;
    color:#FFFFFF;
    background-color:#000000;
    /*FF真是BT，那四点边框它从哪偷的，真是不明白*/
}

#CPage input.first, #CPage input.previousPage, #CPage input.previous, #CPage input.next, #CPage input.nextPage, #CPage input.last {
width:60px;
}

#CPage input.ordinary, #CPage input.current {
width:30px;
}

#CPage input.current {
    font-weight:bold;
    background-color:#FFFFFF;
    border:#000000 1px solid;
    color:#000000;
}
</style>
<script type="text/javascript">
(function (b) {
//兼容FF一些方法

    if (b) {

        window.__defineGetter__("event", function () {
        //兼容Event对象
            var o = arguments.callee;
            do {
                if (o.arguments[0] instanceof Event) return o.arguments[0];
            } while (o = o.caller);
            return null;
        });

        Event.prototype.__defineGetter__("srcElement", function () {
        //兼容Event.srcElement对象
            var n = this.target;
            while (n.nodeType != 1) n = n.parentNode;
            return n;
        });

        Window.prototype.attachEvent = HTMLElement.prototype.attachEvent = function (attribute, funcsrc, capture, DOMattribute) {
        //兼容attachEvent
            return this.addEventListener(DOMattribute || attribute.substr(2), funcsrc, capture || false);
        };

}

})(/Firefox/.test(window.navigator.userAgent));

Function.prototype.bind = function () {
    var func = this, args = Array.prototype.slice.call(arguments), object = args.shift();

    return function () {
        return func.apply(object, args.concat(Array.prototype.slice.call(arguments)));
    };
};

var $ = function () {
return document.getElementById(arguments[0]);
};

CPage.prototype = {

    constructor : CPage

    , empty : function () {}

    , load : function () {
    //加载信息
        var wc = this, body = wc.body = $(wc.body);

        body.attachEvent("onclick", wc.click.bind(wc));
        wc.create();
    }

    , initEvent : function (first, previousPage, previous, current, ordinary, next, nextPage, last) {
    //加载处理事件
        var e = this.event;

        if (first) e.first = first; //最前页
        if (previousPage) e.previousPage = previousPage; //前一页
        if (previous) e.previous = previous; //向前移动
        if (current) e.current = current; //当前页
        if (ordinary) e.ordinary = ordinary; //其它页
        if (next) e.next = next; //向后移动
        if (nextPage) e.nextPage = nextPage; //下一页
        if (last) e.last = last; //最后页
    }

    , create : function () {
    //生成数列表
        var wc = this, a = [], min = wc.page * wc.pagemax + 1, max = Math.min(min + wc.pagemax, wc.pagecount + 1), i;

        a[a.length] = '最前页" class="first"';
        a[a.length] = '前一页" class="previousPage"';
        a[a.length] = '向前翻" class="previous"';

        for (i = min ; i < max ; i ++) {
            a[a.length] = i + '" class="' + (i == wc.pagenum ? 'current"' : 'ordinary"');
        }

        a[a.length] = '向后翻" class="next"';
        a[a.length] = '下一页" class="nextPage"';
        a[a.length] = '最后页" class="last"';

        wc.body.innerHTML = '<input type="button" value="' + a.join(' //>/n<input type="button" value="') + ' //>';
    }

    , moveNext : function (n) {
    //向后翻页
        var wc = this;

        if (wc.page < Math.ceil(wc.pagecount / wc.pagemax) - 1) {
            wc.page = wc.page + 1;
            wc.create();
            return true;
        } else {
            return false;
        }
    }

    , movePrevious : function () {
    //向前翻页
        var wc = this;

        if (wc.page > 0) {
            wc.page = wc.page - 1;
            wc.create();
            return true;
        } else {
            return false;
        }
    }

    , movePage : function (n) {
    //移动到指定页
        var wc = this;

        n = parseInt(n, 10);

        if (isNaN(n) || n < 1 || n > wc.pagecount) return false;

        wc.pagenum = n;
        wc.page = Math.floor((wc.pagenum - 1) / wc.pagemax);
        wc.create();

        return true;
    }

    , click : function () {
    //当鼠标按下
        var wc = this, e = window.event, o = e.srcElement, b;

        if (o.nodeName != "INPUT") return;

        switch (o.className) {
            case "previousPage" :
                b = wc.movePage(wc.pagenum - 1);
                break;
            case "nextPage" :
                b = wc.movePage(wc.pagenum + 1);
                break;
            case "previous" :
                b = wc.movePrevious();
                break;
            case "next" :
                b = wc.moveNext();
                break;
            case "first" :
                b = wc.movePage(1);
                break;
            case "last" :
                b = wc.movePage(wc.pagecount);
                break;
            case "ordinary" :
                b = wc.movePage(o.value);
                break;
            default :
                b = false;
            //当前页
        }

        wc.event[o.className](wc.pagenum, b);
    }

};