Simulz :: (jQuery) 의정부시 CCTV 소스 강좌

(jQuery) 의정부시 CCTV 소스 강좌 - 프리셋 선택하기

PC&웹/웹프로그래밍 : 2010/01/21 15:27

프로그램 소개: http://simulz.com/462

프리셋으로 선택하기

미리 설정된 CCTV들을 자동으로 선택한다.

$('#left_foot button')
ID가 left_foot인 객체에 속해있는 하위 엘레멘트인 button 객체들을 가리킨다.

.click() 메서드로 클릭 이벤트가 발생하면 스크립트가 실행된다.

$('#list :checkbox').attr('checked',false).parent().removeClass('checked');
#list에 속해 있고, 체크박스 객체들을 모두 가리킨다.
.attr() 메서드로 checked 속성을 제거하고,
.parent() 메서드는 상위 객체인 DIV를 카리킨다.
그 다음 removeClass() 메서드로 checked 클래스를 제거한다.

$.each(cctv_preset(this.id), function(index) {});
.each() 메서드는 반복문으로 배열을 순회한다.

cctv_preset(this.id)는 CCTV 프리셋이 저장된 사용자 함수로 this.id(버튼의 ID값)을 넘겨주면 cctv 번호가 있는 배열을 리턴한다.

첫번째 인자는 배열이며 보통은 jQuery 객체로 아래 처럼 사용할 수 있다.

index는 0부터 시작하는 번호이다. 위 소스에서는 index가 필요 없으므로 생략하였다.

$('#c' + this).attr('checked',true).parent().addClass('checked');
.each(function(){}); 내부에서는 배열의 값을 this로 얻을 수 있다.
배열의 값이 1이면
ID가 #c1인 객체(INPUT)를 가리킨다.
그 다음 .attr() 메서드로 checked 속성을 추가하고
.parent() 메서드로 상위 객체로 이동 후,
.addClass() 메서드로 checked 클래스를 추가한다.
직접 클릭했을 때와 같은 동작을 한다.

'PC&웹 > 웹프로그래밍' 카테고리의 다른 글

(jQuery) 의정부시 CCTV 소스 강좌 - 툴팁, 마우스 오버 효과 (2)	2010/01/21
(jQuery) 의정부시 CCTV 소스 강좌 - 초기화 버튼 토글 (0)	2010/01/21
(jQuery) 의정부시 CCTV 소스 강좌 - 프리셋 선택하기 (0)	2010/01/21
(jQuery) 의정부시 CCTV 소스 강좌 - 직접 선택하기 (0)	2010/01/21
(jQuery) 서버에 데이터 전송하기 (0)	2010/01/20
(jQuery) 외부 파일 불러오기 (1)	2010/01/20