오늘 소개할 플러그인은 jQuery validation 체크하는 플러그인이다!

회원가입이나 글쓰기등일때 submit 날려주기전, 

if(test == ""){

    alert("입력하세요!");

    retrun;

}

이런 식으로 대부분 검증을 한다.

하지만 본인은 이번에 소개하는 플러그인으로 validation 체크를 하는 로직을 짜볼까 한다.

단순 alert을 text형식으로 보여주는 예제만 설명하도록 하겠음.

규칙은 엄청 다양하다. 비밀번호 검증, 이메일검증, 체크여부등등... 해당 

jquery validation 다운로드

http://jqueryvalidation.org/

jquery validation api document

http://jqueryvalidation.org/documentation/

다운받은 파일을 압축해제하여 

/dist/jquery.validate.js 와 /demo/css, /demo/images 를 프로젝트 경로에 

validation이라는 폴더를 생성하여 가져다 봍였다.

/dist/additional-methods.js라는 파일이 있는데 이놈은 사용자가 개별적으로 정의한 

validation기능을 추가로 적용시켜주게 도와주는놈이다.

validation플러그인을 사용시 기본적으로 적용되는 범위는

form태그내에 정의된 태그들을 검증하는거고, 일반 button이 아닌 submit버튼을 이용하는것이 기본적으로 제공되어있음.

평상시와 똑같이 js/css 파일들을 include해봅시다.

<link rel="stylesheet" href="/validation/css/screen.css" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript" src="/validation/jquery.validate.js"></script>

그다음으로는 검증을 해보고자 하기위한 HTML 태그!!

        <form action="dddd.jsp" id="memberForm">
		<table style="width: 800px;">
			<tr>
				<td>
					아이디
				</td>
				<td>
					<input type="text" name="id" id="id"  />
				</td>
			</tr>
			<tr>
				<td>
					이름
				</td>
				<td>
					<input type="text" id="name" name="name"  />
				</td>
			</tr>
			<tr>
				<td colspan="2"><input class="submit" type="submit" value="Submit"/></td>
			</tr>
		</table>
	</form>

그럼 이제 위 태그에 대한 validation을 하기 위한 스크립트를 짜보자.

       $(function(){
		//memberForm form태그에 대한 validation 시작
		$("#memberForm").validate({
		    rules: {
		    	// id , name 은 폼태그내에 존재하는 name명이다.
		    	id : {
		    		//해당 옵션을 주면 필수체크!
		    		required : true
		    	},
		    	name : {
		    		required : true
		    	}
		    },
		    messages: {
		    	// id , name 은 폼태그내에 존재하는 name명이다.
		    	// alert에 들어가는 문자내용
		    	// 하지만 text로만 화면에 보여진다는 것!
		    	id: {
	                required: "아이디를 입력하세요"
	            },
	            name: {
	                required: "이름을 입력하세요"
	            }
		    },
		    //검증이 끝난후에 작업할 부분 (submit??)
		    submitHandler: function() {
		    	alert("전송!!");
		    }
		})
	})

ui적으로도 깔끔하고 사용자가 alert화면의 확인버튼을 클릭을 할 필요가 없다!!

응용을 해서 한번 프로젝트에 적용해보자!

추 . 천 !!!!

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

이번에 소개할 플러그인은 jQuery 트리에 관련된 jquery treeview plugin입니다.

jQuery기반으로 만들어진 트리가 몇가지 더있긴 하지만, 본인은 이 플러그인이 편하다.

플러그인 개발자 사이트 + 트리뷰 다운로드 페이지

http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

이 개발자는 트리 플러그인 말고도 여러가지 플러그인을 개발했는데 본인이 트리 플러그인 

이후에 소개할 플러그인은 해당 개발자가 만든  prettydate , validation 플러그인 정도 

추가로 글을 올릴 예정이다.

위의 URL에 접속하여 어김없이 Download 링크를 클릭하여 플러그인을 다운받자.

압축을 해제하면 내부 폴더에 demo 페이지가 있어서 해당 소스를 분석하고 응용을 하면 

되겠지만, 플러그인 소개하는 만큼 심플하게 샘플링을 해보도록 하겠다!!

심플한 구조의 트리를 할것이므로 import할 파일은 몇가지 되지 않는다

ajax로 sync걸어서 트리를 정의하거나 페이지가 refresh 되어도 트리의 포커스를 

유지시키려면 cookie 등... 아니면 추가버튼으로 트리생성등등!!! 

