예전에 jqueryUI를 통한 레이어팝업(다이얼로그)를 소개했었다

2014/06/20 - [자바스크립트이야기/jQuery UI 소개] - [jQueryUI - dialog] 레이어 팝업을 띄워보자

이번에는 blockUI 플러그인을 이용하여 레이어팝업을 띄워보도록 하겠다.

● jQuery  [다운로드] 

    또는 

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

● jQuery blockUI [다운로드]

다운로드를 받았으면 다음과 같이 프로젝트 생성 후  blockUI.js와 index.jsp를 위치시켰다

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.blockUI.js"></script>

<input type="button" id="btn" value="모달창띄우기"/>
<div id="question" style="display:none; cursor: pointer;"> 
<h1>모달창확인</h1> 
<input type="button" id="closebtn" value="닫기" /> 
</div>

$(function(){
		$("#btn").click(function(){
			//잠깐 나타났다가 사라지는 함수
			//$.growlUI('타이틀', '내용'); 
			$.blockUI({ 
				    //html태그를 문자열로 적용해도 무관함
				    //message : "<table><tr><td>태그테스트</td></tr><table>"
					message: $('#question')
					//css 설정
				   ,css: { 
					   width: '300px' 
					}
					//모달창 외부 클릭시 닫기
				   ,onOverlayClick: $.unblockUI 
			});	
		})
		$("#closebtn").click(function(){
			 //모달창 닫기
			 $.unblockUI(); 
		})
})

위 샘플링은 blockUI의 간단한 맛보기이고 자세한 상세옵션들을 하나둘씩 적용하면 훌륭한 모달창을 띄울 수 있을 것이다.

http://malsup.com/jquery/block/#options

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!

쿠키는 보통 아이디 저장하기 체크박스 클릭시 아이디정보를 저장한 후 재접속시 아이디 값을 유지할때 필요하다

● jQuery  [다운로드] 

    또는 

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

● jQuery cookie [다운로드]

압축 해제 후 jquery-cookie-master\src\jquery.cookie.js 를 include하도록 하자

index.jsp페이지에 샘플코드를 작성하고자 한다.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>

저장값 : <input type="text" id="save" />
<input type="button" value="쿠키저장" id="saveButton" /><br/>
쿠키값호출 : <input type="text" id="load" />
<input type="button" value="쿠키불러오기" id="loadButton" />
<input type="button" value="쿠키삭제" id="deleteButton" />

$(function(){
        //저장버튼 클릭
	$("#saveButton").click(function(){
                //입력값 
		var cookie_value = $("#save").val();
                //'cookie'라는 key값으로  입력값을 저장한다.
               //1번째 parameter = 쿠키명
              // 2번째 parameter = 저장하고자 하는 쿠키값
		$.cookie('cookie', cookie_value);
        });
        //불러오기버튼 클릭
	$("#loadButton").click(function(){
                //저장버튼클릭시 'cookie' key값을 불러온다.
		var cookie_value = $.cookie('cookie');
                // load라는 id text태그에 cookie_value변수에 들어있는 값을 담는다.
		$("#load").val(cookie_value);
	})
       //삭제버튼 클릭
	$("#deleteButton").click(function(){
                //'cookie' 라는 key값의 쿠키를 삭제한다
		$.removeCookie("cookie");
	})
})

※ 이외에 상세적인 옵션을 주고자 한다면 3번째 parameter를 정해주면 될것이다.

$.cookie('key값','value',{

                                         expires : 10

                                        ,domain : 'roqkffhwk.tistory.com'

                                        ,secure : false

                                   });

expires : 쿠키를 저장하는 기간이다 (10이라고 주었다면 10일동안 쿠키정보를 저장한다)

path : 쿠키경로 설정부분

domain : 쿠키를 저장할 도메인 - 지정안할시 호출한 url의 domain이 된다.

secure : https url에 사용을 하고자 한다면 true 

테스트를 해보도록 하자

본인은 default값으로 화면 출력을 해보았음

위와같이 확인되었다. 잘 사용하시길...

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!

목    표

● 어떻게 파일을 서버에서 받는가?

● html 폼을 비동기방식으로 파일과 함께 전송을 할수 있는가?

개발환경

● 이클립스

● IE / 크롬브라우저

● jdk 1.7 / tomcat7

사용 스크립트

● jQuery  [다운로드] 

    또는 

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

● jQuery Form Plugin [다운로드]

● html 페이지 부분

1) html페이지에 jquery와 jquery form 플러그인을 import 해주자         

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="/js/jquery.form.js"></script>

2) jQuery form 플러그인을 사용하여 ajax 전송하는 스크립트를 넣어주자

    * 전에 button태그로 진행했었지만, submit 태그로도 해도 무관하니 input type="submit" 

      으로 해주자

$(function(){
	//폼전송
	$('#ajaxform').ajaxForm({
	   //보내기전 validation check가 필요할경우
            beforeSubmit: function (data, frm, opt) {
			                alert("전송전!!");
			                return true;
			              },
            //submit이후의 처리
            success: function(responseText, statusText){
            	alert("전송성공!!");
            },
            //ajax error
            error: function(){
            	alert("에러발생!!");
            }                               
          });
});

3) html태그를 작성해주자

<form id="ajaxform" action="/saveFileTest.do" method="post" enctype="multipart/form-data">
		<input type="text" name="test2"/><br/>
		<textarea rows="10" cols="10" name="test3"></textarea><br/>
		<input type="file" name="test4" />
		<input type="submit" value="Submit" />
</form>

위와같이 코드를 한후 서버에서 데이터들정보를 받아보면 정상적으로 데이터및 파일들을 받을수 

있는것을 확인할수 있다.

두번째 방법으로는 FormData() 객체를 사용하는 것인대 IE9부터인가부터 지원이 되는걸로 

알고 있다.

시범삼아 이방법으로도 테스트를 해보자

두번째방법은 jquery 만 있으면 됨 jquery form plugin 필요없음(x)

ajax 파일업로드 두번째방법 스크립트부분

	$(function(){
          $("#btn").click(function(){
        	  var formData = new FormData();
        	  formData.append("test2", $("input[name=test2]").val());
        	  formData.append("test3", $("textarea[name=test3]").text());
        	  formData.append("test4", $("input[name=test4]")[0].files[0]);
        	 
        	  $.ajax({
        	    url: '/saveFileTest.do',
        	    data: formData,
        	    processData: false,
        	    contentType: false,
        	    type: 'POST',
        	    success: function(data){
        	    	alert("EE");
        	    }
        	  });

          });
	});

ajax 파일업로드 두번째방법 html 부분

<form id="ajaxform" action="/saveFileTest.do" method="post" enctype="multipart/form-data">
		<input type="text" name="test2"/><br/>
		<textarea rows="10" cols="10" name="test3"></textarea><br/>
		<input type="file" name="test4" />
		<input type="button" id="btn" value="전송" />
</form>

괜찮지 아니한가

보통 우리는 게시판을 제작시, 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>

위의 소스를 통합하여 실행한 결과화면이다!!

잘만 응용하면 페북따라하기 참~쉬울듯!!

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!

이번에는 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로 데이터 뽑아오는기능 , 페이징 기능등잘 응용하시면 되실거 같습니다~ 

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!