jquery 플러그 인 제작 튜 토리 얼 txtHover
4499 단어 jquery 플러그 인
이 시 리 즈 는 제 가 < jQuery Plugin Development Beginner 's Guide > 를 읽 고 정리 한 것 입 니 다. 관심 있 는 분 들 은 원판 책 을 읽 으 셔 도 됩 니 다.
플러그 인의 구조 골격 정의:
책 에서 가장 먼저 사용 한 구조 구 조 는 다음 과 같다.
jQuery.fn.fluginmane=function(){
return this.each(function(){
//code...
})
}
이러한 구 조 는 그다지 이상 적 이지 않다. 특히 책 에 서 는 충돌 예 를 방지 하기 위해 $를 사용 하지 않 고 jQuery 를 사용한다 고 언급 했다.여기 서 우 리 는 익명 함수 의 방식 으로 플러그 인의 구조 구 조 를 실현 하면 가능 한 충돌 을 방지 할 수 있다.익명 함수 에 대한 지식 도 잘 알 아 보 셨 으 면 좋 겠 습 니 다.
(function($){
$.fn.fluginname=function(){
return this.each(function(){
//code...
});
}
})(jQuery);
주의 점:
1. 통일 과 규범 을 위해 서 우리 의 플러그 인 파일 은 jquery. fluginname. js 형식 으로 이름 을 지 을 것 입 니 다 (fluginname 은 플러그 인의 이름 을 대표 합 니 다).
2. 우리 가 사용 하 는 함 수 는 모두 개인 적 인 것 이 어야 합 니 다. 외부 에 접근 할 수 없습니다. 그러면 플러그 인 이 외부의 영향 과 방 해 를 받 지 않도록 보장 할 수 있 습 니 다 (익명 함 수 는 이미 이 점 을 보장 합 니 다).
3. options 를 사용 하여 플러그 인의 행동 을 제어 할 수 있 도록 합 니 다.
4. 기본 options 는 외부 접근 을 허용 합 니 다. 사용자 가 최소한 의 코드 로 사용자 정의 할 수 있 습 니 다.
5. this. each () 는 요구 에 부 합 된 모든 대상 을 옮 겨 다 닙 니 다. 그 자 체 는 jquery 대상 이 고 플러그 인 은 마지막 으로 이 대상 을 되 돌려 줍 니 다.사실 이런 방식 을 통 해 자 바스 크 립 트 의 체인 모드 를 실현 했다.
우리 의 첫 번 째 플러그 인: txt Hover
1. 코드 구현:
(function($){
$.fn.txtHover=function(){
return this.each(function(){
$(this).text('text changed!');
});
}
})(jQuery);
2. 어떻게 사용:
html 파일 을 만 들 고 jquery 와 플러그 인의 인용 을 추가 합 니 다. 코드 는 다음 과 같 습 니 다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.txtHover.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#test').txtHover();
});
</script>
</head>
<body>
<div id="test">
this is test.</div>
</body>
</html>
hover 이벤트 추가:
(function ($) {
$.fn.txtHover = function () {
return this.each(function () {
var temp = $(this).text();
$(this).hover(function () {
$(this).text('text changed!');
}, function () {
$(this).text(temp);
});
});
}
})(jQuery);
첫 번 째 버 전 은 페이지 로 딩 이 끝 난 후에 div 의 내용 이 수정 되 었 습 니 다. 이런 디자인 은 별로 쓸모 가 없습니다.우리 가 가장 자주 사용 하 는 것 은 마우스 가 문자 위로 옮 겨 질 때 약간의 변화 가 생 긴 다 는 것 이다.개 선 된 플러그 인 에 hover 이벤트 가 추가 되 었 습 니 다.우선, div 의 원본 값 을 변수 temp 에 저장 합 니 다. 마우스 가 div 위로 이동 할 때 텍스트 가 바 뀌 고 마우스 가 이동 할 때 텍스트 를 바 꿉 니 다.
사용자 정의 옵션 추가
사용자 가 더욱 유연 하 게 사용 할 수 있 도록 사용자 정의 기능 을 추가 해 야 합 니 다. 플러그 인 코드 수정:
(function ($) {
$.fn.txtHover = function (options) {
var defaults = { txt: 'text changed!' };
var opt = $.extend(defaults, options);
return this.each(function () {
var self = $(this);
var temp = self.text();
self.hover(function () {
self.text(opt.txt);
}, function () {
self.text(temp);
});
});
}
})(jQuery);
플러그 인 은 기본 텍스트 정 보 를 설정 하 는 변수 defaults 를 정의 합 니 다.저 희 는 $extend () (이 함 수 를 모 르 는 친 구 는 자 료 를 찾 아 볼 수 있 습 니 다) 방법 으로 새로운 변 수 를 확장 하 였 습 니 다. 만약 에 사용자 가 들 어 오 는 options 변수 가 txt 를 포함 하면 opt 는 사용자 가 들 어 오 는 것 을 사용 합 니 다. 그렇지 않 으 면 시스템 기본 값 을 사용 합 니 다.우 리 는 시스템 에서 var self = $(this) 를 정의 하여 this 대상 을 대체 합 니 다.this 는 javascript 에서 매우 짜증 나 는 대상 입 니 다. 서로 다른 함수 컨 텍스트 에서 대표 하 는 대상 이 다 를 수 있 습 니 다. this 를 다른 변수 에 전달 하면 프로그램 에 오류 가 발생 하지 않도록 할 수 있 습 니 다.익숙 하지 않 은 친 구 는 이 지식 을 잘 파악 할 필요 가 있다.
사용자 가 html 페이지 에서 플러그 인 을 호출 할 때 div 위로 마 우 스 를 옮 길 때의 텍스트 내용 을 사용자 정의 할 수 있 습 니 다.
$(document).ready(function () {
$('#test').txtHover({ txt: 'test' });
});자, 오늘 의 예 는 여기까지 입 니 다.
좋은 웹페이지 즐겨찾기
