自作の jQuery ページングプラグインを共有する -jquery-jsチュートリアル-php.cn

自作の jQuery ページングプラグインを共有する -jquery

WBOY

リリース： 2016-05-16 16:38:29

オリジナル

1172 人が閲覧しました

仕事で JS ページングプラグインが必要になり、自分で作成しようと考えましたが、コード構造が分からないプラグインを見つけました。さらに、問題を解決するのが困難でした。インターネット上のプラグインには多すぎる機能が含まれており、中にはまったく役に立たないものもありました。次に、jQuery プラグインを書いたことがないことを思い出しました。では、さっそく練習してみました。まずは結果を見てみましょう:

http://demo.jb51.net/js/2014/EasyPage/

このプラグインが実装する機能について簡単に説明しましょう

背景には、ページ上のクエリされたすべてのコンテンツが表示されます。このプラグインは、ページごとに表示できるようにコンテンツを制御する必要があります。前ページ、次ページ、トップページ、最終ページの機能があります。最初のページでは、前のページとホームページを非表示にする必要があります。最後のページでは、最後のページと次のページを非表示にする必要があります。一度に表示されるボタンは少数のみで、最後のボタンをクリックすると、次のいくつかのボタンが表示されます。

エンコードプロセスについて簡単に説明しましょう:

まず、次のコードを大胆に記述できます:

//为了更好的兼容性，开始前有个分号
;(
function($){//此处将$作为匿名函数的形参
}
)(jQuery)//将jQuery作为实参传递给匿名函数

ログイン後にコピー

このコードは誰もが知っているはずです。これは JavaScript の神レベルの機能、つまりクロージャです。これは、jQuery プラグインの一般的な構造でもあります。 jQuery のこの共通構造を作成するためにクロージャを使用するのはなぜでしょうか? 一方で、内部の一時変数がグローバル空間に影響を与えるのを避けることができ、プラグイン内で $ を jQuery のエイリアスとして使用し続けることができます。

次のステップは、この構造に独自のメソッドを記述することです。jQuery には、jQuery でメソッドを拡張する 2 つの方法があります。 jQuery API を開くと、2 つのメソッドが表示されます

。

• jQuery.extend(object) は、jQuery オブジェクト自体を拡張します。新しい関数を jQuery 名前空間に追加するために使用されます。
• jQuery.fn.extend(object) は、jQuery 要素セットを拡張して、新しいメソッド (通常はプラグインの作成に使用されます) を提供します。
上記のことから、jQuery.extend(object) は jQuery 自体を拡張していることが分かります。Java や C# などの言語から見ると、jQuery に静的メソッドを追加することに相当します。たとえば、次のように書きます:

jQuery.extend({
 "max":function(){
  return max;
 } 
})

ログイン後にコピー

この方法では、呼び出すときに jQuery.max()

のように max メソッドを追加するのと同じになります。

それでは、jQuery.fn とは何ですか? jQuery ソースコードを開くと、jQuery.fn = jQuery.prototype が表示されます。したがって、jQuery.fn.extend は jQuery にメンバー関数を追加することと同等です。

この 2 つの違いは、静的メソッド jQuery.max() を直接呼び出すことができることを理解する必要があります。メンバー関数は、jQuery("#my").max() などの jQuery インスタンスによってのみ呼び出すことができます。

ここでは jQuery.extend メソッドを使用します。コードは次のとおりです:

;(
 function($){
  $.extend({
   "easypage":function(options){
   options = $.extend({//参数设置
   contentclass:"contentlist",//要显示的内容的class
   navigateid:"navigatediv",//导航按钮所在的容器的id
   everycount:"5",//每页显示多少个
   navigatecount:"5"//导航按钮一次显示多少个
   }, options); 
});

ログイン後にコピー

Easypage は、ページングプラグインによって使用されるメソッド名です。contentclass、navigateid、everycount、および navigatecount はパラメーターです。

基本的なフレームワークが設定されました。次のステップは機能を完成させることです。

最初に、ページ分割するコンテンツを見つけてナビゲーションボタンを生成します。コードは次のとおりです:

var currentpage = 0;//当前页 
var contents = $("."+options.contentclass);//要显示的内容
var contentcount = contents.length;//得到内容的个数
var pagecount = Math.ceil(contentcount/options.everycount);//计算出页数
//拼接导航按钮
var navigatehtml = "<div id='pagefirst' class='pagefirst'><a href='javascript:void(0)'>首页</a></div><div id='pagepre' class='pagepre'><a href='javascript:void(0)'>上一页</a></div>";
for(var i = 1;i <= pagecount;i++){
 navigatehtml+='<div class="pagenavigate"><a href="javascript:void(0)">'+i+'</a></div>';
}
navigatehtml+="<div id='pagenext' class='pagenext'><a href='javascript:void(0)'>下一页</a></div><div id='pagelast' class='pagelast'><a href='javascript:void(0)'>尾页</a></div>";
 //加载导航按钮

$("#"+options.navigateid).html(navigatehtml) 

这段代码比较简单，就不多讲。

ログイン後にコピー

次のステップは、いくつかの基本的な関数を実装することです。ここでは、そのうちの 2 つを抽出して表示します。

//隐藏所有的导航按钮
$.extend({
"hidenavigates":function(){
//遍历所有的导航按钮
navigates.each(function(){
$(this).hide();
}) 
} 
});
 
//显示导航按钮
$.extend({
"shownavigate":function(currentnavigate){
$.hidenavigates();
//当前按钮如果小于要求一次显示按钮个数的，从0开始显示
var begin = currentnavigate>=options.navigatecount&#63;currentnavigate-parseInt(options.navigatecount):0;
//这里保证从第二页开始，按钮的个数都是2*options.navigatecount
if(begin>navigates.length-2*options.navigatecount){
begin = navigates.length-2*options.navigatecount; 
}
//开始显示
for(var i = begin;i < currentnavigate+parseInt(options.navigatecount);i++){
$(navigates[i]).show();
}
} 
});

ログイン後にコピー

基本的なコードの流れは次のとおりです。プログラムのソースコードは、ソースコードのコメントで明確に説明されています。クロージャについてまだ質問がある場合は、JavaScript クロージャについて説明している私の以前のブログを参照してください。

以下は jQuery プラグインの基本的なポイントをまとめたものです (笑)、sharp jQuery からの抜粋です。

•プラグインの推奨ファイル名は、jquery.color.js など、jquery.[プラグイン名].js です
• すべてのオブジェクトメソッドは jQuery.fn オブジェクトにアタッチされ、すべてのグローバル関数は jQuery オブジェクト自体にアタッチされる必要があります

•プラグイン内部では、内部の this が DOM 要素を指す click() メソッドなどの一般的なメソッドとは異なり、this は現在セレクターを通じて取得されている jQuery オブジェクトを指します

•this.each を通じてすべての要素をトラバースできます
すべてのメソッドまたは関数プラグインはセミコロンで終わる必要があります。そうしないと、圧縮中に問題が発生する可能性があります。安全性を高めるために、プラグインの先頭にセミコロン
を追加する場合があります。 •プラグインは、プラグインのチェーン可能な操作を保証する jQuery オブジェクトを返す必要があります。プラグインが文字列や配列など、取得する必要がある数量を返す必要がある場合を除きます。
•変数名の競合を避けるためにクロージャ手法を使用するようにしてください

jQueryプラグインを書くのが初めてなので、間違っている部分もあるかと思いますが、ご容赦ください。