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

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);