JQ封装导航条插件

Posted wxyblog

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQ封装导航条插件相关的知识，希望对你有一定的参考价值。

思路：

　　需要通过判断点击页码的情况，来分别进行html结构替换

 

整体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0em;
            padding: 0;
            text-decoration: none;
        }
        .page{
            width: 500px;
            height: 100px;
            margin:10px auto;
        }
        .page a{
             display: inline-block;
             color: blue;
             height: 25px;
             line-height: 25px;
             padding: 0 10px;
             border: 1px solid #dddddd;
             margin: 0 2px; 
             border-radius: 4px;   
        }
        .disable{
            display: inline-block;
             color: blue;
             height: 25px;
             line-height: 25px;
             padding: 0 10px;
             border: 1px solid #dddddd;
             margin: 0 2px; 
             border-radius: 4px;   
             color: black;
        }
    </style>
</head>
<body>
    <div class="page"></div>
<script src="./src/jquery.min.js"></script>    
 <script>
   ;(function($){
       function init(dom,args){
           console.log(dom,args);
           if(args.current <= args.pageCount){
                fillHtml(dom,args);
                bindEvent(dom,args)
           }else{
               alert(‘请输入正确的页码‘)
           }
       }
       function fillHtml(dom,args){
            //上一页
            if (args.current > 1) { //当前页面是否为上一页
                dom.append(‘<a href="#" class="prevPage">上一页</a>‘)
            } else {
                dom.remove(‘.prevPage‘);
                dom.append(‘<a class="disable">上一页</a>‘)
            }
            //中间页数
            //第一页
            if(args.current !== 1 && args.current >= 4 && args.current !== 4 ){
                dom.append(‘<a class="num">1</a>‘)
            }
            //第一页加...
            if (args.current-2 > 2 && args.current >4) {
                dom.append(‘<span>...</span>‘)
            } 

            //中间连续页数
            var start=args.current -2 ;
            var end = args.current +2 ;
            for(;start <= end; start++){
                if (start <= args.pageCount && start >=1) {
                    if(start == args.current){
                        dom.append(‘<a class="current">‘+start+‘</a>‘)
                    }else{
                        dom.append(‘<a class="num">‘+start+‘</a>‘)
                    }   
                }
            }
            //最后一页加...
            if (args.current+2 < args.pageCount -1 && args.pageCount >4) {
                dom.append(‘<span>...</span>‘)
            } 
            if(args.current !== args.pageCount && args.current < args.pageCount -2 && args.pageCount !== 4 ){
                dom.append(‘<a class="num">‘+args.pageCount+‘</a>‘)
            }

            //下一页
            if (args.current < args.pageCount) { //当前页面是否为上一页
                dom.append(‘<a href="#" class="nextPage">下一页</a>‘)
            } else {
                dom.remove(‘.nextPage‘);
                dom.append(‘<span class="disable">下一页</span>‘)
            }
       }
       function bindEvent(dom,args){
            dom.on(‘click‘,‘.num‘,function(e){
                dom.html(‘‘)
                var cur = parseInt($(this).text())
                changePage(dom,args,cur)
            })
            dom.on(‘click‘,‘.prevPage‘,function(e){
                dom.html(‘‘)
                var cur = parseInt(dom.find(‘.current‘).text())
                changePage(dom,args,cur-1)
            })
            dom.on(‘click‘,‘.nextPage‘,function(e){
                dom.html(‘‘)    
                var cur = parseInt(dom.find(‘.current‘).text())
                changePage(dom,args,cur+1)
            })
       }
       function changePage(dom,args,page){
            fillHtml(dom,{current:page,pageCount:args.pageCount});
            args.backFn(page)
       }
        $.fn.extend( {
            createPage:function(options){
                    var args = $.extend({
                        pageCount:5,
                        current:1,
                        backFn:function(){}
                    },options);
                    init(this,args)
            }
        })
   })(jQuery)  


 </script>   
<script>
    $(‘.page‘).createPage({
        pageCount:10,
        current:5,
        backFn:function(p){
        console.log(p)
        }
    })
</script>
</body>
</html>

...

以上是关于JQ封装导航条插件的主要内容，如果未能解决你的问题，请参考以下文章

jQuery右侧滑动快速导航条

关于JQ分页插件的封装

怎么用jq封装插件

jq插件的编写方法（自定义jq插件）---转

JQ下的常见插件

jq封装插件