zoukankan      html  css  js  c++  java
  • jquery分页

    //分页插件
    /**
    2015-12-7 
    **/
    (function($){
    	var ms = {
    		init:function(obj,args){
    			return (function(){
    				ms.fillHtml(obj,args);
    				ms.bindEvent(obj,args);
    			})();
    		},
    		//填充html
    		fillHtml:function(obj,args){
    			return (function(){
    				obj.empty();
    				//上一页
    				if(args.current > 1){
    					obj.append('<a href="javascript:;" class="prevPage">上一页</a>');
    				}else{
    					obj.remove('.prevPage');
    					obj.append('<span class="disabled">上一页</span>');
    				}
    				//中间页码
    				if(args.current != 1 && args.current >= 4 && args.pageCount != 4){
    					obj.append('<a href="javascript:;" class="tcdNumber">'+1+'</a>');
    				}
    				if(args.current-2 > 2 && args.current <= args.pageCount && args.pageCount > 5){
    					obj.append('<span>...</span>');
    				}
    				var start = args.current -2,end = args.current+2;
    				if((start > 1 && args.current < 4)||args.current == 1){
    					end++;
    				}
    				if(args.current > args.pageCount-4 && args.current >= args.pageCount){
    					start--;
    				}
    				for (;start <= end; start++) {
    					if(start <= args.pageCount && start >= 1){
    						if(start != args.current){
    							obj.append('<a href="javascript:;" class="tcdNumber">'+ start +'</a>');
    						}else{
    							obj.append('<span class="current">'+ start +'</span>');
    						}
    					}
    				}
    				if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){
    					obj.append('<span>...</span>');
    				}
    				if(args.current != args.pageCount && args.current < args.pageCount -2  && args.pageCount != 4){
    					obj.append('<a href="javascript:;" class="tcdNumber">'+args.pageCount+'</a>');
    				}
    				//下一页
    				if(args.current < args.pageCount){
    					obj.append('<a href="javascript:;" class="nextPage">下一页</a>');
    				}else{
    					obj.remove('.nextPage');
    					obj.append('<span class="disabled">下一页</span>');
    				}
    			})();
    		},
    		//绑定事件
    		bindEvent:function(obj,args){
    			return (function(){
    				obj.on("click","a.tcdNumber",function(){
    					var current = parseInt($(this).text());
    					ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount});
    					if(typeof(args.backFn)=="function"){
    						args.backFn(current);
    					}
    				});
    				//上一页
    				obj.on("click","a.prevPage",function(){
    					var current = parseInt(obj.children("span.current").text());
    					ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount});
    					if(typeof(args.backFn)=="function"){
    						args.backFn(current-1);
    					}
    				});
    				//下一页
    				obj.on("click","a.nextPage",function(){
    					var current = parseInt(obj.children("span.current").text());
    					ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount});
    					if(typeof(args.backFn)=="function"){
    						args.backFn(current+1);
    					}
    				});
    			})();
    		}
    	}
    	$.fn.createPage = function(options){
    		var args = $.extend({
    			pageCount : 10,
    			current : 1,
    			backFn : function(){}
    		},options);
    		ms.init(this,args);
    	}
    })(jQuery);
    

      js源码----jquery.page.js

    此js文件来自网络 

    前台引用:

    <script src="jquery.min.js"></script>
    <script src="jquery.page.js"></script>

    CSS样式:

    <style>
    *{ margin:0; padding:0; list-style:none;}
    a{ text-decoration:none;}
    a:hover{ text-decoration:none;}
    .tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;}
    .tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px;    line-height: 25px;    padding: 0 10px;border: 1px solid #ddd;    margin: 0 2px;border-radius: 4px;vertical-align: middle;}
    .tcdPageCode a:hover{text-decoration: none;border: 1px solid #428bca;}
    .tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca;    border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;}
    .tcdPageCode span.disabled{    display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;    color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;}
    </style>
    View Code

    js代码:

     调用方法:
        $(".tcdPageCode").createPage({
            pageCount:10,
            current:1,
            backFn:function(p){
                //单击回调方法,p是当前页码
            }
        });
        pageCount:总页数
        current:当前页
    View Code
  • 相关阅读:
    iOS13 present VC方法
    青囊奥语
    三元九运的排盘
    三元九运 笔记
    青囊经
    金钱卦起卦
    易经中九二六三是什么意思
    用神
    六爻预测中的世爻,应爻分别代表什么
    div2-1519-D-Maximum Sum of Products-dp
  • 原文地址:https://www.cnblogs.com/ooip/p/5029591.html
Copyright © 2011-2022 走看看