극초보용 - jQuery. 주문서에 날짜 창 넣기 > 그누보드5 팁자료실

그누보드5 팁자료실

극초보용 - jQuery. 주문서에 날짜 창 넣기 정보

극초보용 - jQuery. 주문서에 날짜 창 넣기

본문

jQuery 뭐 부터 배워야할까요?
캄캄합니다.
php 배우고 mysql 배웠는데 jQuery를 배워야 한다고 하네요.

앞이 캄캄합니다.
그러나 걱정마세요.
jQuery에 대해서 이해만 하면 누구나 jQuery를 사용할 수 있습니다.

일단 jQuery가 몰까요?
먼저 우리는 jQuery를 만드는 것이 아니고 그것을 사용하는 사람인 것을 분명히하고 이야기해야합니다.

자바스크립트를 배워야 좀 멋진 홈페이지를 만들 수 있다는데..
자동으로 닫히고 창이 팍하고 뜨고.
자바스크립트 코드 봐도 모르겠고.

바로 이런 고민을 해결해주는 것이 jQuery입니다.
마치 수학 공식집 같은 것입니다.

그러므로 jQuery는 활용을 잘하면 됩니다.

자바스크립트 고수들이 봐 엄청 멋지지 하면서 숫자 올라가게 하는거나, 멋진 팝업창 띄우게 하는 것은 우리 같은 초보도 가능하게 해주는 것입니다.
실제로 자바스크립트로 문서내의 어떤 것을 부를 떄 document.getElementById('부를 것')이라 썼는데
jQuery는  $('#ID') 으로 표현하면 끝입니다.

우리가 지난번 만든 주문서에 날짜창이 뜨는 것을 넣고 싶다고 해봅시다.
날짜창을 클릭하면 날짜 선택창이 뜨게 하는 것입니다.

구글에서 'jQuery 날짜'리고 칩니다.
그럼 엄청나게 많은 항목이 나옵니다.
위에 보이는 것을 하나 누릅니다. 저는 다음이 눌러졌습니다.

http://jmnote.com/wiki/JQuery_UI_%EB%82%A0%EC%A7%9C%EC%84%A0%ED%83%9D%EA%B8%B0_datepicker

여기 보면
날짜 1개라고 나옵니다.
이것을 나의 게시판 맨 위의 ?> 바로 뒤에다 복사하면 됩니다.


<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(function() {
  $( "#datepicker1" ).datepicker({
    dateFormat: 'yy-mm-dd'
  });
});
</script>


여기서 현 게시판은 jQuery을 기본 제공하므로 해당 부분은 삭제하고 다음을 넣습니다.


<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(function() {
  $( "#wr_3" ).datepicker({
    dateFormat: 'yy-mm-dd'
  });
});
</script>


자 그럼 끝입니다.

이제 원하는 게시판의 쓰기에 wr_3에 넣는 다고 하고

<input id="wr_3" type="text" name="wr_3" value="<? date("Y-m-d");>">

id를 넣으면 날짜창이 뜹니다.
id는 위에 넣은 script의 $( "#wr_3" ) 인데 wr_3 대신 다른 것을 넣어도 됩니다.
input 박스에 id만 일치시키면 됩니다.
바로 이게 어디다 쓸 것인가를 알려주는 장소를 지정하느 것입니다.

두 개가 필요하면,


<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(function() {
  $( "#wr_3" ).datepicker({
    dateFormat: 'yy-mm-dd'
  });
  $( "#wr_4" ).datepicker({
    dateFormat: 'yy-mm-dd'
  });
});
</script>



<input id="wr_3" type="text" name="wr_3" value="<? date("Y-m-d");>"> 시작일 ~ <input id="wr_4" type="text" name="wr_4" value="<? date("Y-m-d");>"> 최종일


위처럼 하면 멋진 시작과 끝날의 입력 항목이 만들어지는 것이지요.

우리가 분해가 되어 있는 물건을 보면 그것이 어떤 물건인지 모르기에 맞추기 어렵습니다.
그러나 그 옆에 다 조립이 된 완성품이 있으면 조립에 도전을 할 수 있습니다.
초보라도.
안되면 껍데기를 뜯어서 안을 보면서 할 수 있습니다.
그럼 초보라도 조립을 하게 되는 것이지요.

이렇게 코드 하나 넣고 실행해보고 코드 하나 넣고 실행해보면 쉽게 사용법을 익힐 수 있습니다.

HTML5는 phoneGap 같은 툴없이 핸드폰 카메라 조작이 가능합니다.
점점 더 보통 사람들이 어려운 프로그램을 하기 쉬워지고 있다는 것이지요.
건축이 더 이상 공대가 아니라 예술대로 여겨지는 것과 같습니다.

jQuery 어렵지 않아요.


===========================================================================================

280원 무제한 도메인 등록 호스팅(http://hostingis.com), 무제한 용량/무제한 도메인 등록 호스팅(http://hostingis.com), 서버 호스팅(http://hostingis.com), 웹서버 관리툴 cpanel 보다 좋은 cypanel(http://cypanel.com)
추천
2

댓글 2개

전체 2,431 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT