×

分享“分页”插件的前端开发过程

作者:Terry2017.10.30来源:Web前端之家浏览:14999评论:0
关键词:插件js分页

500.jpg

在数据显示的时候,我们经常会遇到分页功能,相对于瀑布流功能,分页还是比较传统且实用。在移动端&APP的数据加载,我们更多的采用数据瀑布流的功能来代替分页,比如新浪新闻、网易新闻APP客户端等等。但是在PC端,我们为了追求页面美观,还是要用到分页功能,所以掌握“分页”的功能是前端开发者的基本技能吧。今天我们一起来学习下“分页”插件的前端开发过程。

在开始学习之前,我一起来看下一个DEMO:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>分页功能 - Web前端之家www.jiangweishan.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <style type="text/css">
            .pagenavigate{
                    border:1 solid #78cdd1;
                    width:20px;
                    height:20px;
                    line-height:20px;
                    text-align:center;
                    background-color:#90d7ec;
                    float:left;
                    margin:0 2px;
            }

            .pagenext,.pagelast,.pagefirst,.pagepre{
                border:1 solid #78cdd1;
                width:40px;
                height:20px;
                line-height:20px;
                text-align:center;
                float:left;
                margin:0 1px;
            }

            .pagenavigate a{
                    width:20px;
                    height:20px;
                    color:#fffef9;
                    background-color:#90d7ec;
                    text-decoration:none;
            }


            .pagenext a,.pagelast a,.pagefirst a,.pagepre a{
                width:40px;
                height:20px;
                color:#009ad6;
                font-size:12px;
                text-decoration:none;
                
            }
            #contents{
                height:150px;    
            }
            .pagenavigateon{
                    border:1 solid #78cdd1;
                    width:20px;
                    height:20px;
                    line-height:20px;
                    text-align:center;
                    color:#ff0000!important;
                    background-color:#90d7ec;
            }

            .pagenavigateon a{
                    color:#ff0000;
                    text-decoration:none;
            }
        </style>
    </head>
        
    <body>
        <div id="contents">
            <div class="contentlist">1.美国宣布新军事战略将重心转向亚太地区</div>
            <div class="contentlist">2.春运期间极端最低温达零下5度</div>
            <div class="contentlist">3.上海妇女社会地位调查结果公布</div>
            <div class="contentlist">4.暖手袋发生漏液有危险 </div>
            <div class="contentlist">5.上海相关调查称新车内挥发性有机物严重超标</div>
            <div class="contentlist">6.申城进入流感高发期</div>
            <div class="contentlist">7.上海仍有部分幼儿园开设各类收费兴趣班 家长支持</div>
            <div class="contentlist">8.达人秀将揭晓复赛阵容 洗碗工麻袋姐走改编路线</div>
            <div class="contentlist">9.苹果侵权中国作家立案 韩寒等9人索赔1200万元</div>
            <div class="contentlist">10.嘉汇广场一商务楼外墙剥落砸伤过路男子(图)</div>
            <div class="contentlist">11.石岚二村小区高空抛物现象严重 多辆轿车被砸</div>
            <div class="contentlist">12.女子从11家银行申领24张信用卡 透支本金45万</div>
            <div class="contentlist">13.松江一家化工厂发生爆炸 一名技术工人当场死亡</div>
            <div class="contentlist">14.UPS公司内鬼组团集体犯罪侵占公司运费980多万元</div>
            <div class="contentlist">15.奔驰车胎漏气监测不报警</div>
            <div class="contentlist">16.CBA-新疆新援能否战JR 连败北京遇强敌</div>
            <div class="contentlist">17.科比30+8湖人负开拓者 詹韦休战热火三加时胜老鹰</div>
            <div class="contentlist">18.英媒惊曝曼联挖角兰帕德 小贝最新内裤广告超酷造型</div>
            <div class="contentlist">19.曼奇尼笑迎孙继海 英主力紧拥</div>
            <div class="contentlist">20.冬运花滑庞清佟健复出夺冠 </div>
            <div class="contentlist">21.中国彩票年销2214亿涨33%</div>
            <div class="contentlist">22.双色球26注530万分落14省市</div>
            <div class="contentlist">23.安全是根本 自主品牌C-NCAP碰撞评说</div>
            <div class="contentlist">24.赏豪车买车尽在车型总汇</div>
            <div class="contentlist">25.蔡澜:风情万种的日本版朱茵</div>
            <div class="contentlist">26.微访谈:黄觉其实是个艺术家</div>
            <div class="contentlist">27.杨澜访邓婕:当家庭主妇难</div>
            <div class="contentlist">28.中学女生迎新“黑丝”上阵</div>
            <div class="contentlist">29.陆空三军都干过的将军</div>
            <div class="contentlist">30.科比无敌1挑2!180度转体颜扣 103中51别再骂他打铁</div>
            <div class="contentlist">31.2米13神塔玩出白巧绝技 湖人新体系?瞎子才忽视他</div>
            <div class="contentlist">32.湖人22+15霸王8天后跌落人间 大梦鲨鱼附体?还早呢 </div>
            <div class="contentlist">33.纳什17助攻太阳大胜雄鹿</div>
            <div class="contentlist">34.单节17分!非同级别较量 阿联渐入状态归队日子临近</div>
            <div class="contentlist">35.状元秀21分骑士负开拓者</div>
            <div class="contentlist">36.38岁纳什1战写65年纪录 10+17!最美就是这不老传奇</div>
            <div class="contentlist">37.开拓者老大遭梦之队冷落 直言想打奥运哪怕选拔赛</div>
            <div class="contentlist">38.雷霆大将右膝十字韧带撕裂 确定赛季报销择日手术</div>
            <div class="contentlist">39.博格特周三回归对阵马刺 经纪人:感谢各方的支持</div>
            <div class="contentlist">40.詹皇转变创造惊艳开局 哈队:谁能在内线防住他?</div>
            <div class="contentlist">41.斯帅新赛季给波什两特权 龙王:当个组织者真难啊</div>
            <div class="contentlist">42.连夜赶场累坏热火将士 詹姆斯:感觉像飞了趟中国</div>
            <div class="contentlist">43.米勒打勇士复出?NO!再观察 斯帅:他还需要训练</div>
            <div class="contentlist">44.热火迎赛季首次完整训练 斯帅惜时如金飞机上放录像</div>
            <div class="contentlist">45.不再为忠诚or冠军挣扎 纳什:我愿在太阳到日落</div>
            <div class="contentlist">46.石佛退居二线马刺愿供养 布莱尔:歇到季后赛再打</div>
            <div class="contentlist">47.前蜂王欲组团买下母队 :我识人懂商会十分完美</div>
            <div class="contentlist">48.魔兽仅5分4板仍克国王 雷霆灭马刺背靠背靠背全胜</div>
            <div class="contentlist">49.赏豪车买车尽在车型总汇</div>
            <div class="contentlist">50.蔡澜:风情万种的日本版朱茵</div>
            <div class="contentlist">51.微访谈:黄觉其实是个艺术家</div>
            <div class="contentlist">52.杨澜访邓婕:当家庭主妇难</div>
            <div class="contentlist">53.中学女生迎新“黑丝”上阵</div>
            <div class="contentlist">54.陆空三军都干过的将军</div>
            <div class="contentlist">55.科比无敌1挑2!180度转体颜扣 103中51别再骂他打铁</div>
            <div class="contentlist">56.2米13神塔玩出白巧绝技 湖人新体系?瞎子才忽视他</div>
            <div class="contentlist">57.湖人22+15霸王8天后跌落人间 大梦鲨鱼附体?还早呢 </div>
            <div class="contentlist">58.纳什17助攻太阳大胜雄鹿</div>
            <div class="contentlist">59.单节17分!非同级别较量 阿联渐入状态归队日子临近</div>
            <div class="contentlist">60.状元秀21分骑士负开拓者</div>
            <div class="contentlist">61.嘉汇广场一商务楼外墙剥落砸伤过路男子(图)</div>
            <div class="contentlist">62.石岚二村小区高空抛物现象严重 多辆轿车被砸</div>
            <div class="contentlist">63.女子从11家银行申领24张信用卡 透支本金45万</div>
            <div class="contentlist">64.松江一家化工厂发生爆炸 一名技术工人当场死亡</div>
            <div class="contentlist">65.UPS公司内鬼组团集体犯罪侵占公司运费980多万元</div>
            <div class="contentlist">66.奔驰车胎漏气监测不报警</div>
            <div class="contentlist">67.CBA-新疆新援能否战JR 连败北京遇强敌</div>
            <div class="contentlist">68.科比30+8湖人负开拓者 詹韦休战热火三加时胜老鹰</div>
            <div class="contentlist">69.英媒惊曝曼联挖角兰帕德 小贝最新内裤广告超酷造型</div>
            <div class="contentlist">70.曼奇尼笑迎孙继海 英主力紧拥</div>
            <div class="contentlist">71.冬运花滑庞清佟健复出夺冠 </div>
            <div class="contentlist">72.中国彩票年销2214亿涨33%</div>
            <div class="contentlist">73.双色球26注530万分落14省市</div>
            <div class="contentlist">74.安全是根本 自主品牌C-NCAP碰撞评说</div>
            <div class="contentlist">75.赏豪车买车尽在车型总汇</div>
            <div class="contentlist">76.蔡澜:风情万种的日本版朱茵</div>
        </div>
        <br/><br/><br/>
        
        <div id="navigatediv">
        
        </div>    
        <script type="text/javascript" src="/demo/js/jq.js">
        </script>
        <script type="text/javascript">
        //插件定义
        ;(
            function($){
                $.extend({
                        "easypage":function(options){
                            options = $.extend({//参数设置
                                contentclass:"contentlist",//要显示的内容的class
                                navigateid:"navigatediv",//导航按钮所在的dom的id
                                everycount:"5",//每页显示多少个
                                navigatecount:"5"//导航按钮一次显示多少个
                                },
                                options);
                            var currentpage = 0;//当前页    
                            var contents = $("."+options.contentclass);//要显示的内容
                            var contentcount = contents.length;//得到内容的个数
                            var pagecount = Math.ceil(contentcount/options.everycount);//计算出页数
                            //拼接导航按钮
                            var navigatehtml = "<div id='pagefirst' class='pagefirst'><a href='javascript:void(0)'>首页</a></div><div id='pagepre' class='pagepre'><a href='javascript:void(0)'>上一页</a></div>";
                            for(var i = 1;i <= pagecount;i++){
                                    navigatehtml+='<div class="pagenavigate"><a href="javascript:void(0)">'+i+'</a></div>';
                            }
                            navigatehtml+="<div id='pagenext' class='pagenext'><a href='javascript:void(0)'>下一页</a></div><div id='pagelast' class='pagelast'><a href='javascript:void(0)'>尾页</a></div>";
                            
                            //加载导航按钮
                            $("#"+options.navigateid).html(navigatehtml);    
                            
                            //得到所有按钮
                            var navigates = $(".pagenavigate");
                            
                            //隐藏所有的导航按钮
                            $.extend({
                                "hidenavigates":function(){
                                    navigates.each(function(){
                                        $(this).hide();
                                    })    
                                }    
                            });
                            
                            //显示导航按钮
                            $.extend({
                                "shownavigate":function(currentnavigate){
                                    $.hidenavigates();
                                    var begin = currentnavigate>=options.navigatecount?currentnavigate-parseInt(options.navigatecount):0;
                                    if(begin>navigates.length-2*options.navigatecount){
                                        begin = navigates.length-2*options.navigatecount;    
                                    }
                                    for(var i = begin;i < currentnavigate+parseInt(options.navigatecount);i++){
                                        $(navigates[i]).show();
                                    }
                                }    
                            });
                            
                            //高亮显示某个按钮
                            $.extend({
                                "lightnavigate":function(currentnavigate){
                                    currentnavigate.addClass("pagenavigateon");    
                                }    
                            });
                            
                            //移除所有高亮按钮
                            $.extend({
                                "removelight":function(){
                                    $(".pagenavigateon").each(
                                        function(){
                                            $(this).removeClass("pagenavigateon");    
                                        }
                                    )
                                 }    
                            });
                            
                            //显示某页的内容
                            $.extend({
                                "showPage":function(page){
                                    contents.each(
                                        function(contentindex){
                                            if(contentindex>=page*options.everycount && contentindex < (page+1)*options.everycount){
                                            $(this).show();    
                                            }else{
                                            $(this).hide();    
                                            }
                                        }
                                    );
                                }
                            });
                            
                            //隐藏前进后退按钮
                            $.extend({
                                "hidePreNext":function(page){
                                        if(page==pagecount-1){
                                            $("#pagenext").hide();    
                                            $("#pagelast").hide();
                                            $("#pagepre").show();
                                            $("#pagefirst").show();            
                                        }else if(page==0){
                                            $("#pagepre").hide();
                                            $("#pagefirst").hide();    
                                            $("#pagenext").show();    
                                            $("#pagelast").show();    
                                        }else{
                                            $("#pagenext").show();
                                            $("#pagepre").show();    
                                            $("#pagefirst").show();    
                                            $("#pagelast").show();    
                                        }
                                }    
                            });
                            //显示指定的导航按钮
                            $.shownavigate(0);
                            //隐藏所有的内容
                            $.showPage(0);
                            //开始时隐藏后退按钮
                            $.hidePreNext(0);
                            //高亮显示第一个按钮
                            if(pagecount>0){
                                    $.lightnavigate($(navigates.get(0)));
                            }
                            //点击导航按钮
                            $(".pagenavigate").each(
                                function(myindex){
                                    $(this).click(
                                        function(){
                                            $.showPage(myindex);
                                            $.removelight();
                                            $.lightnavigate($(this));
                                            currentpage = myindex;
                                            $.hidePreNext(currentpage);
                                            var na = Math.floor((currentpage+1)/options.navigatecount)*options.navigatecount;
                                            $.shownavigate(na);    
                                        }
                                    );
                                }
                            );
                            //点击后退按钮
                            $("#pagepre").click(
                                function(){
                                    --currentpage<=0 && (currentpage=0);
                                    $.showPage(currentpage);    
                                    $.removelight();
                                    $.lightnavigate($(navigates.get(currentpage)));
                                    $.hidePreNext(currentpage);
                                    var na = Math.floor(currentpage/options.navigatecount)*options.navigatecount;
                                    $.shownavigate(na);    
                                }
                            );
                            //点击前进按钮
                            $("#pagenext").click(
                                function(){
                                    ++currentpage>=pagecount-1 && (currentpage=pagecount-1);
                                    $.showPage(currentpage);    
                                    $.removelight();
                                    $.lightnavigate($(navigates.get(currentpage)));
                                    $.hidePreNext(currentpage);
                                    
                                    var na = Math.floor((currentpage+1)/options.navigatecount)*options.navigatecount;
                                    $.shownavigate(na);    
                                }
                            );
                            //点击首页按钮
                            $("#pagefirst").click(
                                function(){
                                    currentpage=0;
                                    $.showPage(currentpage);    
                                    $.removelight();
                                    $.lightnavigate($(navigates.get(currentpage)));
                                    $.hidePreNext(currentpage);
                                    
                                    var na = Math.floor((currentpage+1)/options.navigatecount)*options.navigatecount;
                                    $.shownavigate(na);    
                                }
                            );
                         //点击尾页按钮
                         $("#pagelast").click(
                                 function(){
                                     currentpage=pagecount-1;
                                     $.showPage(currentpage);    
                                    $.removelight();
                                    $.lightnavigate($(navigates.get(currentpage)));
                                    $.hidePreNext(currentpage);
                                    
                                    var na = Math.floor((currentpage+1)/options.navigatecount)*options.navigatecount;
                                    $.shownavigate(na);    
                                 }
                         );
                        }
                });
            }
        )(jQuery)    

        //插件调用开始
            //contentclass   要分页内容的class名称 默认的为contentlist
            //navigateid         放置导航按钮的位置id 默认为mynavigate
            //everycount          每页显示多少个
            //navigatecount     导航按钮开始显示多少个,从第二个开始显示为双倍    
            $(
                function(){
                    $.easypage({'contentclass':'contentlist','navigateid':'navigatediv','everycount':5,'navigatecount':5});    
                }
            )
        </script>    


    </body>    
