The first time to do the plugin, early written, and then found a jquery plug-in template, take over the sleeve. The name is jquery.boilerplate.js. My understanding is not very deep, and I do not understand too much efficiency problems.
Originally I was a do asp.net development, but the company a number of individuals including art not too JS AH. Project a lot of JS to change to make me have a big head. Germination of the idea of writing plug-ins, so divert write Ah, the process of writing Plug-ins also learned JS object-oriented. For JS, there are some efficiency issues have a deeper understanding. Previously, a project has written a single page of more than 600 lines of JS files. All are written according to the function-oriented process. It's a mess. Okay, first, let's talk about Plug-ins.
(Function ($, window, document, undefined) {
Create the defaults once
var pluginname = "Amsetpager",
Defaults = {
Pagername: "Pager",//Paging container
Viewcount:5,//How many data can be displayed
datacount:0,//If background fetch data, total number (static not)
Selectclass: "Selectno",//Selected style
Listcount:10,//display number of pagination (excluding previous page, next page) <span style= "font-family:arial, Helvetica, Sans-serif" >,mode= This value should be set to more than 5 when default </SPAN>
Enableprevnext:true,//Allow display of previous page next page
Enablefirst:true,//Allow display of page numbers with only one page
Template: "Default",//template (now only default)
Mode: "Static",//"url" or "Ajax"
Urlparameter: "",//url parameters, back aa=1&bb=2 ...
Callback:null//callback function (Ajax fetch data or static can also be used)
};
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
Get URL parameters
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;
}
Static Template Data Presentation
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");
}
Main
Create Setpager Class
var Setpager = function (options,pagecount) {
This.op = options;
This.pagecount = PageCount;
}
Setpager.prototype = {
Format as a element
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>";
},
Selected state A element
Formatstrindex:function (PageNo) {
Return "<span class= '" +this.op.selectclass+ "' >" + pageno + "</span>";
},
Default Template Initialization page number collection
Initdefaultlist:function (_pageindex) {
if (this.op.listcount<5)
throw new Error ("ListCount must be lager than 5"); Listcount>5
var pageIndex = parsefloat (_pageindex); Convert to 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;
},
Generate page numbers
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) {//select template
Case ' default ': Array = this. Initdefaultlist (Pageindex,this.pagecount);
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, ' prev '));
}
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, ' next page '));
}
$ ("#" +this.op.pagername). Append (Finalarr);
}
}
Plugin.prototype = {
Class
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 event
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 ()):p Arseint ($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);
Say the style (. Pager is the paging element Class):
There are three ways, one is the data container in the page has all the data, then is mode: ' Static '. And then there's Ajax. When fetching data in paging mode, mode: ' Ajax ', and page mode based on URL: ' URL ' (I don't think it will be used at this time).
Urlparameter must also set the display of each page, and the number of data total bars. Click the page number 3,url the Address bar is: test.htm?ss=1&ee=2&p=3
Plug-ins may be written in a somewhat bloated and unreasonable number of places. I hope you can download a try, make suggestions, let a rookie to grow, thank you
