jQuery PlugIn - 새로운 함수를 만들기
.NET프로그래밍/jQuery 1.3.2 2009. 11. 17. 13:39 |
[Replace.htm]
<!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 src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
// 함수 확장 : 나만의 jQuery 메서드 만들기
// 넘겨온 값(jQuery개체)을 새로운 HTML로 대체
$.fn.replaceWith2010 = function(html) {
return this.after(html).remove(); // 넘겨온 HTML로 대체 후 기존 값 제거
};
$.fn.Exec = function(a, b) {
var r = a + " * " + b + " = " + (a * b); // 계산식 문자열 생성
return this.empty().append(r); // 지정된 개체의 내용 비우고, 문자열 추가
};
$(document).ready(function() {
$('#btn1').click(function() {
$('#my').empty();
$('#my').append("<h3>반갑습니다.</h3>");
});
$('#btn2').click(function() {
// 없었던 함수(메서드)가 생성
$('#my').replaceWith2010("<div id='my'><h3>또 만나요.</h3></div>");
});
$('#calc').Exec(3, 5); // calc 레이어에 "3 * 5 = 15"를 출력하는 함수 확장
$('#calc').replaceWithCalc("<div id='calc'><h3>3 * 5 = 15</h3></div>");
});
</script>
</head>
<body>
<input type="button" id="btn1" value="값 변경" />
<input type="button" id="btn2" value="값 변경" />
<div id="my">
<h3>안녕하세요.</h3>
</div>
<div id="calc"></div>
</body>
</html>
-------------------------------------------------------------------------------------
[실행결과]
'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글
| 체크박스 전체선택 및 해제 (0) | 2009.11.17 |
|---|---|
| jQuery PlugIn - 사진 상세 보기 플러그인 제작 (나만의 플러그인) (0) | 2009.11.17 |
| jQuery 플러그인(PlugIn)의 정의 (0) | 2009.11.17 |
| jQuery UI - 탭(Tabs) 컨트롤 (0) | 2009.11.17 |
| jQuery UI - 아코디언(Accordion) 컨트롤 (0) | 2009.11.17 |