여러가지가 있으니 해당 부분은 개발자 사이트와 demo 소스를 보고 충분히 분석하셔서 

적용하시길~

본인은 위에 이미지처럼 images폴더와 css / js 파일 하나씩 import하도록 하겠다.

jquery는 CDN으로 .... 긔차니즘;;;;

① 시작은 ul로 시작하는거 같음. ul이 기준이고 트리 UI는 class에 지정을 해주어야 기초 완성

② li 태그가 각각의 트리수만큼 나타내는 것인대

    li 밑에 span을주고 클래스명을 folder 또는 file로 준다.

    값을 해당 트리메뉴에 해당하는 텍스트다.

③ 만약 span 다음에 자식 노드를 추가하고자 한다면 span 태그 하단에 ul - li 태그를 

    넣어준다  

    이런식의 같은구조로 depth가 늘어나는 형태이다.

기본 샘플링에 대한 코드를 첨부합니다.

import 파일

<link rel="stylesheet" href="/tree/jquery.treeview.css" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script src="/tree/jquery.treeview.js" type="text/javascript"></script>

이어서 스크립트 부분이다 

$(function(){
                // 해당 함수를 호출안할시, 트리기능이 동작을 안함
		$("#browser").treeview({});
});

마지막으로 html 태그 부분

	<div id="main">
		<ul id="browser" class="filetree">
			<li>
				<span class="folder">폴더</span>
				<ul>
					<li>
						<span class="file">폴더 - 파일</span>
					</li>
				</ul>
			</li>
			<li>
				<span class="file">파일</span>
			</li>
		</ul>
	</div>

이상!!!!

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

tableDnD는 참 유용한 플러그인 중 하나이다

http://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/

https://github.com/isocra/TableDnD

다운로드 페이지에서 우측에 Download Zip버튼을 클릭하여 다운로드 받도록 하자

압축 해제 후, stable폴도 밑에 있는 jquery.tablednd.js 파일을 프로젝트에 넣어놓자

2013년12월말일날 최종업데이트 버전인거 같다..

jquery와 다운받은 jquery.tablednd.js를 import 시켜보자

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript" src="/tablednd/jquery.tablednd.js"></script>

스크립트 소스는 다음과 같다

$(function(){
	//tableDnD(이안에 여러 옵션들을 지정해 줄 수 있다.)
	/*
		example : 
		tableDnD(
			{
				//드래그 기능이 동작하는 동안 특정 CLASS를 드래그하는 TR에 적용해준다.
				onDragStyle : 'css제어',
				onDropStyle : '드롭기능시 스타일',
			        onDragClass: '클래스지정',
			        //드래그한 후 드롭이벤트가 일어날 경우의 이벤트
			        onDrop: function(table, row) {
			        	console.log("드롭!!");
			        },
			        onDragStart: function(table, row) {
			        	console.log("드래그 시작!");
			        }
			}
		);
	*/
	$("#tableId").tableDnD();
})

마지막으로 샘플용 테이블 html 태그이다

	<table id="tableId" border="1" style="width: 800px;">
		<tr style="background-color: red;">
			<td width="100%">1</td>
		</tr>
		<tr style="background-color: yellow;">
			<td>2</td>
		</tr>
		<tr style="background-color: blue;">
			<td>3</td>
		</tr>
		<tr style="background-color: green;">
			<td>4</td>
		</tr>
	</table>
   

화면을 실행 후, 테이블의 row를 드래그앤드롭을 해보자 

잘~~ 될것이다!! 

통계화면에 자주쓰이는 jqPlot 플러그인을 사용하여 그래프를 출력하고자 한다.

우선은 플러그인을 다운받도록 하자

jqPlot 사이트

http://www.jqplot.com/

https://bitbucket.org/cleonello/jqplot/downloads/

jqPlot 데모사이트

http://www.jqplot.com/tests/

jqPlot 문서

http://www.jqplot.com/docs/files/usage-txt.html

지원하는 그래프들은 다양하므로 데모사이트에서 응용을 해서 쓰길바라며, 이번 글에서는 

막대그래프를 기준으로  화면에 그래프를 생성해보도록 하겠다.

1. jqPlot 다운로드를 받아보자

   현재기준으로 최신버전인 jquery.jqplot.1.0.8r1250.zip 파일을 다운받아 압축해제!

2. 해당 선택된 파일들을 프로젝트에 넣어서 작업을 진행하자

물론 본인이 넣으려고 하는것이 전부는 아니다. 압축푼 모든 파일들을 넣어도 무관하겠다.

