国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

帶省略的分頁

Thanatos / 1152人閱讀

這個(gè)ajax分頁是基本jquery來實(shí)現(xiàn)的，足以滿足正常需求。。。

效果：

HTML：

CSS：

.zh-page{height: 20px;padding: 20px 0;text-align: right;}
.zh-page ul{display: inline-block;height: 20px;}
.zh-page ul li{float: left;height: 20px;line-height: 20px;margin: 0 3px;color: #fff;font-size: 14px;}
.zh-page ul li a{display: block;height: 100%;min-width: 10px;border-radius: 10px;padding: 0 5px;color: #fff;}
.zh-page ul .zh-cur a{background-color: #4DDDF2;color: #1c1c1c;}
.zh-page .zh-icon-prev,
.zh-page .zh-icon-next{display: inline-block;width: 0;height: 0;border-style: solid;border-width: 4px 6px;border-color: transparent #858587 transparent transparent;}
.zh-page .zh-icon-next{border-color: transparent transparent transparent #858587;}

JS：

$.extend({
    // ajax分頁
    page: function(options) {
        var defaults = {
            "visiblePages": 6 // 可見頁碼(不能小于4)
        };
        var opts = $.extend({}, defaults, options);
        var curPage = opts.curPage;
        // 創(chuàng)建分頁列表
        function createPageList(curPage) {
            var li = "
    • ";
            if(opts.totalPages <= opts.visiblePages) { // 總頁數(shù)<=可見頁
                for(var i=1; i<=opts.totalPages; i++) {
                    if(curPage == i) {
                        li += "
  • "+i+"
    • ";
                    } else {
                        li += "
  • "+i+"
    • ";
                    }
                }
            } else { // 總頁數(shù)>可見頁
                if(curPage < opts.visiblePages-1) { // 當(dāng)前頁<可見頁-1
                    for(var i=1; i<=opts.visiblePages-1; i++) {
                        if(curPage == i) {
                            li += "
  • "+i+"
    • ";
                        } else {
                            li += "
  • "+i+"
    • ";
                        }
                    }
                    li += "
  • ...
    • ";
                    li += "
  • "+opts.totalPages+"
    • ";
                } else if(curPage >= opts.visiblePages-1) {  // 當(dāng)前頁>=可見頁-1
                    if(opts.totalPages-curPage <= opts.visiblePages-4) { // 能連到結(jié)束
                        li += "
  • 1
    • ";
                        li += "
  • ...
    • ";
                        for(var i=opts.totalPages-(opts.visiblePages-2); i<=opts.totalPages; i++) {
                            if(curPage == i) {
                                li += "
  • "+i+"
    • ";
                            } else {
                                li += "
  • "+i+"
    • ";
                            }
                        }
                    } else { // 不能連到結(jié)束
                        li += "
  • 1
    • ";
                        li += "
  • ...
    • ";
                        for(var i=curPage-(opts.visiblePages-4); i<=curPage+1; i++) {
                            if(curPage == i) {
                                li += "
  • "+i+"
    • ";
                            } else {
                                li += "
  • "+i+"
    • ";
                            }
                        }
                        li += "
  • ...
    • ";
                        li += "
  • "+opts.totalPages+"
    • ";
                    }
                }
            }
            li += "
    • ";
            li += "
  • 共"+opts.totalPages+"頁
    • ";
            $(opts.ele).html(li);
        }
        createPageList(curPage);
        // 點(diǎn)擊頁碼
        $(opts.ele).off("click");
        $(opts.ele).on("click", "li:not(.zh-prev, .zh-next, .zh-total, .zh-ellipsis)", function() {
            curPage = +$(this).text();
            $(this).addClass("zh-cur").siblings().removeClass("zh-cur");
            createPageList(curPage);
            if(opts.change && typeof opts.change === "function") {
                opts.change.call(null, curPage);
            }
        });
        // 點(diǎn)擊前一頁
        $(opts.ele).on("click", ".zh-prev", function() {
            curPage = +$(opts.ele).children(".zh-cur").text();
            curPage--;
            if(curPage < 1) return;
            createPageList(curPage);
            if(opts.change && typeof opts.change === "function") {
                opts.change.call(null, curPage);
            }
        });
        // 點(diǎn)擊后一頁
        $(opts.ele).on("click", ".zh-next", function() {
            curPage = +$(opts.ele).children(".zh-cur").text();
            curPage++;
            if(curPage > opts.totalPages) return;
            createPageList(curPage);
            if(opts.change && typeof opts.change === "function") {
                opts.change.call(null, curPage);
            }
        });
    }
});

    調(diào)用：

    $.page({
    ele: ".zh-page ul",
    curPage: 1, // 當(dāng)前頁
    visiblePages: 5, // 可見頁碼
    change: function(num) { // 回調(diào)
        // alert(num);
    },
    totalPages: 20 // 總頁數(shù)
});

    文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/83482.html

    相關(guān)文章

    • 徒手?jǐn)]UI之Paginator

      摘要：是一個(gè)組件庫目前擁有的組件語法編寫，無依賴原生模塊化，以上支持，請(qǐng)開啟靜態(tài)服務(wù)器預(yù)覽效果，靜態(tài)服務(wù)器傳送門采用變量配置樣式辛苦造輪子，歡迎來倉庫四月份找工作，求內(nèi)推，坐標(biāo)深圳寫在前面去年年底項(xiàng)目中嘗試著寫過一個(gè)分頁的組件，然后就有了寫的想法 QingUI是一個(gè)UI組件庫目前擁有的組件：DatePicker, TimePicker, Paginator, Tree, Cascader, ...

      liuhh 評(píng)論0 收藏0

    • jq easyui數(shù)據(jù)網(wǎng)絡(luò)的分頁過程

      摘要：在涉及到組件的分頁功能時(shí)，遇到了一點(diǎn)問題。由于數(shù)據(jù)較多，這邊不予展示。返回的數(shù)據(jù)必須是符合要求的數(shù)據(jù)，格式如下必須帶有屬性，屬性值為總共的數(shù)據(jù)條數(shù)，是這一頁的數(shù)據(jù)內(nèi)容，以數(shù)組對(duì)象的形式返回。 第一次寫技術(shù)方面的文章，有點(diǎn)忐忑，總怕自己講的不對(duì)誤導(dǎo)別人。但是萬事總有個(gè)開頭，有不足錯(cuò)誤之處，請(qǐng)各位讀者老爺指出。 言歸正傳，最近剛進(jìn)新公司，上頭要求我先熟悉熟悉easyui這個(gè)組件庫。在涉及到...

      Rainie 評(píng)論0 收藏0

    • jq easyui數(shù)據(jù)網(wǎng)絡(luò)的分頁過程

      摘要：在涉及到組件的分頁功能時(shí)，遇到了一點(diǎn)問題。由于數(shù)據(jù)較多，這邊不予展示。返回的數(shù)據(jù)必須是符合要求的數(shù)據(jù)，格式如下必須帶有屬性，屬性值為總共的數(shù)據(jù)條數(shù)，是這一頁的數(shù)據(jù)內(nèi)容，以數(shù)組對(duì)象的形式返回。 第一次寫技術(shù)方面的文章，有點(diǎn)忐忑，總怕自己講的不對(duì)誤導(dǎo)別人。但是萬事總有個(gè)開頭，有不足錯(cuò)誤之處，請(qǐng)各位讀者老爺指出。 言歸正傳，最近剛進(jìn)新公司，上頭要求我先熟悉熟悉easyui這個(gè)組件庫。在涉及到...

      array_huang 評(píng)論0 收藏0

    • 簡(jiǎn)單的分頁

      摘要：哦，我想起來了，我們忘記添加第一頁跟最后一頁了首先記錄傳入的頁碼數(shù)字判斷所傳頁碼之前添加的頁碼數(shù)判斷所傳頁碼之后添加的頁碼數(shù)判斷頁碼左邊是否添加上一頁下一頁咦，看上去好了。那我們來一個(gè)簡(jiǎn)單粗暴的吧 原文鏈接 編程，很重要的一個(gè)技能就是抽象能力，就是現(xiàn)實(shí)中的瑣事，我怎么用代碼來表示。 一、簡(jiǎn)單的分頁需求 當(dāng)前頁碼前后顯示3頁，然后需要顯示第一頁以及最后一頁 未顯示的頁碼用省略號(hào)...表...

      Flands 評(píng)論0 收藏0

    • Django 學(xué)習(xí)小組：博客開發(fā)實(shí)戰(zhàn)第三周教程——文章列表分頁和代碼語法高亮

      摘要：本教程內(nèi)容已過時(shí)，更新版教程請(qǐng)?jiān)L問博客開發(fā)入門教程。當(dāng)分頁較多時(shí)，總是顯示當(dāng)前頁及其前幾頁和后幾頁的頁碼教程中使用的是兩頁，其他頁碼用省略號(hào)代替。 本教程內(nèi)容已過時(shí)，更新版教程請(qǐng)?jiān)L問： django 博客開發(fā)入門教程。 摘要：前兩期教程我們實(shí)現(xiàn)了博客的 Model 部分，以及 Blog 的首頁視圖 IndexView，詳情頁面 DetailView，以及分類頁面 CategoryVi...

      Luosunce 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    Thanatos

    男|高級(jí)講師

    TA的文章

    閱讀更多
    最新活動(dòng)
    閱讀需要支付1元查看
    <