jQuery 플러그인 개발 방법을 알아보려면 저를 따라오세요(전체 예제 및 다운로드 포함)_jquery

많은 회사의 프런트 엔드 디자이너와 개발자는 소녀이며, 이들 소녀의 JavaScript 기술 중 상당수는 그다지 좋지 않습니다. 프론트엔드 개발 과정에서는 JavaScript 기술이 필수적입니다. 따라서 작은 프런트 엔드 소녀가 특정 JavaScript 효과에 대해 걱정하고 있다면 거기로 가서 그녀에게 "안녕하세요, 이것을 사용하세요. 이것은 제가 작성한 jQuery 플러그인입니다. 기본적으로 당신은 전공이라고 생각합니다." 인생의 사건은 신속하게 해결될 수 있습니다.
먼저 어떤 함수를 만들 것인지 생각해보세요
이것이 첫 번째 단계이자 매우 중요한 단계이기도 합니다. 우리 모두 이제 막 jQuery 플러그인 작성을 배우는 단계이므로 이 함수는 반드시 작성해야 합니다. 더 간단해지세요. 뚱뚱한 남자를 한 입에 먹을 생각은 하지 마세요. 우리도 먹을 수 없어요. 얇은 것부터 시작해 보겠습니다. 하지만 이 기능은 너무 지루하면 안 되고, 너무 지루해서 거의 쓸모가 없다면, 다 한다고 해도 변기에 던져질 뿐이고, 지속적으로 업데이트도 되지 않고, 지속적인 개선도 없을 것입니다.
마지막으로 선택한 것은 테이블을 아름답게 꾸미고, 테이블의 홀수 행과 짝수 행을 서로 다른 색상으로 만든 다음 특정 행 위로 마우스를 이동하여 강조 표시하는 것이었습니다. 기능은 간단하고 실용적이며 좋습니다. 하하~~
서두르지 말고 구현원리를 먼저 생각하세요
서두르지 말고 구현원리를 먼저 생각하세요. 필요한 경우 먼저 간단한 구현 프로토타입을 작성하세요.
테이블을 아름답게 만드는 방법의 구현 원리는 간단합니다. 테이블의 홀수 행과 짝수 행을 찾은 다음 다른 클래스를 추가하는 것만으로도 마우스 오버를 결정하는 것이 매우 간단합니다. 이벤트를 추가한 다음, mouseout 클래스를 추가하세요. 때가 되면 이 클래스를 제거하세요.
일반 프레임워크
자신의 jQuery 플러그인을 작성하기 전에 다른 사람이 작성한 플러그인을 연구하는 것은 당연합니다. 사실, 기본적으로 jQuery를 작성하기 위한 일반적인 프레임워크가 있습니다. 좋습니다. 이 프레임워크도 복사해 보겠습니다.

코드 복사 코드는 다음과 같습니다.

(함수($){
$.fn .yourName = function(options){
//다양한 속성 및 매개변수
}
var options = $.extend(defaults, options)
this.each(function(){
//플러그인 구현 코드
});
})(jQuery)

이것을 넣으면 됩니다.

이름, 매개변수 및 속성 드디어 세상에 들어갈 시간입니다. 그래야만 세상에서 강력하고 위엄을 발휘할 수 있습니다. 믿을 수 없다면 "중국 치과 예방 그룹"을 들어보세요! 그러므로 우리는 여기에서 울려퍼지는 이름, 즉 단순하고 명확하며 충분히 권위 있는 이름을 가져야 합니다. 그래서 "tableUI"라고 부르기로 결정했습니다!
매개변수와 속성도 매우 간단하며 세 가지 클래스의 이름만 있으면 됩니다. evenRowClass,oddRowClass 및 activeRowClass로 호출하면 됩니다.
그럼 위 프레임에 상체를 채워보겠습니다.

코드 복사 코드는 다음과 같습니다.

(함수($){
$.fn .tableUI = function(options){
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
}
var options = $.extend(defaults, options);
this.each(function(){
//구현 코드
})
})(jQuery) ;


이 문장에 집중하겠습니다:

코드 복사 코드는 다음과 같습니다.

var options = $.extend(defaults, options);

이 문장은 매우 멋져 보이지만 실제로는 여러 개체를 하나로 병합합니다. 여기서는 호출할 때 새 매개변수를 작성하면 새 매개변수가 사용됩니다. 그렇지 않으면 기본 매개변수가 사용됩니다. 더 알고 싶은 친구들은 jquery 공식 문서를 참고하세요:

http://api.jquery.com/jQuery.extend/
하체부터 시작해 보겠습니다
자, 상체가 채워졌으니 하체를 채워보겠습니다. 이는 기본 행과 짝수 행을 찾은 다음(매우 간단하게 만드는 tr:even과 같은 작성 방법을 제공하는 jQuery 덕분에) 해당 클래스를 추가하는 것 이상입니다. 그런 다음 mouseover 및 mouseout 이벤트를 모든 tr에 바인딩합니다. 하체의 코드는

코드 복사 코드는 다음과 같습니다

(함수($){
$.fn.tableUI = 함수(옵션){
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow" ,
activeRowClass:"activeRow"
}
var options = $.extend(defaults, options)
this.each(function(){
var thisTable=$(this);
//홀수 및 짝수 행 색상 추가
$(thisTable).find("tr:even").addClass(options.evenRowClass)
$(thisTable).find("tr:odd" ).addClass(options.oddRowClass);
//활성 행 색상 추가
$(thisTable).find("tr").bind("mouseover",function(){
$(this) .addClass (options.activeRowClass)
});
$(thisTable).find("tr").bind("mouseout",function(){
$(this).removeClass(options .activeRowClass );
});
})(jQuery)

어쩌면 어떤 친구들은 이것이 끝났다고 생각할 수도 있습니다. 그러나 그 반대로 완료해야 할 가장 중요한 단계는 여전히 남아 있습니다. 즉, 플러그 위에 플러그인 이름, 버전 번호, 완료 날짜, 작성자, 작성자 연락처 정보, 생년월일, 측정값 등을 적는 것입니다. -안에. 그래야만 이 플러그인이 충분히 전문적으로 보일 수 있기 때문입니다.

코드 복사 코드는 다음과 같습니다. /*

* tableUI 0.1

* Copyright (c) 2009 JustinYoung http://justinyoung.cnblogs.com/
* 날짜: 2010-03-30
* tableUI를 사용하면 사용자 경험을 위한 테이블 프롬프트를 쉽게 제공할 수 있습니다. 제공되는 첫 번째 기능은 홀수 행 색상과 짝수 행 색상을 교대로 표시하는 것입니다.
*/
(function($){
$.fn.tableUI = function(options){
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
}
var options = $.extend(defaults, options);
this .each(function(){
var thisTable=$(this);
//홀수 및 짝수 행 색상 추가
$(thisTable).find("tr:even"). addClass(options.evenRowClass) ;
$(thisTable).find("tr:odd").addClass(options.oddRowClass)
//활성 행 색상 추가
$(thisTable).find( "tr").bind ("mouseover",function(){
$(this).addClass(options.activeRowClass);
})
$(thisTable).find("tr") .bind("mouseout" ,function(){
$(this).removeClass(options.activeRowClass);
})
})(jQuery );



데모 주소

인스턴스 다운로드 주소