tistory 에서 jquery 사용하기 설명

난 왕초보자 그래도 티스토리에서 jquery 를 사용하는 방법 도전하기로 함

1. 완성모습-따라해도 되네

test 해보기 : tistory 에서 jquery 사용하기 실습(http://webland.tistory.com/14)

 

2. 요약

    1. tistory html/css 에 jquery.min.js,jquery-ui.js,jquery-ui.css 추가

    2. 글쓰기에서 html을 선택 후 스크립트와 html 문장 넣기

    3. 잘 된 모습 보면서 "나도 되는구나"하고 생각하기

 

3. 아래 문장을 tistory html/css에 추가한다.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

 

4. 원하는 jquery 모델을 고른다

    이건 일단 되는지 확인 하는게 목적이므로 jquery 사이트에서 근사한걸 찾는다.

http://jqueryui.com/datepicker/#date-range

    

 

5. view source에서 source를 추출한다.

 

6 tistory에 붙힌다.1

이런 안 그래도 어려운데 그대로 붙혀도 도데체 뭔말인지 모르겠다

 

울트라 에디터로 해도 안되네

 

엑셀에 넣더니 된다.

   블럭 쳐 놓은 부분만 복사한다.

 

7 tistory에 붙힌다 2.

  -바쁘신 분들을 위해서 ^^

<SCRIPT>
  $(function() {
    $( "#from" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });
  });
  </SCRIPT>
 <LABEL for=from>From</LABEL> <INPUT id=from name=from> <LABEL for=to>to</LABEL> <INPUT id=to name=to>

 

8. 저장후 일단 시작, 종료 넣으라고 나오네

 

9 tistory 블러그에서 본 모습 -멋지당

 

 

이제 나도 jquery를 사용할수 있네