jQuery插件開發

時間 2019-11-18

標籤 jquery 插件開發欄目 JQuery 简体版

原文原文鏈接

jQuery的一些函數javascript

$.fn.html

jQuery.fn = jQuery.prototype ={ 
　　　init: function( selector, context ){//....　 
　　　//...... 
};

$.extend()java

//jQuery.extend(object);　爲jQuery類添加類方法;
  能夠理解爲添加靜態方法,以後即可以在引入 jQuery　的地方，使用這個方法了。
//例如：添加add方法
$.extend({ 
　　add:function(a,b){returna+b;} 
});

$.fn.extend()jquery

//jQuery.fn.extend(object);對jQuery.prototype進得擴展，就是爲jQuery類添加「成員函數

//例如
$.fn.extend({ 

   funcName:function(){ 

   } 
});

完整代碼以下：ajax

js包括：jquery-1.8.3.min和jquery.page（以下）json

(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);

HTML文件以下app

<!DOCTYPE html>
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>簡單的jQuery分頁插件下載 - 站長素材</title>
<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;text-align:center;}
.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>
</head>
<body>
<br><br><br>

<div class="tcdPageCode"></div>

<center><pre><br>
調用方法：
$(".tcdPageCode").createPage({
	pageCount:10,
	current:1,
	backFn:function(p){
		//單擊回調方法，p是當前頁碼
	}
});
pageCount：總頁數
current：當前頁
</pre></center>

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.page.js"></script>
<script>
    $(".tcdPageCode").createPage({
        pageCount:10,
        current:1,
        backFn:function(p){
            console.log(p);
        }
    });
</script>

<div id="list" style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

</div>
</body>
</html>

ajax請求數據並拼接函數

//請求後臺數據
         function  reqData(reqUrl,page){
             $.ajax({
                 type:'POST',
                 url:reqUrl,
                 data:{typeKind:kindtype,page:page,pageSize:pageSize},
                 dataType:'json',
                 success:function(data){
                     //拼接
                     var result='<ul class="newslist">';
                    
                     $(data).each(function(){
                         result+='<li>'+this.title+'</li>';
                     });
					 result +='</ul>';
                     //改變頁面內容
                     $('#lists').html(result);
                 },
                 error: function (xhr, type) {
                     alert('Ajax error!');
                   
                 }
             });
         }

下載地址：http://sc.chinaz.com/jiaoben/141214545260.htmthis