第一次做的插件，早寫好了，後來發現一個jquery插件模板，就拿過來套。名字叫jquery.boilerplate.js。我的理解不是很深，也不太理解太多效率問題。
本來我是一個做asp.net開發的，可是公司好些個人包括美工沒太會js啊。項目很多js改來改去搞得我都頭大了。萌發了寫插件的想法，於是照葫蘆畫瓢寫啊，寫插件的過程也學了js的面向對象。對js，還有一些效率問題有了更深了解。以前有個項目單個頁面寫過600多行的js文件。全是按功能面向過程寫的。亂的不堪回首啊好吧先是說一下插件吧。
插件叫AmSetPager，首先是看一下樣子：
此處下載：點擊下載
我這個插件好像使用有些另類，是調用數據展示容器的元素$("#DataContent").AmSetPager({...});在參數中配置分頁容器元素ID。寫完插件後看別的插件都是調用分頁元素ID
貼下源碼：
. 代碼如下:
(function ( $, window, document, undefined ) {
// Create the defaults once
var pluginName = "AmSetPager",
defaults = {
pagerName: "pager", //分頁的容器
viewCount: 5, //可顯示多少條數據
dataCount: 0, //如果後台取數據，總數多少（靜態的不用）
selectClass: "selectno", //選中的樣式
listCount:10, //顯示多少個分頁碼（不包括前一頁，後一頁）<SPAN style="FONT-FAMILY: Arial, Helvetica, sans-serif">,mode=default時該值需設置為5以上</SPAN>
enablePrevNext:true, //允許顯示前一頁後一頁
enableFirst:true, //允許只有一頁的情況下顯示頁碼
template:"default", //模板（現只有default）
mode:"static", //"url" or "ajax"
urlparameter:"", //url參數,後面aa=1&bb=2...
callback:null //回調函數（ajax取數據或者靜態也可以使用）
};
// The actual plugin constructor
function Plugin( element, options ) {
this.element = element;
this.options = $.extend( {}, defaults, options );
//this._defaults = defaults;
this._name = pluginName;
this.init();
}
//private
//獲取url參數
var getQueryString = function (name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return undefined;
}
//靜態模板數據展示
var Bind_StaticData = function($content,minnum,maxnum) {
if (minnum > 0) {
$content.children(":gt(" + (minnum - 1) + "):lt(" + maxnum + ")").css("display", "block");
} else {
$content.children(":lt(" + maxnum + ")").css("display", "block");
}
$content.children(":lt(" + (minnum) + ")").css("display", "none");
$content.children(":gt(" + (maxnum - 1) + ")").css("display", "none");
}
//主要
//創建SetPager類
var SetPager = function (options,pageCount){
this.op = options;
this.pageCount = pageCount;
}
SetPager.prototype = {
//格式化成a元素
FormatStr : function(pageNo, pageText) {
var href = this.op.mode=='url'?location.pathname+"?"+this.op.urlparameter+"&p="+pageNo:"javascript:void(0);";
if (typeof (pageText) == "number") {
return "<a href='"+href+"' >" + pageText + "</a>";
}
return "<a href='"+href+"' i='" + pageNo + "'>" + pageText + "</a>";
},
//選中狀態a元素
FormatStrIndex : function(pageNo){
return "<span class='"+this.op.selectClass+"'>" + pageNo + "</span>";
},
//默認模板初始化頁碼集合
InitDefaultList : function(_pageIndex){
if(this.op.listCount<5)
throw new Error("listCount must be lager than 5"); //listCount>5
var pageIndex = parseFloat(_pageIndex); //轉化為number
var ns = new Array();
var numList = new Array(this.op.listCount);
if (pageIndex >= this.op.listCount) {
numList[0] = 1;
numList[1] = "…";
var infront = 0;
var inback = 0;
var inflag = Math.floor((this.op.listCount-2)/2);
if(this.op.listCount%2==0){
infront = inflag-1;
inback = inflag;
}else{
infront = inflag;
inback = inflag;
}
if (pageIndex + inback >= this.pageCount) {
for (i = this.pageCount - (this.op.listCount-3); i < this.pageCount + 1; i++) {
ns.push(i);
}
for (j = 0; j <= (this.op.listCount-3); j++) {
numList[j + 2] = ns[j];
}
}
for (i = pageIndex - infront; i <= pageIndex + inback; i++) {
ns.push(i);
}
for (j = 0; j < (this.op.listCount-2); j++) {
numList[j + 2] = ns[j];
}
} else {
if (this.pageCount >= this.op.listCount) {
for (i = 0; i < this.op.listCount; i++) {
numList[i] = i+1;
}
} else {
for (i = 0; i < this.pageCount; i++) {
numList[i] = i+1;
}
}
}
return numList;
},
//生成頁碼
InitPager : function(pageIndex){
$("#"+this.op.pagerName).html('');
if(this.op.enableFirst==false&&this.pageCount<=1){
return null;
}
var array = new Array();
//var finalarr = new Array();
var $con = $("#"+this.op.pagerName);
switch(this.op.template){ //選擇模板
case 'default':array = this.InitDefaultList(pageIndex,this.pageCount);break;
default:array = this.InitDefaultList(pageIndex,this.pageCount);
}
if(!array instanceof Array){
throw new Error("is not array");
}
if(array.length!=this.op.listCount){
throw new Error("array.length error:"+array.length);
}
if(pageIndex>1&&this.op.enablePrevNext){
$con.append(this.FormatStr(pageIndex-1,'上一頁'));
}
for(var i=0;i<array.length;i++){
if(typeof array[i]=='undefined'){
continue;
}
if(pageIndex==array[i]){
$con.append(this.FormatStrIndex(array[i]));
}else if(typeof array[i]=='number'){
$con.append(this.FormatStr(array[i],array[i]));
}else{
$con.append(array[i]);
}
}
if(pageIndex<this.pageCount&&this.op.enablePrevNext){
$con.append(this.FormatStr(pageIndex+1,'下一頁'));
}
//$("#"+this.op.pagerName).append(finalarr);
}
}
Plugin.prototype = {
//初始化
init: function() {
var options = this.options;
var $thisbase = $(this.element);
var $content;
if($thisbase.is(':has(tbody)')){
$content=$thisbase.children();
}
else{
$content=$thisbase;
}
var count = options.mode=='static'?$content.children().length:options.dataCount;
var eachcount = options.viewCount;
var totalpage = Math.ceil(count / eachcount);
var $pager = $("#"+options.pagerName);
var setpager = new SetPager(options,totalpage); //init
if(options.mode=='url'){
var urlindex = getQueryString("p");
if(isNaN(urlindex)){
setpager.InitPager(1);
}else{
setpager.InitPager(urlindex>totalpage?totalpage:urlindex);
}
}else{
setpager.InitPager(1);
if(options.mode=='static'&&typeof options.callback!='function'){
Bind_StaticData($content,0,eachcount);
}else{
options.callback($content,1,options.viewCount);
}
$pager.bind("click",function(e){ //click事件
if(e.target.tagName!='A') return;
var $this = $(e.target);
$this.removeAttr("href").siblings().attr("href", "javascript:void(0);");//..
var indexnum = parseInt($this.html())==$this.html()?parseInt($this.html()):parseInt($this.attr('i'));
var maxnum = (indexnum * eachcount);
var minnum = (indexnum - 1) * eachcount;
if(options.mode!='static'&&options.mode!='ajax'){
throw new Error("mode must be selected:static,url,ajax");
}
if(options.mode=='static'&&typeof options.callback!='function'){
setpager.InitPager(indexnum);
Bind_StaticData($content,minnum, maxnum);
}else{
setpager.InitPager(indexnum);
options.callback($content,indexnum,options.viewCount);
}
});
}
}
};
$.fn[pluginName] = function ( options ) {
return this.each(function () {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName, new Plugin( this, options ));
}
});
};
})( jQuery, window, document );
說一下樣式（.pager就是分頁元素class）：
. 代碼如下:
<SPAN style="FONT-SIZE: 12px"><style type="text/css">
.pager a{ text-decoration: none; border: 1px solid #e7ecf0;color: #15B;}
.pager a:hover{ background-color:#E6EBEF}
.pager a,.pager span{display: inline-block;padding: 0.1em 0.4em;margin-right: 5px; margin-bottom: 5px;}
.selectno{background: #26B;color: #fff;border: 1px solid #AAE;}
</style></SPAN>
有三種方式，一個是頁面中數據容器有全部數據，這時就是mode:'static'。還有就是ajax按分頁方式取數據時，mode:'ajax'，還有根據url傳參分頁mode:'url'（我感覺這時估計不會用到吧）。
首先靜態的：
html:
. 代碼如下:
<table id="tablepager" border="0" cellpadding="0" cellspacing="0">
<tr><td><p>1aaaaaaaaaaaaaaaaaaaaaa</p></td></tr>
<tr><td><p>2aaaaaaaaaaaaaaaaaaaaaa</p></td></tr>
<tr><td><p>3aaaaaaaaaaaaaaaaaaaaaa</p></td></tr>
<tr><td><p>4aaaaaaaaaaaaaaaaaaaaaa</p></td></tr>
<tr><td><p>5aaaaaaaaaaaaaaaaaaaaaa</p></td></tr>
<tr><td><p>6aaaaaaaaaaaaaaaaaaaaaa</p></td></tr>
<tr><td><p>7aaaaaaaaaaaaaaaaaaaaaa</p></td></tr>
<tr><td><p>8aaaaaaaaaaaaaaaaaaaaaa</p></td></tr>
<tr><td><p>9aaaaaaaaaaaaaaaaaaaaaa</p></td></tr>
</table>
<div id="pager" class="pager"></div>
js代碼：
. 代碼如下:
$(function(){
$("#tablepager").AmSetPager({"viewCount":2,"mode":"static","listCount":6});
})
這裡也可以設置callback，和下面類似
ajax的：
html:
. 代碼如下:
<table id="tablepager" border="0" cellpadding="0" cellspacing="0">
</table>
<div id="pager" class="pager"></div>
後台獲取實例數據：
. 代碼如下:
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
int index = int.Parse(context.Request.QueryString["index"]);
int viewCount = int.Parse(context.Request.QueryString["viewCount"]);
List<string> list = new List<string>();
for (int i = 1; i <= viewCount; i++)
{
list.Add(index + "_" + i + "....................");
}
JavaScriptSerializer ser = new JavaScriptSerializer();
context.Response.Write(ser.Serialize(list));
context.Response.End();
}
js代碼：
. 代碼如下:
<script type="text/javascript">
$(function () {
$("#tablepager").AmSetPager({ "viewCount": 3, "mode": "ajax", "dataCount": 30, "listCount": 6, "callback": function (ev, indexnum, viewCount) {//callback中三個參數分別為：數據容器對象，當前頁，顯示幾條數據
$.getJSON("Handler1.ashx", { "index": indexnum, "viewCount": viewCount }, function (data) {
ev.html('');
for (var i = 0; i < data.length; i++) {
ev.append("<tr><td>" + data[i] + "</td></tr>");
}
});
}
});
})
</script>
截圖：
url的：
沒什麼可說的，js代碼：
. 代碼如下:
$(function(){
$("#tablepager").AmPager({"viewCount":5,"dataCount":50,"mode":"url","listCount":6,"urlparameter":"ss=1&ee=2"});
})
urlparameter為傳的參數，也必須設置每頁顯示，和數據總條數。點擊頁碼3，url地址欄為 ：test.htm?ss=1&ee=2&p=3
插件寫的可能有點臃腫，很多地方也不合理。希望大家下載試試，提提意見，讓一個菜鳥能成長，謝啦