码迷,mamicode.com
首页 > 其他好文 > 详细

JQ封装导航条插件

时间:2020-05-29 13:56:29      阅读:65      评论:0      收藏:0      [点我收藏+]

标签:content   fill   color   ack   title   end   rev   cal   style   

思路:

  需要通过判断点击页码的情况,来分别进行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封装导航条插件

标签:content   fill   color   ack   title   end   rev   cal   style   

原文地址:https://www.cnblogs.com/wxyblog/p/12986809.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!