</html>

由于代码比较多,所以这里我们只能大概的说明下核心知识,更细节的东西需要大家自己去学习。

从上面的效果来看,后台将查询出来的内容全部显示到页面上,这个插件要控制这些内容,使其一页一页显示。有上一页,下一页,首页,尾页的功能。在第一页时,上一页,首页要隐藏。在最后一页时,尾页,下一页要隐藏。一次只显示几个按钮,当点击当次最后一个按钮时,显示后面几个。

接下来简单说一下编码过程:

首先可以大胆的先写下以下的代码:

//为了更好的兼容性,开始前有个分号
;(
function($){//此处将$作为匿名函数的形参
}
)(jQuery)//将jQuery作为实参传递给匿名函数

这段代码大家应该不陌生,就是javascript的神级特性---闭包。这也是jQuery插件的常见结构。为什么要使用闭包来作这jQuery的常用结构呢,一来既可以避免内部临时变量影响全局空间,又可以在插件内部继续使用$作为jQuery的别名。

接下来就是在这个结构里面写自己的方法了,jQuery提供了两种方式可以在jQuery里面扩展方法。打开jQuery API,找到插件机制,可以看到两个方法:

• jQuery.extend(object)  扩展jQuery对象本身。用来在jQuery命名空间上增加新函数。
• jQuery.fn.extend(object)  扩展 jQuery 元素集来提供新的方法(通常用来制作插件)。
从上面可以看到jQuery.extend(object)是扩展jQuery本身,要是参照java或者C#这些语言的角度来讲,就相当于向jQuery中添加静态方法。比如说我们这样写:

