"JQuery 플러그인 만들기"의 두 판 사이의 차이

(새 문서: ;How to Create a jQuery Plugin ;jQuery 플러그인 생성 ==예시== <source lang='html5'> <script src="//code.jquery.com/jquery.min.js"></script> <script> $.fn.yellowify = function...)
 
2번째 줄: 2번째 줄:
;jQuery 플러그인 생성
;jQuery 플러그인 생성


==예시==
==예시 1: 기본==
<source lang='html5'>
<source lang='html5'>
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
<script>
$.fn.yellowify = function() {
$.fn.redify = function() {
     this.css( "background", "yellow" );
     this.css( "color", "red" );
};
};


$(function() {
$(function() {
     $('#greet').yellowify();
     $('#greet').redify();
});
});
</script>
</script>
18번째 줄: 18번째 줄:
</source>
</source>
<jsfiddle>p8e5rn89</jsfiddle>
<jsfiddle>p8e5rn89</jsfiddle>
==예시 2: 체인==
<source lang='html5'>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$.fn.redify = function() {
    this.css( "color", "red" );
    return this;
};
$.fn.greenBack = function() {
    this.css( "background", "green" );
    return this;
};
$(function() {
    $('#greet').redify().greenBack();
});
</script>
<div id='greet'>안녕</div>
</source>
<jsfiddle>47643v7t</jsfiddle>


==참고 자료==
==참고 자료==

2015년 8월 4일 (화) 15:42 판

How to Create a jQuery Plugin
jQuery 플러그인 생성

1 예시 1: 기본

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$.fn.redify = function() {
    this.css( "color", "red" );
};

$(function() {
    $('#greet').redify();
});
</script>

<div id='greet'>안녕</div>

2 예시 2: 체인

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$.fn.redify = function() {
    this.css( "color", "red" );
    return this;
};
$.fn.greenBack = function() {
    this.css( "background", "green" );
    return this;
};

$(function() {
    $('#greet').redify().greenBack();
});
</script>

<div id='greet'>안녕</div>

3 참고 자료

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}