Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12

[jQuery] 플러그인 만들기 (1)

아래 구현을 참고하면 도움이 될 거다.<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ //플러그인 구현부 $.fn.alertThisText = function(){ alert(this.text()); } //플러그인 테스트 $('.alertThisText').click(function(){ $('.test').alertThisText(); }); }); </script> <style> .test{ width: 200px; height: 200px; text-align: center; padding-top: 50px; background: #eee;} </style> <div class="test"> abcdefg </div> <input type="button" class="alertThisText" value="test"/>   코드는 간단하다. $.fn.플러그인함수이름 = function(){} 형식이다. 파라미터를 받도록 […]

아래 구현을 참고하면 도움이 될 거다.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//플러그인 구현부
$.fn.alertThisText = function(){
alert(this.text());
}

//플러그인 테스트
$('.alertThisText').click(function(){
$('.test').alertThisText();
});

});
</script>
<style>
.test{ width: 200px; height: 200px; text-align: center; padding-top: 50px; background: #eee;}
</style>
<div class="test">
abcdefg
</div>
<input type="button" class="alertThisText" value="test"/>


 


코드는 간단하다. $.fn.플러그인함수이름 = function(){} 형식이다. 파라미터를 받도록 할 셈이면 아래처럼 쓴다.

$.fn.플러그인함수이름 = function(파라미터){
//구현부. this는 함수를 호출한 jQuery객체가 된다.
}

참 쉽다.

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다