jQuery.extend({
     "max":function(){
          return max;
     }
})

这样,就相当于在jQuery对象里面添加了一个max方法,调用的时候可以进行这样调用:jQuery.max()

那么,jQuery.fn是什么呢,打开jQuery源码,可以看到 jQuery.fn = jQuery.prototype。那么jQuery.fn.extend相当于在jQuery中添加成员函数。

这样子应该明白两者之间的区别了吧,静态方法可以直接调用,jQuery.max()。成员函数只有jQuery实例可以调用,比如jQuery("#my").max()。

这里我采用jQuery.extend方法。代码如下:

;(
 function($){
  $.extend({
   "easypage":function(options){
   options = $.extend({//参数设置
   contentclass:"contentlist",//要显示的内容的class
   navigateid:"navigatediv",//导航按钮所在的容器的id
   everycount:"5",//每页显示多少个
   navigatecount:"5"//导航按钮一次显示多少个
   }, options); });

easypage就是使用分页插件使用的方法名,contentclass,navigateid,everycount,navigatecount是参数。

基本框架已经搭好了,接下来就是完成功能。

首先是要找到要分页的内容,并生成导航按钮。代码如下:

var currentpage = 0;//当前页 
var contents = $("."+options.contentclass);//要显示的内容
var contentcount = contents.length;//得到内容的个数
var pagecount = Math.ceil(contentcount/options.everycount);//计算出页数
//拼接导航按钮
var navigatehtml = "<div id='pagefirst' class='pagefirst'><a href='javascript:void(0)'>首页</a></div><div id='pagepre' class='pagepre'><a href='javascript:void(0)'>上一页</a></div>";
for(var i = 1;i <= pagecount;i++){
 navigatehtml+='<div class="pagenavigate"><a href="javascript:void(0)">'+i+'</a></div>';
}
navigatehtml+="<div id='pagenext' class='pagenext'><a href='javascript:void(0)'>下一页</a></div><div id='pagelast' class='pagelast'><a href='javascript:void(0)'>尾页</a></div>";
//加载导航按钮
$("#"+options.navigateid).html(navigatehtml)

这段代码比较简单,有一些JS基础的都可以搞定。

接下来就是就是实现一些基本的功能,这里抽取其中两个显示。

var currentpage = 0;//当前页 
var contents = $("."+options.contentclass);//要显示的内容
var contentcount = contents.length;//得到内容的个数
var pagecount = Math.ceil(contentcount/options.everycount);//计算出页数
//拼接导航按钮
var navigatehtml = "<div id='pagefirst' class='pagefirst'><a href='javascript:void(0)'>首页</a></div><div id='pagepre' class='pagepre'><a href='javascript:void(0)'>上一页</a></div>";
for(var i = 1;i <= pagecount;i++){
 navigatehtml+='<div class="pagenavigate"><a href="javascript:void(0)">'+i+'</a></div>';
}
navigatehtml+="<div id='pagenext' class='pagenext'><a href='javascript:void(0)'>下一页</a></div><div id='pagelast' class='pagelast'><a href='javascript:void(0)'>尾页</a></div>";
 //加载导航按钮

$("#"+options.navigateid).html(navigatehtml) 

//隐藏所有的导航按钮
$.extend({
    "hidenavigates":function(){
        //遍历所有的导航按钮
        navigates.each(function(){
            $(this).hide();
        }) 
    } 
});
 
//显示导航按钮
$.extend({
    "shownavigate":function(currentnavigate){
        $.hidenavigates();
        //当前按钮如果小于要求一次显示按钮个数的,从0开始显示
        var begin = currentnavigate>=options.navigatecount?currentnavigate-parseInt(options.navigatecount):0;
        //这里保证从第二页开始,按钮的个数都是2*options.navigatecount
        if(begin>navigates.length-2*options.navigatecount){
        begin = navigates.length-2*options.navigatecount; 
        }
        //开始显示
        for(var i = begin;i < currentnavigate+parseInt(options.navigatecount);i++){
            $(navigates[i]).show();
        }
    } 
});

好了,基本的代码流程就是这样了,程序的源代码在附件中,具体的功能实现在源代码注释中已经解释的挺清楚了。对于闭包还有疑问的,可以查看我上一篇博客,谈谈javascript闭包。

总结

下面总结一下jQuery插件的基本要点。

• 插件的文件名推荐为 jquery.[插件名].js,例如jquery.color.js
• 所有的对象方法都应当附加到jQuery.fn对象上,而所有的全局函数都应当附加到jQuery对象本身上

• 在插件内部,this指向的是当前通过选择器获取的jQuery对象,而不像一般的方法那样,例如click()方法,内部的this指向的是DOM元素

• 可以通过this.each来遍历所有元素
• 所有的方法或函数插件,都应当以分号结尾,否则压缩时可能出问题,有的为了更加稳妥些,在插件的开始处加上一个分号
• 插件应该返回一个jQuery对象,这样可以保证插件的可链式操作。除非插件需要返回的是一些需要获取的量,例如字符串或者数组等
• 尽量利用闭包技巧历来避免变量名的冲突。


您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/pagePlugainsDeveloper.html

网友评论文明上网理性发言 已有0人参与

发表评论: