보통 우리는 게시판을 제작시, 2014-06-17 와 같은 형식으로 단순 표출을 한다.
우연히 소개할만한 플러그인들을 찾던도중 prettyDate 플러그인이 존재 하였다.
페이스북 경우 몇분전,몇시간전 등 눈에 조금더 보기 쉽게끔 처리를 해놓았다.
위사진을 보면 분/시간/어제/몇년전 등을 표출하기 쉽게 되있다!
더이상 게시판 목록 출력할때 2014-06-16 이런식의 게시물을 조금더 업그레이드 해보자!! 
우선 기존과 같이 파일을 다운로드 해보자
prettyDate download 및 데모사이트
http://bassistance.de/jquery-plugins/jquery-plugin-prettydate/
해당 주소에서 조금만 내리다 보면 Download 문구가 있다 클릭해서 파일을 받도록 하자!
압축을 풀면 폴더내에 jquery.prettydate.js 가 핵심이다!
하지만 영문판이므로 한글판은 임의로 만들었다!
허접하지만 필요하신분은 사용하시길 .... 뭐 맘에 안드시면 변경하셔두 되구.. 
한글판 첨부파일
jquery.prettydate-kr.js그럼 프로젝트 생성하시고 pretty_date 폴더 생성하여
그 하단에
jquery.prettydate.js와 첨부한 jquery.prettydate-kr.js
를 넣고 진행하자
include 되야 할 파일은 상단 2개 전에 추가로 jquery.js파일도 include해줘야 한다.
jquery 파일이 없으신분은 CDN을 이용하시길...
우선 JAVA/JSP/PHP등 방식은 같지만 문법이 틀리니까 해당 포맷팅 부분은 언어별로 작성하시길..
본인은 index.jsp를 생성하고 상단에 스크립트릿으로 해당 소스를 작성했다.
//UTC 타임존설정
//해당 UTC 형식으로 포맷을 해줘야한다.
TimeZone tz = TimeZone.getTimeZone("UTC");
DateFormat df = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss'Z'");
df.setTimeZone(tz);
SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
//임의의 데이터 목록이다.
//게시판의 등록일이라 가정하자
ArrayList<Date> list = new ArrayList<Date>();
list.add(format.parse("2014-06-17 23:33:35"));
list.add(format.parse("2014-06-17 22:33:35"));
list.add(format.parse("2014-06-17 21:33:35"));
list.add(format.parse("2014-06-17 20:33:35"));
list.add(format.parse("2014-06-16 20:33:35"));
list.add(format.parse("2014-05-17 20:33:35"));
list.add(format.parse("2013-05-17 20:33:35"));
다음은 자바스크립트 부분이다.
$(function(){
//등록일이 표출되는 컬럼부
$('td.prettydate').prettyDate({
//true일경우 1분마다 갱
interval: true
});
});
마지막으로 body태그내에 table태그를 이용하여 등록일 row를 arrayList에 담은 임의의 날짜를 뽑아보도록 하겠다.
body태그 부분이다.
<table>
<%
for(Date d : list) {
%>
<tr>
<td class="prettydate" title="<%=df.format(d)%>"></td>
</tr>
<%
}
%>
</table>
위의 소스를 통합하여 실행한 결과화면이다!!
잘만 응용하면 페북따라하기 참~쉬울듯!!
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
'자바스크립트이야기 > jQuery플러그인소개' 카테고리의 다른 글
| [jQuery cookie] jquery로 쿠키($.cookie, $.removeCookie) 를 저장/불러오기/삭제해보도록 하자 (0) | 2014.08.18 |
|---|---|
| [jQuery ajax fileupload] ajax 파일업로드 (9) | 2014.06.26 |
| [jQuery jqGrid] 데이터 목록을 그리드로 좀더 깔끔하게 사용하기 (0) | 2014.06.13 |
| [jQuery validation] alert으로 validation 체크하는거 지겨우신가요? (0) | 2014.06.13 |
| [jQuery treeview] 트리메뉴를 만들어보자! (0) | 2014.06.11 |
지난 시간에는 html페이지를 만들어서 해당 url을 호출하여 화면에 비동기방식으로 뿌리는 것을 샘플링과 함께 설명을 했다.
파일타입은 html뿐만 아니라 jsp,php,asp 등 모든 웹소스 구동 페이지면
어느 언어건 상관이 없다 ㅎㅎ
오늘은 json타입으로 비동기 호출을 해보도록 할꺼임.
json은 data받아오고 각각의 구분자에 맞춰서 화면표출하는것 때문에 자주이용
한다.
json 타입으로 게시판을 작성하도 상관은없지만, 핸들링 해주는게 html타입보다는 불편함.
이번에는 다음과 같은 형태의 로직으로 샘플링을 짜도록 하겠다.
1. index.html - selectbox 1개, 버튼 1개가, ajax 화면을 뿌릴 div태그 1개
2. list1.json - flag : Y , data : '성공'
3. list2.json - flag : N , data : '실패'
위 3개의 소스의 가상로직은 데이터를 조회하다보면 데이터가 있고, 없는 경우가
있다.
예를들어 게시판의 검색같은?
솔직히 select 필요는 없지만 구분자를 통해 화면에 결과값을 나눠서 뿌리고자
json 파일을 두개 만들어보았다.
ajax에 대해서 14장에서 html 예를 들었으니 오늘은 그저 각각 통소스 샘플링만
공개하도록 하겠음.
1. index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#searchButton").click(function(){
var flag = $("#resultSelect").val();
//select box로 구분을 주었지만
//실질적으로는 내부로직에서 db조회하여 데이터가 있으면
//json 파싱하여 데이터 생성을 하고
//없으면 데이터 없음으로 파싱해야한다
if(flag == "Y") {
url = "/list1.json";
} else {
url = "/list2.json";
}
//비동기 통신을 하여 json타입으로 호출한다.
$.ajax({
url: url
, dataType : 'json'
, success: function(data) {
//result결과
//json객체의 flag가 Y이면 data라는 성공메시지를 result변수에 담는다.
if(data.flag == "Y"){
var result = data.data;
//json객체의 flag가 Y가아닌 그이후는 data라는 실패메시지를 result변수에 담는다.
} else {
var result = data.data;
}
//div태그에 html로 출력!!
$("#listLayout").html(data.data);
}
});
})
})
</script>
</head>
<body>
<select id="resultSelect">
<option value="Y">성공JSON</option>
<option value="N">실패JSON</option>
</select>
<input type="button" id="searchButton" value="조회" /><br/>
<div id="listLayout"></div>
</body>
</html>
2. list1.json 파일소스
{
"flag" : "Y",
"data" : "성공"
}
3. list2.json 파일소스
{
"flag" : "N",
"data" : "실패"
}
각 소스를 화면에 띄워서 실행하도록 해보자.
그리고 약간씩 변경을 하여 어떻게 저런식으로 결과물이 나오는지 이해를 하도록 하자!!
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
'자바스크립트이야기 > jQuery' 카테고리의 다른 글
| [jQuery 16장] 다른 도메인간 비동기 Ajax 통신을 해보자!! - JSONP방식 (2) | 2014.06.30 |
|---|---|
| [jQuery 14장] 비동기 Ajax 통신을 해보자!! - HTML방식 (6) | 2014.06.16 |
| [jQuery 13장] 동적으로 생성된 태그에 이벤트를 주자! (24) | 2014.06.16 |
| [jQuery 12장] 동적으로 태그 추가 및 태그를 문자자체로 표출하기 (2) | 2014.06.10 |
| [jQuery 11장] 태그속성값 가져오기 attr / prop (0) | 2014.06.10 |
주말에 쉬어서 글을 올리게 되었습니다 ㅎㅎ
보통 form태그에서 submit 처리 하면 화면이 깜박이면서 데이터 로딩후 화면에
표출된다.하지만, Ajax통신을 하게되면 화면에 깜박임을 찾아볼수가 없을 것이다!
말그대로 화면은 가만히 있는상태에서 뒷단에서 모든 데이터 처리를 하고 return값을 핸들링하면서 웹화면을 제어할 수 있다!
데이터 타입은 다양하다 html, json, jsonp, xml, javascript 등등..
이번장에서 다룰 내용은 html방식이다.
html페이지는 두개를 만들어서 ajax예제를 만들어보겠음!
첫번째 파일명은 index.html
두번째 파일명은 list.html
우선은 index페이지는 게시판 껍데기라고 해보자
언뜻보면 저번에 했던 변수에 html태그 만들어서 뿌리는 방식이 있는데 그거랑 비슷하다.
전에 했던거에 확장편이라고 생각하면 된다.
임의로 list객체에 데이터를 담아서 ajax통신을하여 url호출을 하여 데이터를 화면에 뿌려보도록 하자!!
index.html은 단순 리스트 출력을 할수 있는 출력버튼이 있고,
list.html페이지에는 임의로 테이블 태그로 리스트를 만들 태그들이 있다.
index.html페이지의 출력버튼 클릭시 특정 div레이아웃에 list.html페이지의 태그들을 넣어볼것이다.
우선스크립트 부분을 봅시다.
$(function(){
$("#listButton").click(function(){
$.ajax({
type: 'post'
, url: '/list.html'
, dataType : 'html'
, success: function(data) {
$("#listDiv").html(data);
}
});
})
})
html부분이다.
<input type="button" id="listButton" value="리스트출력" /> <br/> <div id="listDiv"></div>
버튼 클릭전 초기화면은 다음과 같다.
다음처름 버튼만 있는 페이지다.
list.html 페이지 코드를 보자
* 참고로 하단에 있는 소스가 풀소스다.
<html></html> / <title></title> / <body></body> 모든 태그들은 없다
<table> <tr> <td>abcsdkjfslkdfjsdf</td> </tr> <tr> <td>abcsdkjfslkdfjsdf</td> </tr><tr> <td>abcsdkjfslkdfjsdf</td> </tr> <tr> <td>abcsdkjfslkdfjsdf</td> </tr><tr> <td>abcsdkjfslkdfjsdf</td> </tr> <tr> <td>abcsdkjfslkdfjsdf</td> </tr><tr> <td>abcsdkjfslkdfjsdf</td> </tr> <tr> <td>abcsdkjfslkdfjsdf</td> </tr> </table>
막 코딩한거지만 게시판 목록이라고 하자!! ㅎㅎ
자이제 버튼 클릭하여 list.html 페이지를 호출해보자!!
출력화면이다.
나왔다! ㅎ
일반 form태그는 어떤 이벤트가 발생하고 데이터를 뿌리려면 화면이 깜박이고
페이지 url 이 변경이 될텐데 위에 캡처화면은 url 변경도 없이 데이터가 특정
클릭이벤트로 인하여 출력된다.
그리고 주의할점
흔히, ajax통신하는 list.html와 같은 페이지를 <html></html>등 모든 페이지를
작업을하고 ajax 호출을 하시는 분들이 계신다.
ajax html을 하면 index.html와 같이 호출 하는 부모페이지에 태그를 맞추자
index.html도 html/body태그가 있고, list.html에도 html/body태그가 있으면
좀 거시기 하지 않은가....
물론, 어찌하다보면 페이지는 나오지만 충분히 필요 없는 태그들은 빼도 되지 않을까... 가를 개인적인 생각이다...
샘플 코드를 한번 로컬에서 동작시켜서 이해를 하도록 하자!! ㅋ
list.html에 대한 결과를 받아오려면 $.ajax의 success 에 함수를 이용하여 파싱을 하도록 하자
success : function(data){} 에서의 data가 html태그가 나온다.
의심이 되면 alert(data)로 확인을 할수 있을 것이다.
다음에는 json객체를 파싱하여 ajax로 뽑아오자~
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
'자바스크립트이야기 > jQuery' 카테고리의 다른 글
| [jQuery 16장] 다른 도메인간 비동기 Ajax 통신을 해보자!! - JSONP방식 (2) | 2014.06.30 |
|---|---|
| [jQuery 15장] 비동기 Ajax 통신을 해보자!! - JSON방식 (8) | 2014.06.17 |
| [jQuery 13장] 동적으로 생성된 태그에 이벤트를 주자! (24) | 2014.06.16 |
| [jQuery 12장] 동적으로 태그 추가 및 태그를 문자자체로 표출하기 (2) | 2014.06.10 |
| [jQuery 11장] 태그속성값 가져오기 attr / prop (0) | 2014.06.10 |
지난 시간에 before/after/append/html등을 이용하여 동적으로 태그를 화면에
삽입했었다. 이렇게 동적으로 추가된 태그는 일반적인 이벤트가 동작되지 않는다.
예를 들어 다음 소스와 같이 코딩해보자
스크립트 부분
$(function(){
$("#makebtn").click(function(){
var dynamicTag = '<input type="button" id="btn" value="경고"/>';
$("body").html(dynamicTag);
})
$("#btn").click(function(){
alert("!");
})
})
html태그소스
<input type="button" id="makebtn" value="버튼생성"/>
다음화면은 '버튼생성'을 클릭하면 '경고'라는 버튼이 화면에 생성된다. 기존 버튼생성버튼은 없어지고 경고버튼이 생성이 되었다. 해당 경고버튼을 누를경우 alert이 떠야 정상인대, alert이 뜨지 않는다.
한번 위소스를 실행해보도록 하자!!! 
이유는 동적으로 생성된 태그는 별도의 이벤트 형식으로 지정 해줘야 한다.
예전버전에는 bind, live태그를 1.4.3 전버전에서 사용했는데 jquery사이트에서조차 live이벤트를 사용하지 말라고 하며, 1.4.3이후에는 delegate이벤트가 생겨 한동안 delegate 이벤트를 사용했었다.
하지만!! 1.7이후버전에는 on이벤트가 생겼다.
각각의 이벤트들의 단점이 있으니 on 이벤트가 1.7버전에 생겼겠으니!!
1.7이후버전에는 on 태그를 이용하도록 하자!
위에 소스중에서 한줄만 변경만 하면 이벤트가 동작한다.
바로.바로..바로...바로....!!!!
$("#btn").click(function(){ <<<< 이 부분이다.
$(document).on("click","#btn",function(){ <<< 요로케 바꿔보자 ㅎㅎㅎ
on태그 각각에 들어가는 parameter들은
첫번째 : click / change 등등의 이벤트
두번째 : 이벤트 적용할 타겟 태그
세번째 : 동작 함수
저형식으로 하면 동적으로 생성된 태그들에게 이벤트를 적용할수 있다!!!
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
'자바스크립트이야기 > jQuery' 카테고리의 다른 글
| [jQuery 15장] 비동기 Ajax 통신을 해보자!! - JSON방식 (8) | 2014.06.17 |
|---|---|
| [jQuery 14장] 비동기 Ajax 통신을 해보자!! - HTML방식 (6) | 2014.06.16 |
| [jQuery 12장] 동적으로 태그 추가 및 태그를 문자자체로 표출하기 (2) | 2014.06.10 |
| [jQuery 11장] 태그속성값 가져오기 attr / prop (0) | 2014.06.10 |
| [jQuery 10장]스크립트로 지정 태그에 클래스 적용하기 (0) | 2014.06.09 |
이번에는 jqGrid 는 jQuery UI 테마랑 연동이 되는거 같다.. 하지만 소개이니 간단히
설명과 샘플링을 해보도록 하겠음..
그리트 형태는 약간 엑셀? 이랑 비슷하다. 언뜻보면 FLEX의 그리드처럼 만들어 놓았다.
무료 그리드중에서는 jqGrid가 유명한거 같기도 하고...
어쨋든! jqGrid 다운로드부터 세팅까지 진행을 해보자~
jqGrid 다운로드
http://www.trirand.com/blog/?page_id=6
해당 URL에서 다음 그림과 같이 본인이 그리드에서 사용하고자 하는 기능? 들을 체크후
다운로드 버튼 클릭!
본인은 그냥 기본적으로 모두 체크 되있는데 다운받았다
jqGrid API 문서겸 데모페이지
http://trirand.com/blog/jqgrid/jqgrid.html
제공 기능들이 엄청나다 샘플링으로 jqGrid에서 데모와 소스를 제공한다.
화면을 보면서 필요한 샘플링을 응용해서 쓰도록 하자
지원하는 기능을 보니까 전에 소개한 tablednd.js 로 그리드 순서를 바꾸는 플러그인도
적용되있는거 같다 +_+
본인은 이번에 심플하게 그리드에 리스트만 뿌리도록 해보겠다!!
아! 여기서 빠져있는것이 그리드 UI에 테마를 적용해줘야 테두리나 이쁜 색들이 나오니까
jQueryUI 사이트에서 테마를 다운받자!
jQueryUI 테마다운로드 페이지
http://jqueryui.com/themeroller/
위 사이트에 들어가면 다음 이미지 처럼 화면이 나온텐데
좌측 Roll your own인가 탭의 Download버튼 클릭
클릭을 하게되면 여러개의 다양한 테마를 다운받을 수 있는데 테마 종류는 Gallery 탭을 보면 달력들이 각각의 테마의 화면으로 표출되고 하단에 테마종류가 나온다
거기서 확인하고 받고싶은 테마를 Roll Your Own탭의 Download theme 버튼 클릭후 다음 페이지에서 설정해서 받도록 한다.
모든 준비는 끝
우선 프로젝트에 플러그인 import를 하도록 하자
1. jQueryUI 세팅
다운받은 테마 압축파일을 해제하면 /css/테마이름 디렉토리 내에 "images" 폴더랑
jquery-ui-xxxx.css 가 2가지가 있을 것이다.
min.css 버전은 저용량 버전이긴 하지만 나중에 우리가 수정하거나 보기 쉽게 하기 위해서
는 min.css 보다는 그냥 .css 파일을 복사하자
즉 해당 jQueryUI 폴더내에서 필요한거는 images 폴더 + min.css가아닌 그냥 .css 파일
2. jqGrid 세팅
지원하는 기능들을 추가로 쓰고 싶으면 plugins 폴더까지 필요하지만 심플하게 리스트만
출력할 예정이므로 본인은 "css" 디렉토리와 "js" 디렉토리만 복사하였다.
프로젝트 include구조는 다음과 같다.
버전이 업데이트 되면서 jquery.jqGrid.src.js 파일이 없어진듯 하다.
만약 jquery.jqGrid.js 파일을 include하게된다면 jquery.jqGrid.js와 같은 경로로 jqgrid의 js디렉토리 내에 있는 모든 경로를 넣어주거나 jquery.jqGrid.js 파일의 path변수를 좀 변경해주어야 할거이다.
jquery는 어짜피 cdn 연동할꺼라 따로 include하지 않았다 필요하신분은 include
DEMO페이지 기준으로 샘플링 하는것이므로 영문은 한글로, 여러개의 컬럼은 2개정도로
해서 소스를 작성해보았다.
구조를 대략 보니 extJS 의 GRID PANEL과 비슷한 구조인듯 -_-ㅋ
html페이지에 그리드 출력에 필요한 스크립트와 css파일을 import 해보자
<link rel="stylesheet" href="/grid/css/jquery-ui-1.9.2.custom.css" /> <link rel="stylesheet" href="/grid/css/ui.jqgrid.css" /> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script> <script type="text/javascript" src="/grid/js/jquery.jqGrid.src.js"></script>
다음에는 그리드를 표출시킬 html의 테이블 껍데기를 만들어보자
<table id="list"></table>
샘플링 첫번째 table 빈껍데이터 그리드 껍데기만 만들어 보기!!
데이터 리스트는 존재 하지않는 상태에서 실행하는 코드입니다.
배열 코드는 화면 보시고 작성하시죠
$(function(){
$("#list").jqGrid({
datatype: "local",
height: 250,
colNames:['컬럼1','컬럼2'],
colModel:[
{name:'col1',index:'col1'},
{name:'col2',index:'col2'},
],
caption: "그리드 배열 데이터 샘플링"
});
})
실행화면입니다
오 깔끌하네요 +_+ ㅋㅋㅋ
다음은 데이터를 한번 넣어보자고요~
추가로 넣어주셔야 할 스크립트 코드입니다.
//그리드에 들어갈 데이터
var mydata = [
{col1:"내용1",col2:"내용1"},
{col1:"내용2",col2:"내용2"},
];
//배열을 반복문으로 돌려서 그리드에 add 시킨다
for(var i=0;i<=mydata.length;i++) {
$("#list").jqGrid('addRowData',i+1,mydata[i]);
}
자 한번 실행 ㄱㄱ???
오홋 잘 나오네요 ㅎㅎ
jqgrid의 데모사이트를 응용하셔서 드래드기능, ajax로 데이터 뽑아오는기능 , 페이징 기능등잘 응용하시면 되실거 같습니다~
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
'자바스크립트이야기 > jQuery플러그인소개' 카테고리의 다른 글
| [jQuery ajax fileupload] ajax 파일업로드 (9) | 2014.06.26 |
|---|---|
| [jQuery prettyDate] 페이스북처럼 등록일 조금더 보기좋게 꾸미기 (0) | 2014.06.18 |
| [jQuery validation] alert으로 validation 체크하는거 지겨우신가요? (0) | 2014.06.13 |
| [jQuery treeview] 트리메뉴를 만들어보자! (0) | 2014.06.11 |
| jQuery tableDnD을 이용하여 드래그앤드롭으로 테이블 목록 순서바꿔보기 (1) | 2014.06.11 |