>  기사  >  웹 프론트엔드  >  Jquery 플러그인 학습 예제 1 플러그인 제작 지침 및 tableUI 최적화_jquery

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

WBOY
WBOY원래의
2016-05-16 18:30:441028검색

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);
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.