JS 手机端滑动分页插件 SPager 最新版

来源：互联网发布：网络教育的英文编辑：程序博客网时间：2024/06/13 03:03

/* SPager 调用说明 *///第一步 建立 SPager对象 var spager = new SPager(4); 参数为 每页 item 个数 PageSize//第二步 必须重写 SPager 的 ReturnParentElement 方法 ，返回 item 的父元素//第三步 必须重写 SPager 的 ReturnGifUrl 方法 ，返回 加载动画gif图片路径//第四步 必须重写 SPager 的 CreateChilds 方法 ，返回 item 数组, 参数为 PageIndex，PageSize//第五步 调用 SPager 的 Start 方法(function () {    window.SPager = function (PageSize) {        this.ParentElement = null ;        this.PageSize = PageSize;        this.PageIndex = 1;        this.loadgif = null;        this.img_loading_flag = false;        this.items = [];        this.ReturnParentElement = function () { };        this.ReturnGifUrl = function () { };        this.CreateChilds = function () { };    };    SPager.prototype = {        Start: function () {            this.loadimg();            this.ParentElement = this.ReturnParentElement();            this.AddEvent();        },        loadimg: function () {            var _this = this;            this.loadgif = new Image();            this.loadgif.onload = function(){                _this.img_loading_flag = true;            };            this.loadgif.src = this.ReturnGifUrl();        },        AppendAllChild: function () {            this.PageIndex++;            this.items = this.CreateChilds(this.PageIndex, this.PageSize);            if (this.items.length==0) {                return;            }            for (var i = 0; i < this.items.length; i++) {                this.ParentElement.appendChild(this.items[i]);            }        },        AddEvent: function () {            var _this = this;            var fun = function () {                if (document.body.scrollTop == document.body.scrollHeight - window.innerHeight) {                    document.removeEventListener("touchmove", fun, false);                    _this.AddLoading();                    _this.AppendAllChild();                    _this.RemoveLoading();                    document.addEventListener("touchmove", fun, false);                }               };            document.addEventListener("touchmove", fun, false);        },        AddLoading: function () {            var loading = document.createElement("div");            loading.setAttribute("id", "loading");            loading.setAttribute("style", "text-align:center;background:white;");            while(!this.img_loading_flag){                //陷入死循环 等待gif图片加载完成            }            loading.appendChild(this.loadgif);            this.ParentElement.appendChild(loading);        },        RemoveLoading: function () {            var loading = document.getElementById("loading");            this.ParentElement.removeChild(loading);        },    };}());

调用DEMO

