Jquery 플러그인 학습 예제 1 플러그인 제작 지침 및 tableUI 최적화

Jquery 플러그인 학습 예제 1 플러그인 제작 지침 및 tableUI 최적화_jquery

WBOY

풀어 주다： 2016-05-16 18:30:44

원래의

1012명이 탐색했습니다.

1. jQuery 제작 방법부터 시작해 보겠습니다. jQuery는 확장 개발을 위한 두 가지 방법, 즉 다음과 같은 두 가지 방법을 제공합니다.
jQuery.extend(object); jQuery 클래스 자체를 확장하려면 클래스에 새 메서드를 추가합니다.
jQuery.fn.extend(object); jQuery 객체에 메서드를 추가합니다.
1.1, jQuery.fn.extend(object):
예제는 jquery 참조 매뉴얼을 참조하세요:

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

 
$.fn.extend({ 
check: function() { 
return this.each(function() { this.checked = true; }); 
}, 
선택 취소: function() { 
return this.each(function() { this.checked = false; }); ; 

 
사용: 

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

$(" input[type=checkbox]").check();

$("input[type=radio]").uncheck() 

1.2, jQueryjQuery .extend(object)

jQuery 객체 자체를 확장합니다. jQuery 네임스페이스에 새 기능을 추가하는 데 사용됩니다.
jQuery 코드:

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

$.extend ({

min: function(a, b) { return a < b ? a : b; }, 
max: function(a, b) { return a > b ? a : b; } 
} ; >$.min(2,3); // => 2 
$.max(4,5) // => 5 

2. 특정 플러그인 예 코드는 다음과 같습니다. 

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

* tableUI 0.2 
* 저작권에 대해서는 쓰지 마세요. 하하
* 날짜: 2010년 4월 1일 
* tableUI를 사용하면 사용자 경험을 위한 테이블 프롬프트를 쉽게 표시할 수 있습니다. 제공되는 첫 번째 기능은 홀수 행과 짝수 행의 색상 변경으로, 마우스를 위로 움직일 때 강조 표시됩니다. 

* 버전 0.2에서는 학습 목적으로 25가지 팁을 기반으로 "정치 위원"에 대한 일부 최적화가 이루어졌습니다. 정정해줘.
*/
(function($) {

$.fn.tableUI = function(options) { //기본 매개변수var defaults = { evenRowClass: "evenRow" , oddRowClass: "oddRow", activeRowClass: "activeRow" };

//전달된 매개변수로 기본값을 재정의합니다.

options = $.extend(defaults, options); 
//테이블 객체
var thisTable = $(this); 
//홀수 및 짝수 행 색상 추가
thisTable.find("tr:even").addClass(options.evenRowClass); 
thisTable.find("tr:odd").addClass(options.oddRowClass); 
//마우스 이동 이벤트를 바인딩하므로 이벤트를 각 행에 바인딩할 필요가 없습니다. 
thisTable.live(" mouseover", function(e) { 
//마우스가 가리키는 대상 객체의 상위 tr 가져오기 
$(e.target).parent().addClass(options.activeRowClass); 
/ /이벤트 버블링 방지
return false; 
}).live("mouseout", function(e) { 
$(e.target).parent().removeClass(options.activeRowClass); 
 false를 반환합니다. 
}); 
})(jQuery);