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
  • 相关阅读:
    Java 第十一届 蓝桥杯 省模拟赛 洁净数
    Java 第十一届 蓝桥杯 省模拟赛 第十层的二叉树
    Java 第十一届 蓝桥杯 省模拟赛 第十层的二叉树
    Java 第十一届 蓝桥杯 省模拟赛 第十层的二叉树
    Java 第十一届 蓝桥杯 省模拟赛 70044与113148的最大公约数
    Java 第十一届 蓝桥杯 省模拟赛 70044与113148的最大公约数
    20. Valid Parentheses
    290. Word Pattern
    205. Isomorphic Strings
    71. Simplify Path
  • 原文地址:https://www.cnblogs.com/ooip/p/5029591.html
Copyright © 2011-2022 走看看