初めてプラグインを作成したとき、すでに作成していました。その後、jquery プラグインのテンプレートを見つけたので、それを使用しました。名前は jquery.boilerplate.js です。私の理解はそれほど深くなく、効率の問題もあまり理解できません。
私はもともと asp.net の開発者でしたが、社内にはアーティストも含めて js が苦手な人が多かったです。プロジェクトにはあまりにも多くの JS 変更があり、頭がクラクラしてしまいました。私もプラグインを作成するというアイデアを思いついたので、同じパターンに従い、プラグインを作成する過程で、JS のオブジェクト指向の性質についても学びました。私は js といくつかの効率の問題についてより深く理解しています。以前、1ページに600行以上のjsファイルを書いたプロジェクトがありました。これらはすべて、機能指向およびプロセス指向の方法で記述されています。振り返るには面倒すぎるので、まずはプラグインについて話しましょう。
プラグインは AmSetPager と呼ばれます。まず見てみましょう:
ここからダウンロードします: クリックしてダウンロード
私のプラグインは少し異なるようです。データ表示コンテナーの要素 $("#DataContent").AmSetPager({. ..}); パラメータにページングコンテナ要素 ID を設定します。プラグインを作成した後、他のプラグインはすべてページング要素 ID
を呼び出していることがわかりました。
ソース コードを投稿します:
(function ( $, window, document, unknown ) {
// デフォルトを一度作成します
var pluginName = "AmSetPager",
defaults = {
pagerName: "pager ", //ページングコンテナ
viewCount: 5, //表示できるデータの数
dataCount: 0, //バックグラウンドでデータを取得した場合、総数はどのくらいになります(静的なものは使用されません)
selectClass: "selectno" , //選択されたスタイル
listCount:10, //表示されるページ番号の数 (前ページと次ページを除く)
、mode=default の場合、値を 5 以上に設定する必要があります enablePrevNext:true, //前のページと次のページを許可します
enableFirst:true, //1 ページのみを許可する page の場合はページ番号を表示します
template:"default", //テンプレート (現在はデフォルトのみ)
mode:" static", //"url" または "ajax"
urlparameter:" ", //url パラメーター、その後に aa=1&bb=2...
callback:null //コールバック関数 (ajax データまたは静的)
};
// 実際のプラグイン コンストラクター
function Plugin( element, options ) {
this.element = element;
this.options = $ .extend( {}, デフォルト, オプション );
//this._defaults = デフォルト;
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 unknown;
}
//静的テンプレート データ表示
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
//SetPager クラスを作成します
var SetPager = function (options,pageCount){
this.op = options
this.pageCount = pageCount; SetPager.prototype = {
//要素にフォーマットします
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 "
" pageText "";
}
return "
" ";
},
//要素の選択状態
FormatStrIndex : function(pageNo){
return "" pageNo " ";
},
//デフォルトのテンプレートの初期化 ページ番号コレクション
InitDefaultList: function(_pageIndex){
if(this.op.listCount<5)
throw new Error("listCount は 5 より大きい必要があります"); //listCount>5
var pageIndex = parseFloat(_pageIndex); //数値に変換します
var ns = new Array(); = new Array(this.op.listCount);
if (pageIndex >= this .op.listCount) {
numList[0] = 1;
numList[1]; 🎜>var infront = 0;
var inback = 0;
if(this.op.listCount%2) ==0){
infront = inflag-1;
inback = inflag;
inback = inflag; 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 > .op.listCount) {
for (i = 0; i < this.op .listCount; i ) {
numList[i] = i 1;
}
} else {
for (i = 0; i numList [i] = i 1;
}
}
return
} ,
//ページ番号を生成します
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(); = $("#" this.op.pagerName);
switch(this .op.template){ //テンプレートを選択
case 'default':array = this.InitDefaultList(pageIndex,this. pageCount);break;
default:array = this.InitDefaultList(pageIndex,this.pageCount) ;
}
if(!arrayinstanceofArray){
throw new Error("配列ではありません" );
}
if(array.length!=this.op.listCount) {
throw new Error("array.length error:" array.length); (pageIndex>1&&this.op.enablePrevNext){
$con.append(this.FormatStr( pageIndex-1,'前のページ'));
}
for(var i=0;iif(typeof array[i]=='未定義' ){
続行;
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$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){ //クリックイベント
if(e.target.tagName!='A') return;
var $this = $(e.target);
$this.removeAttr("href").siblings().attr("href", "javascript:void(0);");//..
varindexnum = 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選択する必要があります: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就是分页元素クラス）：
には 3 つの方法があり、1 つはすべてのデータがセッション内のデータ コンテナにあり、このときは mode:'static' です。また、ajax 方式でデータを取得する場合、mode :'ajax'、また、url に準拠して参加分页mode:'url' (私はこの時点では使用できません)。 最初の静的:
html:
复制代码代码如下:
js代码：
$(function(){
$("#tablepager").AmSetPager({"viewCount":2," mode":"static","listCount":6});
})
この里でもコールバックを設定できます，和下面类似截图：
ajax の：
html:
后台获取实例データ：
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 = new List();
for (int i = 1; i {
list.Add(index "_" i "..... ……」）;
}
JavaScriptSerializer ser = new JavaScriptSerializer();
context.Response.Write(ser.Serialize(list));
context.Response.End();
}
js代：
截图：
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
プラグインは少し肥大化している可能性があり、多くの場所で無理があります。初心者が成長できるよう、ぜひ皆さんもダウンロードして試してみてください、よろしくお願いします
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