그리고 배포시, 라이센스 txt 파일도 첨부해줘야 하는걸로 아는데...  

라이센스쪽에는 아는 지식이 얇아서 정확히는 모르겠음

우선 작업 프로젝트내에 해당 파일들을 include해줬다면 준비는 끝!!

*참고로 본인은 jqplot라는 폴더를 만들어서 해당 파일들을 넣어줬음.

jQuery기반의 막대그래프 생성 지원을 해주는 플러그인들을 include했다.

다음은 스크립트 부분이다.

$(function(){
         // [x좌표에 표출될 문자, y좌표와 그래프의 높이를 정해주는 값]
	 var line1 = [
	              	['x좌표1', 7], 
	              	['x좌표2', 9], 
	              	['x좌표3', 15], 
	 				['x좌표4', 12]
	             ];
	 //그래프플러그인 호출
        //'chart1' -> 해당 그래프를 삽입할 태그ID
        //2번째 그래프에 들어갈 값들
	 $.jqplot('chart1', [line1], {
           //그래프 상단에 제목
	    title: '그래프 예제',
	    series:[
	            {
	            	renderer:$.jqplot.BarRenderer
	            }
	           ],
	    axesDefaults: {
	        tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
	        tickOptions: {
	          /*옵션들은 document페이지를 참고*/
	          fontSize: '10pt'
	        }
	    },
	    axes: {
	      xaxis: {
	        renderer: $.jqplot.CategoryAxisRenderer
	      }
	    }
	});
});

마지막으로 id값이 chart1이란놈으로 div태그를 생성해보자

실행을 해보게 되면 다음 화면과 같이 나오면 그래프는 마무리...

스크립트 주석에도 적어드렸듯이 막대그래프외에도 다양한 그래프 종류들이 존재하며 옵션들 또한 다양한다.

출력하려는 그래프종류에 맞춰서 옵션들을 적절히 써가며 사용한다면 훌륭한 화면을 낼 수 있을것이다..

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

쉽게 생각하면 스크립트 상에서 문자열로 만든 html 태그를 현재 보여진 화면에서 출력을 시켜주는 것이다.

동적으로 태그를 추가해주려면 해당 태그내에 html 태그를 모두 갈아 엎어주거나 

지정 태그 기준으로부터 삽입할 위치를 지정해주는것을 해보기로 하겠다.

지정태그내에 존재하는 html 태그를 새로 지정한 html태그로 엎어버리고자 할때는

$(지정타겟).html(HTML태그문자열)

지정태그내에 존재하지 마지막 태그다음에 태그문자열을 삽입하는 방법은

$(지정타겟).append(HTML태그문자열)

지정태그바로 다음에 태그문자열을 붙이는 방법은

$(지정타겟).after(HTML태그문자열)

지정태그바로 이전에 태그문자열을 붙이는 방법은

$(지정타겟).before(HTML태그문자열)

와 같이 주면 될것이다. 

그리고 예를들어서 화면에 HTML태그를 문자로 보여주고 싶을 경우!

$(지정타겟).text(HTML태그문자열) 처럼 text함수를 이용하면 태그가 아닌 문자로 화면에 출력이 가능하다

태그 화면을 보여주는 함수 : html / append / before / after

태그UI화면이 아닌 문자열로 화면을 보여주는 함수 : text

샘플로 태그 화면 보여주는 함수중에는 html을 써보고 문자열로보여주는 text 함수로만 샘플링을 구현해보았다. 해당 소스를 응용하여 html/append/before/after/text 에대하여 이해하도록 해보자.

스크립트 소스부분

$(function(){
		var tag = "<input type="checkbox"><br />변경후HTML";
		//html함수 적용하여 htmltest태그내의 html 변경
		$("#htmlbutton").click(function(){
			$("#htmltest").html(tag);
		});
		//text함수를 적용하여 html함수를 사용했던 같은 내용의 문자열을 표출해본다.
		$("#textbutton").click(function(){
			$("#texttest").text(tag);	
		})
})

HTML 소스부분

<div id="htmltest" style="border-width: 1px; border-style: solid;">
	<input type="text" value="test"/>
	<br/>
	변경전HTML
	<br/>
</div>
<br/>
<div id="texttest"  style="border-width: 1px; border-style: solid;"></div>
<input type="button" value="html 태그변경" id="htmlbutton"/>
<input type="button" value="태그를 text로 출력" id="textbutton"/>

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