넷빈에서 jquery 사용하기-basic

Written on 오전 8:17 by 강여사(J.Y.Kang)

이번에는 넷빈 6.7.1에서 jquery(ajax framework)를 사용해보도록 하겠습니다.
이 시리즈는 일단 기본 jquery와 나중에 jmaki-jquery 로도 살펴볼 예정입니다.

우선 프로젝트를 새로 만듭니다.
new project

java web - web application
프로젝트 이름은 적당히 (jqueryproject)

경로도 적당히 - 다음 클릭

서버는 웹 지원이면됩니다. (저는 glassfish v3 선택)
마침

그럼 이번 프로젝트에서 사용할 jquery 다운로드를 위해 jquery 사이트로

http://jquery.com/

사이트의 오른쪽에 보면 download 버튼이 있고, 그 위에 2가지 형태로 공급

2번째의 development 를 체크하고 다운로드 버튼을 누르면 다운로드 사이트로 진행됩니다.

jquery-1.3.2.js 다운
스크립트 파일들을 저장할 공간으로 폴더를 새로 만듬

프로젝트에서 new - folder 폴더 이름은 js

경로는 browse 버튼을 눌러 web 아래로 위치
확인후 마침 클릭
그럼 만들어진 js 폴더에 아까 다운로드 받은 파일을 복사해 놓는다(이 작업은 탐색기에서 프로젝트 폴더로 직접 한다)

스크립트 추가

헤드부분에 jquery 스크립트 추가 - 그림 참고

==============================================
$(document).ready(function(){
$("h1").click(function(){
$(this).addClass("blue");
});
});
==============================================
<style type="text/css">
.blue { color: blue; }
</style>
=============================================

실행(run file)

나타난 화면에서 JSP Page 를 클릭하면 파란색으로 바뀜

addClass("blue"). <- 점을 찍으면 아래 그림과 같이 api가 제공된다. fadeOut("slow")를 선택

기타 여러 사항 추가

==============================
$(document).ready(function(){
$("h1").click(function(){
$(this).addClass("blue").fadeOut("slow");
});
$("a").click(function(event){
alert("나~자바~봐~~~라");
event.preventDefault();
$(this).hide("slow");
});
});
====================================

팁) 만약 메소드들에 있어 브라우저 호환때문에 경고메시지가 뜨거나 함수들에 줄이 그어져있으면 브라우저 설정을 변경한다.

도구-옵션-기타-JavaScript 에서 internet explorer 7 and later 로 변경 - OK

이번에는 jquery의 UI 중 하나인 accordion을 사용해보자.

우선 다음 사이트에서 UI 관련파일을 다운로드한다.

http://jqueryui.com/download (적당한 경로에 다운로드후 압축을 푼다) 스타일 작업 추가 - 그림 참조
UI 아코디온을 위한 자바스크립트 추가 - 2개 - 그림 참고
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/ui.accordion.js"></script>
============================================
바디부분에 어코디온 내용 추가
div id="infolist">
<h3><a href="#">Mary Adams</a></h3>
<div>
<img src="pix/maryadams.jpg" alt="Mary Adams">
<ul>
<li><h4>Vice President</h4></li>
<li><b>phone:</b> x8234</li>
<li><b>office:</b> 102 Bldg 1</li>
<li><b>email:</b> m.adams@company.com</li>
</ul>
<br clear="all">
</div>
<h3><a href="#">John Matthews</a></h3>
<div>
<img src="pix/johnmatthews.jpg" alt="John Matthews">
<ul>
<li><h4>Middle Manager</h4></li>
<li><b>phone:</b> x3082</li>
<li><b>office:</b> 307 Bldg 1</li>
<li><b>email:</b> j.matthews@company.com</li>
</ul>
<br clear="all">
</div>
<h3><a href="#">Sam Jackson</a></h3>
<div>
<img src="pix/samjackson.jpg" alt="Sam Jackson">
<ul>
<li><h4>Deputy Assistant</h4></li>
<li><b>phone:</b> x3494</li>
<li><b>office:</b> 457 Bldg 2</li>
<li><b>email:</b> s.jackson@company.com</li>
</ul>
<br clear="all">
</div>
<h3><a href="#">Jennifer Brooks</a></h3>
<div>
<img src="pix/jeniferapplethwaite.jpg" alt="Jenifer Applethwaite">
<ul>
<li><h4>Senior Technician</h4></li>
<li><b>phone:</b> x9430</li>
<li><b>office:</b> 327 Bldg 2</li>
<li><b>email:</b> j.brooks@company.com</li>
</ul>
<br clear="all">
</div>
</div>
============================================

전체코드
===========================================
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery Test</title>
<script type="text/javascript" src="js/jquery-1.3.2.js" ></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/ui.accordion.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("h1").click(function(){
$(this).addClass("blue").fadeOut("slow");
});
//$("a").click(function(event){
// alert("나~자바~봐~~~라");
// event.preventDefault();
// $(this).hide("slow");
//});
$("#infolist").accordion({
autoHeight: false
});
});
</script>
<style type="text/css">
.blue { color: blue; }
</style>
<style type="text/css">
ul {list-style-type: none}
img {padding-right: 20px; float:left}
#infolist {width:500px}
</style>
<link rel="stylesheet" href="css/jquery-ui-1.7.2.custom.css" type="text/css">
</head>
<body>
<h1>JSP Page</h1>
<a href="http://jquery.com/">jQuery</a>
<div id="infolist">
<h3><a href="#">Mary Adams</a></h3>
<div>
<img src="pix/maryadams.jpg" alt="Mary Adams">
<ul>
<li><h4>Vice President</h4></li>
<li><b>phone:</b> x8234</li>
<li><b>office:</b> 102 Bldg 1</li>
<li><b>email:</b> m.adams@company.com</li>
</ul>
<br clear="all">
</div>

<h3><a href="#">John Matthews</a></h3>
<div>
<img src="pix/johnmatthews.jpg" alt="John Matthews">
<ul>
<li><h4>Middle Manager</h4></li>
<li><b>phone:</b> x3082</li>
<li><b>office:</b> 307 Bldg 1</li>
<li><b>email:</b> j.matthews@company.com</li>
</ul>
<br clear="all">
</div>
<h3><a href="#">Sam Jackson</a></h3>
<div>
<img src="pix/samjackson.jpg" alt="Sam Jackson">
<ul>
<li><h4>Deputy Assistant</h4></li>
<li><b>phone:</b> x3494</li>
<li><b>office:</b> 457 Bldg 2</li>
<li><b>email:</b> s.jackson@company.com</li>
</ul>
<br clear="all">
</div>
<h3><a href="#">Jennifer Brooks</a></h3>
<div>
<img src="pix/jeniferapplethwaite.jpg" alt="Jenifer Applethwaite">
<ul>
<li><h4>Senior Technician</h4></li>
<li><b>phone:</b> x9430</li>
<li><b>office:</b> 327 Bldg 2</li>
<li><b>email:</b> j.brooks@company.com</li>
</ul>
<br clear="all">
</div>
</div>
</body>
</html>
================================================
pix폴더와 그 안에 이미지까지 복사해서 위치한 후 실행(run)
부가로, 스타일시트를 수정하기 위해 다운로드 받은 UI 압축 푼 폴더 중 css 폴더를 복사해서 프로젝트에 붙여넣습니다.