dom52 jQuery 기능적 폼(form) 만들기 jQuery 기능적 폼(form) 만들기 jQuery 이용하여 좀더 기능적으로 form을 만들어보자.기본적인 폼의코드는 다음과 같다 개인 정보 입력 이름 (필수) 연락방법을 선택하세요 (적어도 하나) E-Mail (선택) Phone (선택) Fax (선택) 이름을입력할 input엘리먼트는 클래스명을required 그리고 나머지들은 클래스명을 conditional로 주었다.이코드를 다음과 같이 수정할것이다. legend엘리먼트를 다른 엘리먼트로 대체하여 좀더 편리하게 css로 꾸미게 한다 반드시 입력할 이름란에 '*'를 또 다른 입력란에는 '**'를 필수, 선택 대신으로 대체시킨다 필요한 선택입력 항목 박스를 클릭시 텍스트 입력 박스가 보이도록 또 감추도록한다. 엘리먼트 수정 legend엘리먼트는 css로.. 2010. 2. 18. ajax 테이블 페이징 ajax 테이블 페이징 jquery를 이용한 ajax 테이블 페이징 테이블에 여러자료가 있고 그것이 아주많다면 한페이지에 다루기 힘들것이다. 따라서 일부분만보여주고 페이지로 나누어 보여주려고 한다. 여전히 네이버 베스트셀러리스트를 참조했다. 소스가기니 접어두었다.아래 참조 베스트셀러 순위 책제목 저자 출판사 가격 1 덕혜옹주 권비영 다산책방 11,800원 2 삼성을 생각한다 김용철 사회평론 22,000원 3 죽을 때 후회하는 스물다섯 가지 오츠 슈이치 21세기북스 12,000원 4 시크릿 두 번째 이야기 폴 해링턴 살림 12,000원 5 1Q84 무라카미 하루키 문학동네 14,800원 6 마법의 돈관리 고득영 국일미디어 12,000원 7 박철범의 하루공부법 박철범 다산에듀 12,000원 8 엄마를 부탁해.. 2010. 2. 17. jquery를 이용한 ajax 테이블 정렬 순서변경 jquery를 이용한 ajax 테이블 정렬 순서변경 오름차순과 내림차순 방법으로 모두 정렬하려면 이번엔 다른 키코드를 삽입해야 한다. 이제까지는 오름차순만 사용했지만 이번에 변수를 넣어서 클릭시 차순이 변화되도록 해보자. if (a.sortKey b.sortKey) return 1; return 0; 저번에 보았던 비교 값을 이용한 정렬이다. 만약 숫자가 작다면 -1 값을 반환 크다면 1을 반환 상관없으면 0을 반환하도록 되어있다. 이를이용하여 오름차순으로 정렬되게 했다. 자그럼다음코드를 보자 if (a.sortKey b.sortKey) return -1; retu.. 2010. 2. 17. 자바스크립트 메모리 누수 자바스크립트 메모리 누수 C언어들에서는 임시적으로 지정한 포인트라던가 이런것들이 자동 삭제 되지만 자바스크립트에서는 그렇지않다.별도 용도로 지정한 변수가 역할이 끝났지만 그대로 남아있기에 메모리를 여전히 차지하게되고 따라서 후에 많은 함수들이 사용되면 언제 방해될지모르는일이다.이를 메모리 누수(memory leak)라고 말한다 테이블 정렬 수행속도테이블 정렬 수행속도이포스팅의 예제를다시보자 $.each(rows, function(index, row) { row.sortKey = $(row).children('td').eq(column) //별도로 sortKey 로 지정해주고 .text().toUpperCase(); }); rows.sort(function(a, b) { //여기서 따로 수행처리하도록 if.. 2010. 2. 17. jquery를 이용한 ajax 테이블 정렬 수행속도 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; return 0; }); $.each(rows, function(index, row) { 위와같은경우는 비교할때 key.. 2010. 2. 17. jquery를 이용한ajax 테이블 정렬 jquery를 이용한ajax 테이블 정렬 여러책을 놔두고 베스트셀러를 주제로 테이블에 정렬시켜보자. 기본적으로 팔려나가는 순위되로 나영시켜놓고 책제목, 순위, 저자, 가격순으로 클릭시 정렬되게 해보자 네이버에 올라와있는 베스트셀러를 참조했다. 다음과같은 이미지를 모델로 할것이다 html은 다음과 같이짜주었다. 너무길기에 아래 내용들은 생략.그리고 테이블 웹표준 코딩에 대해서 저세히 알고싶다면 표준웹코딩게시물을 보도록 긴 소스기에 접어놓았다 베스트셀러 순위 책제목 저자 출판사 가격 1 덕혜옹주 권비영 다산책방 11,800원 2 삼성을 생각한다 김용철 사회평론 22,000원 3 죽을 때 후회하는 스물다섯 가지 오츠 슈이치 21세기북스 12,000원 4 시크릿 두 번째 이야기 폴 해링턴 살림 12,000원 5.. 2010. 2. 12. jquery를 이용한 Ajax html데이터 일부분 로드 jjquery를 이용한 Ajax html일부분 로드하기 Ajax 데이터로드하기 html편에서 이미 html 전체를 로드하는 방법을 봤다. 이번에는 일부분을 로드하는 방법을 살펴보자 html데이타 파일 데이타 파일 안에 두가지로 분류해놓자 클래스명을 하나는 part 또다른 하나는part02 로 정해주었다. Part one 어쩌고 저쩌고 Part tow 이러히 저러히 메인페이지 jquery를 이용한 ajax 데이터로드 html일부분 html 일부분_01 html 일부분_02 로드된 데이터가 들어올자리 리스트에 두가지로 나누었다 하나는 아이디 one을 주었고 하나는 아이디 tow를 주었다. 이제 각각클릭시 part, part02를 부르도록 스크립트를 짜보자 jquery 스크립트 $(document).ready.. 2010. 2. 10. jquery를 이용한 Ajax 로딩중 알리기 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#loadin.. 2010. 2. 9. jquery 이용한 Ajax 폼으로 검색하기 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.. 2010. 2. 9. Ajax 데이터로드하기 서버로 데이터 전달 php Ajax 데이터로드하기 서버로 데이터 전달 php 앞서본 포스팅한것들을 정적인 파일들이였다. html,스크립트 파일 단순한 텍스트(text)등으로 이정도는 ajax방법이 아니고도 가능하다.이번엔 동적인 데이타 전송을 살펴보자 동적 데이타파일 ajax를 이용한것은 동적데이타의 경우 브라우저에서 받은 입력값에따라 비동기적으로 되돌려주게 되어있다. 이런 동적파일은 php,java,asp가 있다.여기서 가장 편히 쓰이고 쉽게 할수있는 php로 예를들어보겠다. php 데이타요청 먼저데이타 파일을 보자 내용은 하나가아닌 여러가지로 분류되어 있다 $entries = array( 'HTML'=> array( 'definition' => 'HyperText Markup Language', 'explantion'=> '어.. 2010. 2. 8. 이전 1 2 3 4 5 6 다음
