자체 작성된 jQuery 페이징 플러그인_jquery 공유-JS 튜토리얼-php.cn

자체 작성된 jQuery 페이징 플러그인_jquery 공유

WBOY

풀어 주다： 2016-05-16 16:38:29

원래의

1173명이 탐색했습니다.

업무상 JS 페이징 플러그인이 필요한데, 직접 작성해볼까 생각하다가 인터넷에 접속해 보니 코드 구조도 모르는 플러그인이 있어서 문제 해결도 어려웠습니다. 인터넷의 플러그인에는 너무 많은 기능이 포함되어 있었고 그 중 일부는 전혀 유용하지 않았습니다. 그러면 해당 JS를 로드할 필요가 없었습니다. 두 번째로 저는 jQuery 플러그인을 작성한 적이 없다는 것을 기억했습니다. 그래서 그냥 연습해봤습니다. 먼저 결과를 살펴보겠습니다.

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

이 플러그인이 구현하는 기능에 대해 간단히 이야기해보겠습니다

페이지에서 검색된 모든 콘텐츠가 배경에 표시됩니다. 이 플러그인은 콘텐츠를 페이지 단위로 표시할 수 있도록 제어해야 합니다. 이전 페이지, 다음 페이지, 홈 페이지, 마지막 페이지 기능이 있습니다. 첫 번째 페이지에서는 이전 페이지와 홈 페이지를 숨겨야 합니다. 마지막 페이지, 마지막 페이지, 다음 페이지를 숨겨야 합니다. 한 번에 몇 개의 버튼만 표시되며 마지막 버튼을 클릭하면 다음 몇 개의 버튼이 표시됩니다.

인코딩 과정에 대해 간단히 이야기하자면:

우선 다음과 같은 코드를 과감하게 작성해 주시면 됩니다.

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

로그인 후 복사

이 코드는 모든 사람에게 친숙할 것입니다. 이는 JavaScript의 신 수준의 기능인 클로저입니다. 이는 jQuery 플러그인의 일반적인 구조이기도 합니다. 클로저를 사용하여 jQuery의 공통 구조를 만드는 이유는 한편으로는 내부 임시 변수가 전역 공간에 영향을 미치는 것을 방지할 수 있고 플러그인 내에서 jQuery의 별칭으로 $를 계속 사용할 수 있기 때문입니다.

다음 단계는 이 구조에 자신만의 메서드를 작성하는 것입니다. jQuery는 jQuery에서 메서드를 확장하는 두 가지 방법을 제공합니다. jQuery API를 열고 플러그인 메커니즘을 찾으면 두 가지 방법을 볼 수 있습니다

• 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 메소드를 추가하는 것과 같습니다. 호출할 때 jQuery.max()

와 같이 호출할 수 있습니다.

그럼 jQuery.fn이란 무엇일까요? jQuery 소스코드를 열어보면 jQuery.fn = jQuery.prototype인 것을 볼 수 있습니다. 그런 다음 jQuery.fn.extend는 jQuery에 멤버 함수를 추가하는 것과 같습니다.

이제 둘 사이의 차이점을 이해해야 합니다. 정적 메서드인 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는 페이징 플러그인에서 사용하는 메소드 이름이며, Navidid, 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) 

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

로그인 후 복사

다음 단계는 몇 가지 기본 기능을 구현하는 것입니다. 여기서는 그 중 두 가지를 추출하여 표시합니다.

//隐藏所有的导航按钮
$.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 플러그인의 기본 사항을 정리한 것입니다. ㅎㅎ 샤프 jQuery에서 발췌한 것입니다.

•플러그인의 권장 파일 이름은 jquery.[플러그인 이름].js입니다(예: jquery.color.js
• 모든 객체 메소드는 jQuery.fn 객체에 연결되어야 하며, 모든 전역 함수는 jQuery 객체 자체에 연결되어야 합니다.

•플러그인 내부에서 this는 내부 this가 DOM 요소를 가리키는 click() 메소드와 같은 일반적인 방법과 달리 선택기를 통해 현재 얻은 jQuery 객체를 가리킵니다

•this.each를 통해 모든 요소를 탐색할 수 있습니다
•모든 메소드 또는 함수 플러그인은 세미콜론으로 끝나야 합니다. 그렇지 않으면 압축 중에 문제가 발생할 수 있습니다. 일부는 보안을 강화하기 위해 플러그인 시작 부분에 세미콜론
을 추가합니다. •플러그인은 플러그인의 연결 가능한 작업을 보장하는 jQuery 개체를 반환해야 합니다. 플러그인이 문자열이나 배열 등과 같이 얻어야 하는 일부 수량을 반환해야 하는 경우를 제외하고는
•변수 이름 충돌을 피하기 위해 폐쇄 기술을 사용해 보십시오

jQuery 플러그인을 처음 작성하는 것이기 때문에 틀린 부분이 있을 수 있으니 양해 부탁드립니다.