뭐.. 이제와서 사용자 정의 메소드를 만들어 보는게 참.. 거시기 합니다만.. 언제까지나 따라하기 신공으로는 필요한 모든걸 충족하기 힘들잖습니까?
jQuery 확장 메소드작성시 항상 주의해야 하는것은.
- jQuery 확장 메소드는 jQuery 확장 집합을 반환해 주는것이 좋다.
- jQuery 의 별칭인 $는 다른 javascript framework에서도 사용중이며, $.noConflict() 함수를 사용할수 있다.
- 매개변수의 전달을 최소화하라.(기본값을 사용하라)
(function($){
})(jQuery);
위와 같은 준비 코드를 작성하라.
위의 코드는 주의 2 jQuery의 별칭인 $를 다른 javascript framework에서도 사용하고 있다는 예외 사항을 대비한 코드이다.
매개변수로 전달된 $는 jQuery 의 별칭임을 나타낸다.
hoverTable을 사용하기 위하여 함수를 선언하여 보자.
(function($){
$.fn.hoverTable = function(option){ //확장 메서드 선언
};
})(jQuery);
우선 이름은 hoverTable로 지었다.
특별히 설명할 부분은 없는듯 하니 다음으로 넘어가자.
다음은 매개변수은 option을 설정한다.
(function($){
$.fn.hoverTable = function(option){ //확장 메서드 선언
var options = $.extend( { //기본 옵션 설정
"thead" : "thead",
"tbody" : "tbody",
"oddClass" : "odd",
"evenClass" : "even",
"hoverClass" : "hover"
},option || {});
};
})(jQuery);
위와 같은 방법으로 option의 값에 기본값을 설정하였다.
- thead: thead 태그의 스타일
- tbody : tbody 태그의 스타일
- oddClass : tbody의 홀수 번째 tr의 스타일
- evenClass : tbody의 짝수 번째 tr의 스타일
- hoverClass : tbody의 마우스가 올라간 tr의 스타일
(function($){
$.fn.hoverTable = function(option){ //확장 메서드 선언
var options = $.extend( { //기본 옵션 설정
"thead" : "thead",
"tbody" : "tbody",
"oddClass" : "odd",
"evenClass" : "even",
"hoverClass" : "hover"
},option || {});
return this.each(function(){ // 여러개의 확장 집합에 대한 처리후 확장집합을 반환
});
};
})(jQuery);
위와 같이 return 을 사용하여 반복문 this.each 를 실행하면 jQuery 확장 집합을 반환 할 수 있다.
(function($){
$.fn.hoverTable = function(option){ //확장 메서드 선언
var options = $.extend( { //기본 옵션 설정
"thead" : "thead",
"tbody" : "tbody",
"oddClass" : "odd",
"evenClass" : "even",
"hoverClass" : "hover"
},option || {});
return this.each(function(){ // 여러개의 확장 집합에 대한 처리후 확장집합을 반환
$(this).find('thead tr').addClass(options.thead); // 테이블 헤더 클래스 정의
$(this).find('tbody').addClass(options.tbody); // 테이블 헤더 클래스 정의
$(this).find('tbody tr:nth-child(odd)').addClass(options.oddClass); // 테이블 헤더 클래스 정의
$(this).find('tbody tr:nth-child(even)').addClass(options.evenClass); // 테이블 헤더 클래스 정의
});
};
})(jQuery);
위의 추가된 4줄의 코드로 헤더와 body 의 홀수, 짝수 번째 줄의 스타일을 할당하였다.
기본적인 모양은 끝 났으니 이제 hover 동작을 넣어 보도록 하자.
(function($){
$.fn.hoverTable = function(option){ //확장 메서드 선언
var options = $.extend( { //기본 옵션 설정
"thead" : "thead",
"tbody" : "tbody",
"oddClass" : "odd",
"evenClass" : "even",
"hoverClass" : "hover"
},option || {});
return this.each(function(){ // 여러개의 확장 집합에 대한 처리후 확장집합을 반환
$(this).find('thead tr').addClass(options.thead); // 테이블 헤더 클래스 정의
$(this).find('tbody').addClass(options.tbody); // 테이블 헤더 클래스 정의
$(this).find('tbody tr:nth-child(odd)').addClass(options.oddClass); // 테이블 헤더 클래스 정의
$(this).find('tbody tr:nth-child(even)').addClass(options.evenClass); // 테이블 헤더 클래스 정의
function hover(event){ // 마우스 over / out 동작 function 정의
$(event.target.parentNode).toggleClass(options.hoverClass);
}
$(this).find('tbody tr').mouseover(hover); // mouseover 이벤트 설정
$(this).find('tbody tr').mouseout(hover); // mouseout 이벤트 설정
});
};
})(jQuery);
위의 코드에서 mouseover, mouseout 이라는 두 jQuery Event Helfer Method를 사용하였다.
$(this).find('tbody tr').mouseover(hover); // mouseover 이벤트 설정
$(this).find('tbody tr').mouseout(hover); // mouseout 이벤트 설정
은 다음과 같이 수정이 가능하다.
$(this).find('tbody tr').hover(hover,hover);
웹접근성을 고려 하여 위의 기능에서 하나를 더 추가해보자.
일반적으로 토글 버튼의 경우 토글 된 상태에서는 기능이 변경이 된다.
따라서 이미지의 alt 태그의 값도 함께 변경이 되어야 한다.
옵션을 추가 하였다.
talt : 토글상태의 이미지 ALT 값.
(function($){
$.fn.toggleImg = function(option){
var options = $.extend( {
"tsrc" : null,
"src" : null,
"thover" : null,
"hover" : null,
"alt": null,
"talt": null
},option || {});
var SetHover = function (obj,over, out)
{
if(over){
obj.unbind("mouseover");
obj.unbind("mouseout");
obj.bind("mouseover",function(){
obj.attr("src",over);
});
obj.bind("mouseout",function(){
obj.attr("src",out);
});
}
}
return this.each(function(){
var ele = $(this);
if( options.src === null) {options.src = ele.attr("src");}
if(options.alt === null){options.alt = ele.attr("alt");}
SetHover(ele,options.hover,options.src);
ele.toggle(function()
{
ele.attr("src",(options.thover)?options.thover:options.tsrc);
if(options.talt !== null){
ele.attr("alt",options.talt);
}
SetHover(ele,options.thover,options.thover);
},function()
{
if(options.talt !== null){
ele.attr("alt",options.alt);
}
ele.attr("src",(options.hover)?options.hover:options.src);
SetHover(ele,options.hover,options.src);
});
return this;
});
}
})(jQuery);
$.fn.toggleImg = function(option){
var options = $.extend( {
"tsrc" : null,
"src" : null,
"thover" : null,
"hover" : null,
"alt": null,
"talt": null
},option || {});
var SetHover = function (obj,over, out)
{
if(over){
obj.unbind("mouseover");
obj.unbind("mouseout");
obj.bind("mouseover",function(){
obj.attr("src",over);
});
obj.bind("mouseout",function(){
obj.attr("src",out);
});
}
}
return this.each(function(){
var ele = $(this);
if( options.src === null) {options.src = ele.attr("src");}
if(options.alt === null){options.alt = ele.attr("alt");}
SetHover(ele,options.hover,options.src);
ele.toggle(function()
{
ele.attr("src",(options.thover)?options.thover:options.tsrc);
if(options.talt !== null){
ele.attr("alt",options.talt);
}
SetHover(ele,options.thover,options.thover);
},function()
{
if(options.talt !== null){
ele.attr("alt",options.alt);
}
ele.attr("src",(options.hover)?options.hover:options.src);
SetHover(ele,options.hover,options.src);
});
return this;
});
}
})(jQuery);
여기저기 바뀐곳이 있으나.. 빨간 부분만 보면 될 것 같다.