document.addEventListener("DOMContentLoaded", function () {    var spager = new SPager(4);    spager.ReturnParentElement = function () {        return document.body.children[2].children[0];    };    spager.ReturnGifUrl = function () {        return "/images/cxc_img/loading.gif";    };    spager.CreateChilds = function (PageIndex,PageSize) {        var _ZhaoPinHui = function () {            this.id = null;            this.zhaopinhui_name = null;            this.zhaopinhui_logo_url = null;            this.school_name = null;            this.addr = null;            this.endtime = null;            this.see_count = null;        };        var cline="";        var callback = function (data) {            cline = data;        };        AJAX("/MobileUser/Cuixianchao/AjaxZhaoPinHui", "post", "PageIndex=" + PageIndex + "&PageSize=" + PageSize, callback, false);        if (cline == "") {            return [];        }        var list_ZhaoPinHui = CLine2List(_ZhaoPinHui, cline);        //====================================开始构造 items         var items = [];        for (var i = 0; i < list_ZhaoPinHui.length; i++) {            var li = document.createElement("li");            var h1 = document.createElement("h1");            h1.className = "index2H1";            var a = document.createElement("a");            a.href = "#";            a.innerHTML = list_ZhaoPinHui[i].zhaopinhui_name;            h1.appendChild(a);            var div = document.createElement("div");            var div1 = document.createElement("div");            var div2 = document.createElement("div");            var div3 = document.createElement("div");            div.className = "index2C0";            div1.className = "index2Pic";            div2.className = "index2C";            div3.className = "clear";            var img = document.createElement("img");            img.src = list_ZhaoPinHui[i].zhaopinhui_logo_url;            div1.appendChild(img);            var a2 = document.createElement("a");            a2.href = "#";            var div21 = document.createElement("div");            var div22 = document.createElement("div");            div21.className = "index2C2";            div22.className = "index2C2 index2C2Time";            div21.innerHTML = "<span class=\"index2C2Span\">点击报名</span>举办地：" + list_ZhaoPinHui[i].addr;            div22.innerHTML = "<span>" + list_ZhaoPinHui[i].see_count + "次浏览</span>截止日期：" + list_ZhaoPinHui[i].endtime;            a2.appendChild(div21);            a2.appendChild(div22);            div2.appendChild(a2);            div.appendChild(div1);            div.appendChild(div2);            div.appendChild(div3);            li.appendChild(h1);            li.appendChild(div);            items.push(li);        }        //====================================构造 items 结束        return items;    };    spager.Start();}, false);

后台方法

public void AjaxZhaoPinHui()        {            string s = "";            ZhaoPinHui_ViewModel xxx = new ZhaoPinHui_ViewModel            {                lz = new List<_ZhaoPinHui>                {                    new _ZhaoPinHui                    {                        id=1,                        zhaopinhui_name = "山西电子职业技术学院2016年就业顶岗实习",                        zhaopinhui_logo_url="/images/pic1.jpg",                        school_name="",                        addr="太原市",                        endtime="2016/5/26",                        see_count="2022"                    },                    new _ZhaoPinHui                    {                        id=1,                        zhaopinhui_name = "山西电子职业技术学院2016年就业顶岗实习",                        zhaopinhui_logo_url="/images/pic1.jpg",                        school_name="",                        addr="太原市",                        endtime="2016/5/26",                        see_count="2022"                    },                    new _ZhaoPinHui                    {                        id=1,                        zhaopinhui_name = "山西电子职业技术学院2016年就业顶岗实习",                        zhaopinhui_logo_url="/images/pic1.jpg",                        school_name="",                        addr="太原市",                        endtime="2016/5/26",                        see_count="2022"                    },                    new _ZhaoPinHui                    {                        id=1,                        zhaopinhui_name = "山西电子职业技术学院2016年就业顶岗实习",                        zhaopinhui_logo_url="/images/pic1.jpg",                        school_name="",                        addr="太原市",                        endtime="2016/5/26",                        see_count="2022"                    },                    new _ZhaoPinHui                    {                        id=5,                        zhaopinhui_name = "山西电子职业技",                        zhaopinhui_logo_url="/images/pic1.jpg",                        school_name="",                        addr="太原市",                        endtime="2016/5/26",                        see_count="2022"                    },                    new _ZhaoPinHui                    {                        id=6,                        zhaopinhui_name = "山西电子职业技",                        zhaopinhui_logo_url="/images/pic1.jpg",                        school_name="",                        addr="太原市",                        endtime="2016/5/26",                        see_count="2022"                    },                    new _ZhaoPinHui                    {                        id=7,                        zhaopinhui_name = "山西电子职业技",                        zhaopinhui_logo_url="/images/pic1.jpg",                        school_name="",                        addr="太原市",                        endtime="2016/5/26",                        see_count="2022"                    },                    new _ZhaoPinHui                    {                        id=8,                        zhaopinhui_name = "山西电子职业技",                        zhaopinhui_logo_url="/images/pic1.jpg",                        school_name="",                        addr="太原市",                        endtime="2016/5/26",                        see_count="2022"                    },                    new _ZhaoPinHui                    {                        id=9,                        zhaopinhui_name = "山西电子职业技术学院2016",                        zhaopinhui_logo_url="/images/pic1.jpg",                        school_name="",                        addr="太原市",                        endtime="2016/5/26",                        see_count="2022"                    },                    new _ZhaoPinHui                    {                        id=10,                        zhaopinhui_name = "山西电子职业技术学院2016",                        zhaopinhui_logo_url="/images/pic1.jpg",                        school_name="",                        addr="太原市",                        endtime="2016/5/26",                        see_count="2022"                    },                    new _ZhaoPinHui                    {                        id=11,                        zhaopinhui_name = "山西电子职业技术学院2016",                        zhaopinhui_logo_url="/images/pic1.jpg",                        school_name="",                        addr="太原市",                        endtime="2016/5/26",                        see_count="2022"                    },                    new _ZhaoPinHui                    {                        id=12,                        zhaopinhui_name = "山西电子职业技术学院2016",                        zhaopinhui_logo_url="/images/pic1.jpg",                        school_name="",                        addr="太原市",                        endtime="2016/5/26",                        see_count="2022"                    },                }            };            int PageIndex = int.Parse(Request["PageIndex"]);            int PageSize = int.Parse(Request["PageSize"]);            List<_ZhaoPinHui> l = new List<_ZhaoPinHui>();            int temp = PageSize * (PageIndex - 1);            for (int i = temp; i < xxx.lz.Count && i < temp + 4; i++)            {                l.Add(xxx.lz[i]);            }            if (l.Count>0)            {                s = CLine.List2CLine(l);            }            Response.Clear();            Response.Write(s);            Response.End();        }

0 0