jQuery 기능적 폼(form) 만들기

jQuery/DOM&jQuery 2010.02.18 19:59

jQuery 기능적 폼(form) 만들기

jQuery 이용하여 좀더 기능적으로 form을 만들어보자.기본적인 폼의코드는 다음과 같다

더보기

이름을입력할 input엘리먼트는 클래스명을required 그리고 나머지들은 클래스명을 conditional로 주었다.이코드를 다음과 같이 수정할것이다.

  • legend엘리먼트를 다른 엘리먼트로 대체하여 좀더 편리하게 css로 꾸미게 한다
  • 반드시 입력할 이름란에 '*'를 또 다른 입력란에는 '**'를 필수, 선택 대신으로 대체시킨다
  • 필요한 선택입력 항목 박스를 클릭시 텍스트 입력 박스가 보이도록 또 감추도록한다.

엘리먼트 수정

legend엘리먼트는 css로 꾸미기 까다로운 것중하나다. 표준을 지키기위해선 써야하고 꾸미기위해서 바꾸자니 까다롭다. 따라서 스크립트를 이용해서 대체시켜보자

 $('legend').each(function(index) {
 //문서전체에서 legend에 접근하여
  $(this).replaceWith('

' + $(this).text() + '

'); //찾아낸것을 h3엘리먼트로 바꾸어준다. });

위의 소스는 legend엘리먼트를 h3에리먼트로 대체시켜주고 있다. 함수는.replaceWith()를 사용하고있다.each를 사용한것은 여기서는 하나의 폼만 사용해서보여주고있지만 여러개를사용할때 공통으로 검사하고 적용해 주기 때문이다. css로 바탕색은 분홍 글자색은 흰색으로 해보자

h3{ background:#fcc; color:#FFF;}

아스테리크로 대체

.replaceWith()함수로 대체시킬수도있지만 차후의 기능적 사용여부와 또 위에 별도표시를위해 변수로 지정하고 바꾸어줄것이다.

  var requiredFlag = ' * ';
  var conditionalFlag = ' ** ';
  $('form :input')
   .filter('.required')
   .next('span').text(requiredFlag)
   .end().end()
   .filter('.conditional')
   .next('span').text(conditionalFlag);

위의 소스는 먼저 아스테리크를 변수로지정해주고 그 다음바꾸어줄 텍스트를 찾아가고있다.주요시 볼점은 .end()함수이다.end함수는 다시 이전요소에 접근하는 함수이다.따라서 첫번째 end는 .filter('.required')에 접근 두번째end는$('form :input')접근하고있다. 따라서 '**'를 사용할 .conditional란 클래스를가진것에 접근시 처음부터 소스를 $('form :input').filter('.conditional')이런식으로 짜줄필요없이 단축시킬수있다.

이번에는 (필수), (선택)이란 텍스트에서 괄호를 때어주고 변수로 지정하고 아스테리크와 같이이어주도록 지정해준다.바라는 결과는 다음과 같다

필수*

선택**

이를위해 소스를보자

  var requiredKey = $('input.required:first')
                        .next('span').text();
  var conditionalKey = $('input.conditional:first')
                        .next('span').text();
    requiredKey = requiredFlag + 
             requiredKey.replace(/^\((.+)\)$/,'$1');
  conditionalKey = conditionalFlag + 
            conditionalKey.replace(/\((.+)\)/,'$1');

.replace()의 역할은 괄호를 떼어주는역할을 했다.마지막으로 이것을 맨위에 붙여주자

	$('

') .addClass('field-keys') .append(requiredKey + '
') .append(conditionalKey) .insertBefore('#contact');

이제까지 이블로그의 포스팅을 봐왔다면 쉽게 이해가능할것이다. 클래스를 지정한것은 단순히 좀더 꾸며주기위했을 뿐이다.

체크박스 클릭에 따라 보여주기 감추기

마지막으로 체크박스에 따라보여주거나 감추는 기능을 만들어보자.먼저 conditional명의 클래스의 텍스트박스를 모두감추어준다.

$('input.conditional').next('span').andSelf().hide()

다음은 페이지내에서 체크박스를 찾아가도록되어있다

$('input.conditional').next('span').andSelf().hide()
  .end().end()
  .each(function() {
    var $thisInput = $(this);
    var $thisFlag = $thisInput.next('span');
    $thisInput.prev('label').find(':checkbox')
    .attr('checked', false)
    //함수가 체크안된었다는초기값을 설정한것이다.
    .click(function() ;
    //이뒤에 실행되는 함수를 달아주면된다

마지막으로 박스가 체크된에 따라 바뀌는 소스를 만들어주자

  .click(function() {
      if (this.checked) {
      //만약 박스가 체크된다면
        $thisInput.show().addClass('required');
        $thisFlag.show();
        $(this).parent('label').addClass('req-label');
      } else {
      //반대라면
        $thisInput.hide().removeClass('required').blur();
        $thisFlag.hide();
        $(this).parent('label').removeClass('req-label');

아래는 최종 완성된 소스

더보기

완성된 예제를 보려면 여기로http://sianasiatiger.cafe24.com/study/F_moreedite.html

저작자 표시
신고

설정

트랙백

댓글

ajax 테이블 페이징

Ajax 2010.02.17 21:17
ajax 테이블 페이징

jquery를 이용한 ajax 테이블 페이징

테이블에 여러자료가 있고 그것이 아주많다면 한페이지에 다루기 힘들것이다. 따라서 일부분만보여주고 페이지로 나누어 보여주려고 한다.

여전히 네이버 베스트셀러리스트를 참조했다. 소스가기니 접어두었다.아래 참조

더보기

아래와 같은 순서로 해볼것이다.

  • 보여줄 페이지설정
  • 전체 페이지계산
  • 스크립트로 페이지버튼html 소스짜기

보여줄 페이지 설정

한페이지당 우리는 표에서 5개를 봉줄것이다. 따라서 다음과 같이 정한다.

 $('table.paginated').each(function() {
     var currentPage = 0;
     var numPerPage = 5;
     var $table = $(this);
     var repaginate = function() {
       $table.find('tbody tr').hide()
	  //기본적으로 모두 감춘다
         .slice(currentPage * numPerPage,
           (currentPage + 1) * numPerPage)
         .show();
	 //현재페이지+1 곱하기 현재페이지까지 보여준다
     };    

currentPage로 초기값을 0으로주었다.그리고 numPerPage로 기본값을 5로주고 그아래는 계산하고 .slice()메소드를 이용해 필요한 만큼 보여주도록 되어있다.

페이지계산 하기

표가 여러개있고 그중 우리는 5개식 보여주기로 했다. 전체표의 열을 5로나누었을때 소수가 되면 페이지계산이안되니 반올림해서 페이지를 늘이도록하자.

	 
     var numRows = $table.find('tbody tr').length;
	 //length로 전체길이구함
     var numPages = Math.ceil(numRows / numPerPage);
	 //Math.ceil를 이용하여 반올림

위와 같이 한다면 기본소스에서 14열을 사용했으니 반올림하여 14/5 = 3. 따라서 3개의 페이지가 만들어질 것이다.

페이지버튼 html 소스짜기

마지막으로 해 줄 것은 페이지버튼을 만들어주는것이다. 페이지가 늘어남에따라 이버튼역시 늘어나니 스크립트로 만들어줘야한다.

	
     var $pager = $('
'); //pager라는 클래스의 div엘리먼트 작성 for (var page = 0; page < numPages; page++) { $('').text(page + 1) .bind('click', {newPage: page}, function(event) { currentPage = event.data['newPage']; repaginate(); //for구문을 이용하여 페이지 수만큼 //버튼을 구현 $(this).addClass('active') //활성화된페이지에는 active라는 클래스명을 붙여준다. .siblings().removeClass('active'); }).appendTo($pager).addClass('clickable'); } $pager.insertBefore($table) //앞서 설정한 페이지키를 삽입 .find('span.page-number:first').addClass('active'); });

위에서 이벤트가 .click으로 바로 가지않고 .bind로 설정된것은 변수들이 함수밖에 정의되있는것을 참조하기 때문이다. 그냥.click으로 처리한다면 빈페이지가뜰것이다. 이로서 완성되었다.3개의 페이지버튼이나오것이고 한페이지에 5열이 나올 것이다.

다시 둘러보기

이 함수가 정열과 함께 사용되려면 정열이될때마다 페이징이 실행되도록 하면된다.이때 역시 외부에서 참조 하도록 .bind를 쓴다. 최종 코드를보자

	
 $(document).ready(function() {
  $('table.paginated').each(function() {
    var currentPage = 0;
    var numPerPage = 5;
    var $table = $(this);    
 
    $table.bind('repaginate', function() {
     $table.find('tbody tr').hide()
        .slice(currentPage * numPerPage,
          (currentPage + 1) * numPerPage)
        .show();});
        
    var numRows = $table.find('tbody tr').length;
    var numPages = Math.ceil(numRows / numPerPage);
    var $pager = $('
'); for (var page = 0; page < numPages; page++) { $('').text(page + 1) .bind('click', {newPage: page}, function(event) { currentPage = event.data['newPage']; $table.trigger('repaginate'); $(this).addClass('active') .siblings().removeClass('active'); }).appendTo($pager).addClass('clickable');} $pager.insertBefore($table) .find('span.page-number:first').addClass('active');});});

마지막으로 호출하기위해 앞쪽의 정렬키뒤에 $table.trigger('repaginate'); 를 추가 해준다

	
           .
           ..
           ...
	   $table.find('th').removeClass('sorted-asc')
             .removeClass('sorted-desc');
           if (sortDirection == 1) {
             $header.addClass('sorted-asc');
           }
           else {
             $header.addClass('sorted-desc');
           }
           $table.alternateRowColors();

	   $table.trigger('repaginate');     });

예제를 보려면 여기로http://sianasiatiger.cafe24.com/study/T_usePage.html


저작자 표시
신고

설정

트랙백

댓글

jquery를 이용한 ajax 테이블 정렬 순서변경

Ajax 2010.02.17 18:07

jquery를 이용한 ajax 테이블 정렬 순서변경

오름차순과 내림차순 방법으로 모두 정렬하려면 이번엔 다른 키코드를 삽입해야 한다. 이제까지는 오름차순만 사용했지만 이번에 변수를 넣어서 클릭시 차순이 변화되도록 해보자.

 if (a.sortKey < b.sortKey) return -1;
 if (a.sortKey > b.sortKey) return 1;
 return 0;

저번에 보았던 비교 값을 이용한 정렬이다. 만약 숫자가 작다면 -1 값을 반환 크다면 1을 반환 상관없으면 0을 반환하도록 되어있다. 이를이용하여 오름차순으로 정렬되게 했다. 자그럼다음코드를 보자

 if (a.sortKey < b.sortKey) return 1;
 if (a.sortKey > b.sortKey) return -1;
 return 0;

이 경우는 단지 결과값에 1과 -1을 바꾸어 주었을뿐이다.따라서 그결과값도 내림차순으로 나온다,.이번엔 반환하는값을 클릭에 따라다르게 하여 오름차순, 내림차순을 보두 고려해보자

 var sortDirection = 1;
 if ($header.is('.sorted-asc')) {
 sortDirection = -1;
  }

반환하는 값을 위하여 변수를 sortDirection으로 지정해주었다.기본값을 1로 정해주었고 그상태가 반대라면 -1로 주도록되어있다.클래스명을 sorted-asc(오름차순의 경우),sorted-desc(내림차순의 경우)로 주도록 하겠다.

 $table.find('th').removeClass('sorted-asc')
    .removeClass('sorted-desc');
      if (sortDirection == 1) {
       $header.addClass('sorted-asc');
          }
      else {
       $header.addClass('sorted-desc');
        }

마지막으로 적용한 것이다.th엘리먼에서 앞에미리 기본값으로 sorted-asc를 붙인것을 지우고 sorted-desc을 붙인다. 현재값에 따라 오름차순 내림차순으로 바뀌게 된다.

요약

그전과 차이점은 단순 리턴하는 값을 변수하나를주어서 다르게 했을 뿐이다.

  • 먼저 변수이름을 지정한다.sortDirection 이라고 정했다.
  • 반환될 기본값을 결정한다 1
  • 클릭시 변할 클래스명을 정한다.sorted-asc(오름차순의 경우),sorted-desc(내림차순)
  • 현재값이 sorted-asc 이면 sorted-desc으로
  • 반대로 현재값이 sorted-desc 이면 sorted-asc으로 되도록 정한다.

완선된 예제를 보려면 여기로http://sianasiatiger.cafe24.com/study/T_usetableArry.html

저작자 표시
신고

설정

트랙백

댓글

자바스크립트 메모리 누수

Ajax 2010.02.17 18:05

자바스크립트 메모리 누수

C언어들에서는 임시적으로 지정한 포인트라던가 이런것들이 자동 삭제 되지만 자바스크립트에서는 그렇지않다.별도 용도로 지정한 변수가 역할이 끝났지만 그대로 남아있기에 메모리를 여전히 차지하게되고 따라서 후에 많은 함수들이 사용되면 언제 방해될지모르는일이다.이를 메모리 누수(memory leak)라고 말한다

테이블 정렬 수행속도테이블 정렬 수행속도이포스팅의 예제를다시보자

           $.each(rows, function(index, row) {
             row.sortKey = $(row).children('td').eq(column)
             //별도로 sortKey 로 지정해주고 
               .text().toUpperCase();
           });
           rows.sort(function(a, b) {
           //여기서 따로 수행처리하도록
             if (a.sortKey < b.sortKey) return -1;
             if (a.sortKey > b.sortKey) return 1;
             return 0;
           });
           $.each(rows, function(index, row) {
             $table.children('tbody').append(row);
             row.sortKey = null;
             //expendo인 sortKey를 null로 지정
           });

마지막 부분엔 수행처리를 빨리 하기위해 별도로 지정해 주었던 변수 sortKey를 null로 지정해주고있다.이것이 메모리누수를 예방하는 방법중 하나이다.

expendo

앞에서 계속 임시로 만든 변수라고 언급했는데 위에서 본예제와 같이 지정되지않은 원래DOM의 속성이아니라 개발자가 새로추가한 속성을 expendo라한다.이것으로 수행속도가 나아지지만 한편으로 메모리를 그대로 차지하고있기에 문제되는경우도있다.따라서 가급적 마지막에 null로 처리하라고 권유하는것도 그때문이다.

jquery에서 제공하는 함수

위와같이 expendo 값을 null로 처리하는 방법도 있지만. jquery의 함수인 .data(), .removeData()를 사용할 수도있다.

           $.each(rows, function(index, row) {
             $(row).data('sortKey'), $(row).children('td')
             //td엘리먼트에서 data함수로 sortKey값을 읽는다
               .eq(column)
               .text().toUpperCase());});
           rows.sort(function(a, b) {
             if ($(a).data('sortKey') < $(b).data('sortKey') )
             //a엘리먼트에서 data함수로 sortKey값을 읽는다
              return -1;
             if ($(a).data('sortKey') > $(b).data('sortKey') ) 
              return 1;
             return 0;
           });
           $.each(rows, function(index, row) {
           $table.children('tbody').append(row);
           $(row).removeData('sortKey');});
           //removeData로 제거

.data()함수로 읽어들이는역할을 했고 마지막으로 .removeData()로 제거시켰다.굳이 이두함수를 사용하는경우는 IE때문이다 IE는 때로는 이벤트에 제거하려는 변수가 포함되어있을시 제거할수없다 이때 jquery의 data함수를 사용하는것이 안전하다

저작자 표시
신고

설정

트랙백

댓글

jquery를 이용한 ajax 테이블 정렬 수행속도

Ajax 2010.02.17 18:03

jquery를 이용한 ajax 테이블 정렬 수행속도

테이블정렬을 해보았다면 이번에 수행속도를 좀더 올려보자

테이블 정렬 참조포스트jquery를 이용한ajax 테이블 정렬

위의포스팅에서 정렬처리구문은 다음과 같았다.

           rows.sort(function(a, b) {
             var keyA = $(a).children('td').eq(column).text()
               .toUpperCase();
             var keyB = $(b).children('td').eq(column).text()
               .toUpperCase();
             if (keyA < keyB) return -1;
             if (keyA > keyB) return 1;
             return 0;
           });
          $.each(rows, function(index, row) {

위와같은경우는 비교할때 key를 일일이 로드해서 비교하기에 시간이 걸린다.미리 계산하는방법을 고안해보자

           $.each(rows, function(index, row) {
             row.sortKey = $(row).children('td').eq(column)
             //별도로 sortKey 로 지정해주고 
               .text().toUpperCase();
           });
           rows.sort(function(a, b) {
           //여기서 따로 수행처리하도록
             if (a.sortKey < b.sortKey) return -1;
             if (a.sortKey > b.sortKey) return 1;
             return 0;
           });
           $.each(rows, function(index, row) {
             $table.children('tbody').append(row);
             row.sortKey = null;
           });

위구문은 key를 찾는구문과 비교구문을 별도로 분리하고있다.따라서 수행속도가 좀더빨라질것이다. 별도로 sortKey라는 변수로 정해주고 그처리구문을 아래에서 해주도록되어있다.

확하려면 여기로..데이타량이 예시로 짧게 했기에 그전의 예제와 큰 속도차이는 못느낄 것이다.테이블에 많은 데이타를넣고 시험해보면 알수있을 것이다.

자바스크립트 메모리 누수

마지막구문을 보면은 row.sortKey = null 에서 null값을 준것을 볼수있는데 이것은 메모리누수 의 원인이될수있기때문이다. 메모리누수에 대해서 자세이 보려면 다음 포스팅을 보자

자바스크립트 메모리누수

저작자 표시
신고

설정

트랙백

댓글

jquery를 이용한ajax 테이블 정렬

Ajax 2010.02.12 12:49

jquery를 이용한ajax 테이블 정렬

여러책을 놔두고 베스트셀러를 주제로 테이블에 정렬시켜보자. 기본적으로 팔려나가는 순위되로 나영시켜놓고 책제목, 순위, 저자, 가격순으로 클릭시 정렬되게 해보자

네이버에 올라와있는 베스트셀러를 참조했다.

다음과같은 이미지를 모델로 할것이다

html은 다음과 같이짜주었다. 너무길기에 아래 내용들은 생략.그리고 테이블 웹표준 코딩에 대해서 저세히 알고싶다면 표준웹코딩게시물을 보도록

긴 소스기에 접어놓았다

더보기

단지 기능상공부하는것이기에 css의 경우는 자세히는 생략하겠다.단 테이블의 열의 짝수,홀수에 따라색을 주려고한다. 방법은 3가지인다.

  • tr마다 클래스를 두가지주어 두색을css에서 지정
  • css3에서 짝수 홀수 선택자를이용하는방법
  • jQuery에서 css3 선택자를이용

css3를 사용하면 좋겠지만 여전히 바로 css3가적용안되는병맛같은 IE6때문에 3번째방법을 이용하겠다.짝수 홀수 선택자를 이용하고.addClass()함수로 각기 클래스를 달아주었다.

$('table.sortable tbody tr:odd').addClass('odd');
$('table.sortable tbody tr:even').addClass('even');

클릭시 이벤트작동하게하기

$('table.sortable th.sorting').click()

이제까지 배워온대로라면 위와같이작동하게 되도 문제없다.하지만 그러면 후에 다시소스를짜거나 편집하게될경우 스크립트소스를다띁어고쳐야하는문제가있다.따라서 좁 복잡하지만 변수를주고 클래스가 있는지 .each()함수로 검사하고 그에따라 작동하도록할것이다.

$('table.sortable').each(function() {
    //sortable클래스를가진 에서
     var $table = $(this);
     $('th', $table).each(function(column) {
     //또그중 th엘리먼트에서 변수지정
       var $header = $(this);
       if ($header.is('.sorting')) {
	   //header에서 sorting이란 클래스가있다면
         $header.addClass('clickable').hover(function() {
        //clickable이라는 클래스를 단다 그리고 호버하면
           $header.addClass('hover');
	  //hover이라는 클래스를 달아준다.
         }, function() {
           $header.removeClass('hover');
		   //호버가 안되면 다시 hover이라는 클래스 삭제
         }).click(function() 

위에서보면 this로 스스로 변수를 정해주고 작동되도록 되어있다.마지막으로 hover 그리고 clickable이란 클래스를 달아주었고 css로 약간꾸밈을주자

.clickable {cursor: pointer;}
.hover {text-decoration: underline;}

정렬하기

이제 클릭시 책제목, 순위, 저자, 가격순으로 클릭시 정렬되는 함수를 만들어보자. 정렬할때는 자바스크립스함수.sort()를 사용한다

.sort()

여러 숫자를 놔두고 변수를 지정하고 sort를 간단하게사용해보자

var rows = [ 1, 3, 57, 21, 10, 100];
rows.sort();

위와같이 하면 정렬은 되지만 알파벳 순으로 정렬되어버린다 따라서 [ 1, 10, 100, 21, 3, 51] 이란 결과가 나타날것이다. 문자에서는 크기순서로 이루어져야지 a, b, c, 가나다 순으로 될것이다. 따라서 리스트중 두가지를 비교하는 방법으로 사용할것이다.

rows.sort(function(a, b) {
//정렬된 두가지원소가있다면
if ( a < b ) return -1;
//그중작다면 -1 반환:따라서 뒤로밀린다
if ( a > b ) return  1;
//크다면 1 반환: 따라서 앞으로
retuen 0;
//같거나 어느것이 먼저와도될경우 0 :그자리유지
}

이를 이용하여 완성된 함수는

var rows = $table.find('tbody > tr').get();
     //테이블바디에서 tr을 찾아 row로 지정
     rows.sort(function(a, b) {
      //td엘리먼트에서 텍스트의 인자비교
       var keyA = $(a).children('td').eq(column).text()
       var keyB = $(b).children('td').eq(column).text()
       if (keyA < keyB) return -1;
       if (keyA > keyB) return 1;
       return 0;
     });
     $.each(rows, function(index, row) {
     //각각 정리된 배열을 다시테이블에삽입.		 
     $table.children('tbody').append(row);

마지막에는 다시테이블에 삽이하여 정영되도록하였다. 그럼이제까지본 소스를 종합해보면

 $(document).ready(function() {
   $('table.sortable tbody tr:odd').addClass('odd');
   $('table.sortable tbody tr:even').addClass('even');
   $('table.sortable').each(function() {
     var $table = $(this);
     $('th', $table).each(function(column) {
       var $header = $(this);
       if ($header.is('.sorting')) {
		   //header에서 sorting이란 클래스가있다면
         $header.addClass('clickable').hover(function() {
		//clickable이라는 클래스를 단다 그리고 호버하면
           $header.addClass('hover');
		   //hover이라는 클래스를 달아준다.
         }, function() {
           $header.removeClass('hover');
		   //호버가 안되면 다시 hover이라는 클래스 삭제
         }).click(function() {
			 //자 그리고 클릭시
           var rows = $table.find('tbody > tr').get();
		   //테이블바디에서 tr을 찾아 row로 지정
           rows.sort(function(a, b) {
			 //알파벳순이아닌 값의크기순으로 정렬 하기 인자비교
             var keyA = $(a).children('td').eq(column).text()
              var keyB = $(b).children('td').eq(column).text()
            if (keyA < keyB) return -1;
             if (keyA > keyB) return 1;
             return 0;
           });
           $.each(rows, function(index, row) {
			 //각각 정리된 배열을 다시테이블에삽입.					 
             $table.children('tbody').append(row);
           }); }); }});  }); });

최종정리

위와같이하면 작동되는것을 확인할수있다 하지만 문제는 작동된 후 결과를 보면 색의 정열이 원래 정해진대로 유지되어클릭시 바뀐정열에서도 그대로 적용된다는 점이 문제이다.

여기서 확인해보자http://sianasiatiger.cafe24.com/study/T_usetable_colorER.html

따라서 정렬될떄마다 새롭게 적용되도록 함수를만들어 줘야한다. 이름을 reSortColors로 해주고 다음과 같이 해주었다

  $(document).ready(function() {
   var reSortColors = function($table) {
   //그냥지정했던 짝,홀에따른 클래스부여를
   //함수로 만들어놓았다.
     $('tbody tr:odd', $table)
       .removeClass('even').addClass('odd');
     $('tbody tr:even', $table)
       .removeClass('odd').addClass('even');
   };
   
   $('table.sortable').each(function() {
     var $table = $(this);
     reSortColors($table);
	 //여기서먼저적용
     $('th', $table).each(function(column) {
       var $header = $(this);
       if ($header.is('.sorting')) {
         $header.addClass('clickable').hover(function() {
           $header.addClass('hover');
         }, function() {
           $header.removeClass('hover');
         }).click(function() {
           var rows = $table.find('tbody > tr').get();
           rows.sort(function(a, b) {
             var keyA = $(a).children('td').eq(column).text()
               .toUpperCase();
             var keyB = $(b).children('td').eq(column).text()
               .toUpperCase();
             if (keyA < keyB) return -1;
             if (keyA > keyB) return 1;
             return 0;
           });
           $.each(rows, function(index, row) {
             $table.children('tbody').append(row);
           });	   
           reSortColors($table);
           //또 완료되었을따 다시 적용
            });} });});});

이로서 원했던 결과는완성되었다

확하려면 여기로..http://sianasiatiger.cafe24.com/study/T_usetable.html

저작자 표시
신고

설정

트랙백

댓글

jquery를 이용한 Ajax html데이터 일부분 로드

Ajax 2010.02.10 18:19

jjquery를 이용한 Ajax html일부분 로드하기

Ajax 데이터로드하기 html편에서 이미 html 전체를 로드하는 방법을 봤다. 이번에는 일부분을 로드하는 방법을 살펴보자

html데이타 파일

데이타 파일 안에 두가지로 분류해놓자 클래스명을 하나는 part 또다른 하나는part02 로 정해주었다.

Part one

어쩌고 저쩌고

Part tow

이러히 저러히

메인페이지

jquery를 이용한 ajax 데이터로드 html일부분

로드된 데이터가 들어올자리

리스트에 두가지로 나누었다 하나는 아이디 one을 주었고 하나는 아이디 tow를 주었다. 이제 각각클릭시 part, part02를 부르도록 스크립트를 짜보자

jquery 스크립트

 $(document).ready(function() {
   $('#one a').click(function() {
     $('#content').load('exam.html .part');
     return false;
   });   
   $('#tow a').click(function() {
     $('#content').load('exam.html .part02');
     return false;
   });     
 });

위에서 보면 이제까지와 다른점은 .load(exam.html .part');이부분이다. .load 후에 상세히 부를 클래스가 있다. 따라서 아이드 one을 가진 a엘리먼트를 클릭시 exam.html 문서의 part클래스를 부르게된다.

마지막으로 결과물을 보려면 아래로

http://sianasiatiger.cafe24.com/study/A_ajax_08.html

저작자 표시
신고

설정

트랙백

댓글

jquery를 이용한 Ajax 로딩중 알리기

Ajax 2010.02.09 14:04

jquery를 이용한 Ajax 로딩중 알리기

흔히 긴데이타를 로딩할때 화면에 now loㅁding이라는 것을 봤을것이다.데이타가 간단하면 구차하게 쓸필요 없지만 많고 길 경우 현재상황을 알려줄 필요가 있다. jquery를 이용해서 만들어보자

html로딩 소스 짜기

html엘리먼트로 로딩중임을 알려줄 소스를짜보자 보통 그림을 이용하지만 간단하게하기위해 css로 보여줄것이다. 원하는 모습은 아래와 갔다.

now loading

html과 css로 짜준다면

now loading

css에서 가로 세로 80px박스 그리고 최색배경, 검은색테두리를 사용했다.

div#loading{height:80px;
            width:80px; 
            background:#999;
            border:10px #000 solid;}
div#loading p{color:#FFF}

웹표준, 단계적 기능향상

의미있는 마크업 코딩을 위해 위 html소스를 스크립트로 짜주자. 웹표준에 대해서 잘 봤다면 항상 마크업페이지에는 콘테츠(정보를 알리는 내용)이 우선이며 기능,부가적인것은 css, 스크립트로 구현하도록 권유되어있는것을 잘알고있을 것이다. 지금 하고자하는바는 로딩하다고 알려주는 기능적인것이다 따라서 위의html을 스크립트로 짜주자

$(document).ready(function() {
  $('

now loading

') .insertBefore('#content) });

또 맨처음에는 보이지않아야하므로 css에서 display:none;으로 처리해주자그리고 나타날 위치를 적당히 잡아준다.

div#loading{
 display:none;
 position:absolute;
 margin: 100px 0 0 500px;}

옵저버함수

옵저버 함수는 요청이 현재 처리중임을 알리는 함수이다.jquery에서는 .ajaxStart(), .ajaxStop()이있다.이것을 이용해 스크립트에서 사용해보자

$(document).ready(function() {
  $('
Loading...
') .insertBefore('#content') .ajaxStart(function() { //호출이시작되면 $(this).show(); //보여준다 }).ajaxStop(function() { //호출이 끝나면 $(this).hide(); //감춘다. }); });

이렇게하면 와성된것이다 호출하는 이벤트(이젠예제에서 봤던 클릭이라던가, 검색후) loading 문구가 뜨고 그후 데이타가 나올 것이다.

약간의 딜레이

데이타양이 적은 경우 이같은 기능을 사용할 필요가없다. 굳이 사용하려면 약간의 딜레이를주면된다 맨처음 보여준 html예제 소스를 이용해보자

 $(document).ready(function() {
   $('#part01').click(function() {
     $('#content').hide().load('./ajax_part/abouthtml.html',function() {
		$(this).fadeIn();
		});							
     return false;
   });
 });

.hide().fadeIn()이 사용된것을 볼 수 있을것이다 이에 대해선 이전에 설명해 준것이 있을 것이다.이에 대해선 아래를 참조하자

jQuery-hide-show-fade-애니메이션-메소드

마지막으로 완성한 예제를 볼려면 아래를 클릭

http://sianasiatiger.cafe24.com/study/A_ajax_07.html

저작자 표시
신고

설정

트랙백

댓글

jquery 이용한 Ajax 폼으로 검색하기

Ajax 2010.02.09 12:49

Ajax 데이터로드하기 폼(form) 검색편

데이타가 여러개 있다면 앞서해본것은 클릭시 로드되는데이타였다.이번에는 폼을 이용하여 그중 검색할때 원하는 결과가 나오도록 해보자

기본적인 폼

간단한 검색용 폼을 만들어보자

 

위와같이하면 흔히 보는 검색 박스하나와 검색버큰이 나올것이다.

php데이터 다시보기

데이타는 저번과 같다 다만 검색으로 하기에 php를 조금 수정해줄필요가있다 찬찬히보자

저번에 포스팅한 데이터를 보려면 여기http://siana.tistory.com/entry/Ajax-%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%A1%9C%EB%93%9C%ED%95%98%EA%B8%B0-%EC%84%9C%EB%B2%84%EB%A1%9C-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A0%84%EB%8B%AC-php

if (isset($entries[$_REQUEST['words']])) {
  $entry = $entries[$_REQUEST['words']];
  $html .= '

'; $html .= $_REQUEST['words']; $html .= '

';

위의 것은 저번에 포스팅한 것 그대로다 이상테에서도 폼에서 검색할경우 잘 검색된다. 하지만 대문자,소문자에따라 결과가 다르다. 즉 소문자html이라고 검색하면 데이타에 HTML이라는 데이타가 검색되어 축력되지않는다

아래 소스는 이문제를 해결하고 있다. php의 strtoupper()함수는 소문자를 대문자로 바꾸는 역할을 한다.

c.f) 반대로strtolower() php함수는 대문자를 소문자로 바꾸는 역할을 한다

if (isset($entries[strtoupper($_REQUEST['words'])])) {
  $entry = $entries[strtoupper($_REQUEST['words'])];
  $html .= '

'; $html .= strtoupper($_REQUEST['words']); $html .= '

';

마지막으로 수정할 부분은 이번에는 검색해서 결과가 나오도록 해야하무로 foreach함수로 일일이 검사해보도록하고, 그리고 두번쨰로 첫번째 출력되는값을 검색된것이 나오도록해주는것이다 아래예제에 따로 덧붙이겠다

foreach ($entries as $words => $entry) {
//foreach 구문으로 검색
  if (strpos($words, strtoupper($_REQUEST['words'])) !== FALSE) {
  $html .= '

'; $html .= $words; //검색결과에선 전채단어가필요하니까 //$_REQUEST['words']구문 대신 $words만 쓴다. //$_REQUEST를 쓴다면 검색입력한 값만 h3에나올것이다. $html .= '

'; }

이로서 php파일 수정을 완료했다. 먼저 소문자를입력해도 검색되도록 해주었고, 검색결과가h3엘리먼트에 모두나오게 하도록 $_REQUEST를 html조각만드는 스크립트에서 삭제시켰다.

실행스크립트코드

마지막으로 볼것은 검색시 나오게 하는 스크립트 소스를 짜보자

$(document).ready(function() {
  $('#siadebar form').submit(function() {
  //검색이므로 load대신 submit이 사용되었다.
 $('#content').load('./ajax_part/server.php', {'term': $('input[name="term"]').val()});
    //여기는 그전과 마찬가지
     return false;
 });});

위 처럼 해준다면 검색시 결과가 나올것이다.클릭시 결과가나오도록 우리는 .load()하지만 이번엔 검색시 결과 출력이무로 .submit()을 사용한것이다. 하지만 위와같은 경우는 검색단어를 모두입력해야 결과가 나온다. 즉 html,json등을 모두 입력해야 결과가나오는 것이다. 일부분 검색시 나오도록하려면 아래와 같이해주면된다.

.serialize()

.serialize()는 요청한 문자열을 자동으로 만들어주는 함수이다. ht를 입력할경우 ht가있는 것을 검색하여 문자열을 자동완성시켜 그결과를 보여준다.

$(document).ready(function() {
  $('#siadebar form').submit(function() {
    $.get('./ajax_part/server02.php', 
    $(this).serialize(), function(data) {
    //load방식에서 get방식으로 바꿨고
    //.serialize()가 사용되었다. 
      $('#content').html(data);
    });  return false; });});

마지막을 완성된 예제를 직접보자면 아래를 클릭

http://sianasiatiger.cafe24.com/study/A_ajax_server_02.html

저작자 표시
신고

설정

트랙백

댓글

Ajax 데이터로드하기 서버로 데이터 전달 php

Ajax 2010.02.08 15:22

Ajax 데이터로드하기 서버로 데이터 전달 php

앞서본 포스팅한것들을 정적인 파일들이였다. html,스크립트 파일 단순한 텍스트(text)등으로 이정도는 ajax방법이 아니고도 가능하다.이번엔 동적인 데이타 전송을 살펴보자

동적 데이타파일

ajax를 이용한것은 동적데이타의 경우 브라우저에서 받은 입력값에따라 비동기적으로 되돌려주게 되어있다. 이런 동적파일은 php,java,asp가 있다.여기서 가장 편히 쓰이고 쉽게 할수있는 php로 예를들어보겠다.

php 데이타요청

먼저데이타 파일을 보자 내용은 하나가아닌 여러가지로 분류되어 있다

$entries = array(
   'HTML'=> array(
   'definition' => 'HyperText Markup Language',
   'explantion'	=> '어쩌고 저쩌고',
   ),
   'XML'=> array(
   'definition' => 'extensible markup language',
   'explantion'	=> '어쩌고 저쩌고',
   ),
  );

위에서 세가지를 설명해주고 있다.여기서 php의 문법에 대해선 자세히 알아보지 않겠지만 위의 정도이면 대충 알아봇것이라본다. $는 변수지정 그리고 array는 C언어에서 흔히 배운 행렬에대한 정의방식이다

이번엔 메인페이지에 html을 만들어보자.백과사전 처럼 리스트에서 하나를 클릭할경우 위의 데이타중 소속된것을 불러오도록 할 것이다.


로드된 데이터가 들어올자리

앞선데이타 파일과 그리고 메인페이지는 만들어졌다. 그럼 데이타 파일을 html형식으로 만들어줄 스크립트와 불러줄 스크립트 소스가있으면 되겠다.

클릭시 다음과 같이 나오도록 생각해보자

HTML

HyperText Markup Language

어쩌고 저쩌고

그럼 이걸 소스로 짜준다면은

if (isset($entries[$_REQUEST['words']])) {
  //변수 entries가 있는지 확인한다
  $entry = $entries[$_REQUEST['words']];
  //entry란 변수로 entries에 나열된것들을 요청
  //인자로 words를 사용했다.
  $html .= '

'; $html .= $_REQUEST['words']; $html .= '

'; $html .= '

'; $html .= $entry['definition']; $html .= '

'; $html .= '

'; $html .= $entry['explantion']; $html .= '

'; print($html);//출력 }

메인페이지에 가서 요청할 하이퍼링크를 다시보자


li엘리먼트의 각주소는 php파일의 데이타의 일부를 호출하고있다. 첫번쨰는 html,두번째는 json..

마지막으로 볼것을 이들을 작동시킬 스크립트이다.

$(document).ready(function() {
  $('a').click(function() {
 $.get('./ajax_part/server.php',
  {'words': $(this).text()}, function(data) {
 //get함수로 php파일을 부른다, 인자는words 
      $('#content').html(data);
      //콘텐트에 첨가
    });
    return false; });});

위의 방법은 get함수를 이용한것이다 post방식 역시 별반다를반 없다.

 $.post('./ajax_part/server.php',
  {'words': $(this).text()}, function(data) {

마지막으로 볼것은 더간단한 .load사용하는방법이다

 $('#content').load('e.php', {'term': $(this).text()});

요약

php에 익숙하지않은 사람은 소스가 이해가지않은수있다. 하지만 정적파일을 로드했을때와 모습은 별차이없었다.이제까지 알아본걸 되돌아보면

  • 메인페이지작성
  • 메인페이지에 데이타가 들어올 자리 구성
  • 데이터 마련(html,JSON, php...등
  • 데이타를 html형식으로 바꿔줄 스크립트작성
  • 작동시킬 스크립트작성

마지막으로 덧붙임, 이예제는 php형식의 예제이다. 동적이란것은 서버가 있을때 주고 받음으로서 작동되는 것이다. 따라서 APM으로 로컬로 개인 pc에 서버가 구축되어있지않거나, 별도 마련된 서버에 업로드시켜 확인하지않고 그냥 브라우저로는 당연히 작동되지않는다.맣은사람들이 왜안되냐고 묻곤하는데 동적파일 php임을 생각하자

마지막을 완성된 예제를 직접보자면 아래를 클릭

http://sianasiatiger.cafe24.com/study/A_ajax_server.html


저작자 표시
신고

설정

트랙백

댓글


티스토리 툴바