Kongsi plug-in_jquery paging jQuery yang ditulis sendiri

Saya memerlukan pemalam paging JS untuk kerja, dan saya terfikir untuk menulisnya sendiri. pemalam di Internet mengandungi terlalu banyak fungsi, dan sebahagian daripadanya tidak berguna sama sekali. Kemudian, tidak perlu memuatkan bahagian JS itu Kedua, saya teringat bahawa saya tidak pernah menulis pemalam jQuery. jadi saya amalkan saja okey kita tengok dulu hasilnya:

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

Mari kita bincangkan secara ringkas tentang fungsi pemalam ini dilaksanakan

Latar belakang akan memaparkan semua kandungan yang ditanya pada halaman ini harus mengawal kandungan supaya ia boleh dipaparkan halaman demi halaman. Terdapat fungsi halaman sebelumnya, halaman seterusnya, halaman utama dan halaman terakhir. Apabila pada halaman pertama, halaman sebelumnya dan halaman utama harus disembunyikan. Pada halaman terakhir, halaman terakhir, dan halaman seterusnya harus disembunyikan. Hanya beberapa butang dipaparkan pada satu masa, dan apabila butang terakhir diklik, beberapa butang seterusnya dipaparkan.

Mari kita bincangkan secara ringkas tentang proses pengekodan:

Pertama sekali, anda boleh menulis kod berikut dengan berani:

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

Kod ini sepatutnya biasa kepada semua orang Ia adalah ciri tahap dewa bagi JavaScript--penutupan. Ini juga merupakan struktur biasa untuk pemalam jQuery. Mengapa menggunakan penutupan untuk membuat struktur biasa jQuery ini Di satu pihak, ia boleh mengelakkan pembolehubah sementara dalaman daripada menjejaskan ruang global, dan anda boleh terus menggunakan $ sebagai alias untuk jQuery di dalam pemalam.

Langkah seterusnya ialah menulis kaedah anda sendiri dalam struktur ini jQuery menyediakan dua cara untuk melanjutkan kaedah dalam jQuery. Buka API jQuery dan cari mekanisme pemalam Anda boleh melihat dua kaedah

• jQuery.extend(objek) memanjangkan objek jQuery itu sendiri. Digunakan untuk menambah fungsi baru pada ruang nama jQuery.
• jQuery.fn.extend(objek) memanjangkan set elemen jQuery untuk menyediakan kaedah baharu (biasanya digunakan untuk membuat pemalam).
Daripada perkara di atas, kita dapat melihat bahawa jQuery.extend(objek) memanjangkan jQuery itu sendiri Dari perspektif bahasa seperti java atau C#, ia adalah bersamaan dengan menambah kaedah statik pada jQuery. Sebagai contoh, kami menulis seperti ini:

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

Dengan cara ini, ia adalah bersamaan dengan menambah kaedah maks pada objek jQuery, anda boleh memanggilnya seperti ini: jQuery.max()

Jadi, apakah itu jQuery.fn Buka kod sumber jQuery dan anda boleh melihat jQuery.fn = jQuery.prototype. Kemudian jQuery.fn.extend adalah bersamaan dengan menambah fungsi ahli dalam jQuery.

Anda harus memahami perbezaan antara kedua-duanya sekarang. Kaedah statik boleh dipanggil terus, jQuery.max(). Fungsi ahli hanya boleh dipanggil oleh contoh jQuery, seperti jQuery("#my").max().

Di sini saya menggunakan kaedah jQuery.extend. Kodnya adalah seperti berikut:

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

Easypage ialah nama kaedah yang digunakan oleh pemalam paging, dan contentclass, navigationid, everycount dan navigationcount ialah parameter.

Rangka kerja asas telah disediakan, dan langkah seterusnya ialah melengkapkan fungsi.

Perkara pertama ialah mencari kandungan untuk dinomborkan dan menjana butang navigasi. Kodnya adalah seperti berikut:

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) 

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

Langkah seterusnya ialah melaksanakan beberapa fungsi asas Di sini kami mengekstrak dua daripadanya untuk dipaparkan

//隐藏所有的导航按钮
$.extend({
"hidenavigates":function(){
//遍历所有的导航按钮
navigates.each(function(){
$(this).hide();
}) 
} 
});
 
//显示导航按钮
$.extend({
"shownavigate":function(currentnavigate){
$.hidenavigates();
//当前按钮如果小于要求一次显示按钮个数的，从0开始显示
var begin = currentnavigate>=options.navigatecount?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();
}
} 
});

Ok, aliran kod asas adalah seperti ini Kod sumber program ada dalam lampiran, dan pelaksanaan fungsi khusus telah dijelaskan dengan jelas dalam komen kod sumber. Jika anda masih mempunyai soalan tentang penutupan, anda boleh menyemak blog saya sebelum ini untuk bercakap tentang penutupan JavaScript.

Berikut meringkaskan perkara asas pemalam jQuery Haha, ia dipetik daripada jQuery yang tajam.

•Nama fail yang disyorkan bagi pemalam ialah jquery.[nama pemalam].js, seperti jquery.color.js
• Semua kaedah objek harus dilampirkan pada objek jQuery.fn dan semua fungsi global harus dilampirkan pada objek jQuery itu sendiri

•Di dalam pemalam, ini menghala ke objek jQuery yang diperoleh pada masa ini melalui pemilih, tidak seperti kaedah umum, seperti kaedah klik(), di mana bahagian dalaman ini menghala ke elemen DOM

•Anda boleh merentasi semua elemen melalui ini.setiap
•Semua kaedah atau pemalam fungsi hendaklah berakhir dengan koma bertitik, jika tidak, masalah mungkin berlaku semasa pemampatan Sesetengah orang menambah koma bertitik
pada permulaan pemalam untuk menjadi lebih selamat. •Pemalam harus mengembalikan objek jQuery, yang memastikan operasi pemalam yang boleh dirantai. Melainkan pemalam perlu mengembalikan beberapa kuantiti yang perlu diperoleh, seperti rentetan atau tatasusunan, dsb.
•Cuba gunakan teknik penutupan untuk mengelakkan konflik nama berubah

Oleh kerana ini kali pertama saya menulis pemalam jQuery, mungkin terdapat beberapa perkara yang salah, harap maafkan saya.