成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

自制jq分頁插件

Little_XM / 2656人閱讀

摘要：由于第一次寫插件，中間有借鑒別人的代碼。添加選中藍(lán)色背景上一頁下一頁點(diǎn)擊的頁數(shù)下一頁上一頁用法總頁數(shù)當(dāng)前選中頁回調(diào)函數(shù)

由于第一次寫jq插件，中間有借鑒別人的代碼。

 (function(){
    var ms = {

        fillHtml: function(obj, option) {
            obj.empty();
            var totalPage = option.pageCount,
                pageHtml = "",
                dotHtml = "
  • ...
    • ",
                tempHtml = "";

            if (option.currentPage > 5) {
                tempHtml = "
  • 1
  • 2
  • ...
    • ";

                for(var i = option.currentPage - 2 ; i <= (option.currentPage + 2 > totalPage ? totalPage : option.currentPage + 2); i++) {
                    var temp = "
  • " +i+ "
    • ";
                    if (option.currentPage === i ) {
                        temp = "
  • "+ i +"
    • ";
                    }

                    if (option.currentPage >= totalPage - 2) {
                        dotHtml = "";
                    }
                    pageHtml += temp;
                };

            }else {

                for(var i = 1; i <= ( 6 > totalPage ? totalPage : 6); i++) {
                    var temp = "
  • " +i+ "
    • ";
                    if (option.currentPage === i ) {                //添加選中藍(lán)色背景
                        temp = "
  • "+ i +"
    • ";
                    };

                    if (option.currentPage >= totalPage - 2) {
                        dotHtml = "";
                    }
                    pageHtml += temp;
                };
            }
            
            pageHtml = "";
            
            obj.append(pageHtml);
        },

        bindEvent: function(obj, option) {

            $(obj).on("click",".page-num",function(){
                if ($(this).parent("li") && $(this).parent("li").hasClass("current-page")) {
                    return;
                }
                var current = Number( $(this).text() );                //點(diǎn)擊的頁數(shù)
                ms.fillHtml(obj, {"currentPage": current, "pageCount": option.pageCount});
                option.backFunction();
            });

            $(obj).on("click",".next-page",function(){
                var current = Number( $(".current-page a").text() );                //下一頁
                if (current === option.pageCount){
                    return;
                }
                ms.fillHtml(obj, {"currentPage": current + 1, "pageCount": option.pageCount});
                option.backFunction();
            });

            $(obj).on("click",".prev-page",function(){
                var current = Number( $(".current-page a").text() );                //上一頁
                if (current === 1){
                    return;
                }
                ms.fillHtml(obj, {"currentPage": current-1, "pageCount": option.pageCount});
                option.backFunction();
            });
        },
        
        init: function(obj, option){

            return (function(){
                ms.fillHtml(obj, option);
                ms.bindEvent(obj, option);
            })();
        }
    };


    $.fn.creatPage = function(option) {

        var initOption = {
                pageCount: 10,
                currentPage: 1,
                backFunction: function(){}
        };
        option.pageCount = Number(option.pageCount);
        option.currentPage = Number(option.currentPage);
        
        var option = $.extend(initOption, option);
        
        ms.init(this, option);
    }
})()

    HTML

    用法

    $("#pageCont").creatPage({
        pageCount: 18,            //總頁數(shù)
        currentPage: 1,            //當(dāng)前選中頁
        backFunction: function(){    //回調(diào)函數(shù)
            
        }
    });

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

    轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111710.html

    相關(guān)文章

    • 自制jq分頁插件

      摘要：由于第一次寫插件，中間有借鑒別人的代碼。添加選中藍(lán)色背景上一頁下一頁點(diǎn)擊的頁數(shù)下一頁上一頁用法總頁數(shù)當(dāng)前選中頁回調(diào)函數(shù) 由于第一次寫jq插件，中間有借鑒別人的代碼。 (function(){ var ms = { fillHtml: function(obj, option) { obj.empty(); v...

      or0fun 評論0 收藏0

    • 前端常用插件、工具類庫匯總（上）

      摘要：函數(shù)庫動(dòng)畫庫動(dòng)畫庫，也是目前最通用的動(dòng)畫庫。下拉框級聯(lián)選擇器移動(dòng)端最好用的的篩選器組件聯(lián)動(dòng)篩選移動(dòng)端最好用的的篩選器組件聯(lián)動(dòng)篩選顏色選擇器時(shí)間選擇器時(shí)間日期處理是一個(gè)解析，驗(yàn)證，操作和顯示日期和時(shí)間的類庫。 showImg(https://segmentfault.com/img/bVbjpHt?w=900&h=383); 前言 在開發(fā)中，我們經(jīng)常會(huì)將一些常用的代碼塊、功能塊進(jìn)行封裝，...

      txgcwm 評論0 收藏0

    • 前端常用插件、工具類庫匯總（下）

      摘要：上一篇前端常用插件工具類庫匯總上內(nèi)容摘要?jiǎng)赢嫀鞚L動(dòng)庫輪播圖滾屏彈出框消息通知下拉框級聯(lián)選擇器顏色選擇器時(shí)間日期處理表單驗(yàn)證分頁插件本篇延續(xù)上一篇的內(nèi)容繼續(xù)給大家?guī)硪幌盗嘘P(guān)于前端插件工具類的內(nèi)容。 showImg(https://segmentfault.com/img/bVbjsMh?w=900&h=383); 前言 對本文感興趣可以先加個(gè)收藏，也可以轉(zhuǎn)發(fā)分享給身邊的小伙伴，以后遇到...

      ideaa 評論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ù)組對象的形式返回。 第一次寫技術(shù)方面的文章，有點(diǎn)忐忑，總怕自己講的不對誤導(dǎo)別人。但是萬事總有個(gè)開頭，有不足錯(cuò)誤之處，請各位讀者老爺指出。 言歸正傳，最近剛進(jìn)新公司，上頭要求我先熟悉熟悉easyui這個(gè)組件庫。在涉及到...

      Rainie 評論0 收藏0

    發(fā)表評論

    0條評論

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