프로그램 소개: http://simulz.com/462
CCTV 직접 선택하기
DIV 영역 또는 체크박스를 클릭하면 선택이 된다.
$('#list div')는 ID가 list인 객체 중 하위 엘레멘트가 div인 객체들을 가리킨다.
CCTV 목록이 여러개이므로 목록 전체를 나타낸다.
.click() 메서드로 클릭 이벤트가 발생하면 스크립트가 실행된다.
$(this)는 계속 사용되므로 $check 변수에 저장하였다.
this 클릭된 객체이다. INPUT을 클릭해도 이벤트 버블링으로 DIV가 클릭된 것처럼 작동한다.
if($check.is(':not(.checked)'))
클릭한 객체가 .checked 클래스를 갖고 있지 않으면,
$check.addClass('checked').find(':not(:checked)').attr('checked',true);
checked 클래스를 추가하고, checked 속성이 없는 체크박스를 찾아서 checked 속성을 추가한다.
else if($check.is('.checked'))
클릭한 객체가 .checked 클래스를 갖고 있으면
$check.removeClass('checked').find(':checked').attr('checked',false);
checked 클래스를 제거하고, checked 속성이 있는 체크박스를 찾아서 checked 속성을 제거한다.
mouseOver.call(this, event);
클릭을 했을 때 툴팁에 표시되는 내용을 즉시 바꾸기 위해 .call() 메서드로 this와 이벤트를 넘겨주고 있다.
mouseOver()는 마우스 오버 효과와 툴팁 표시를 위해 만든 함수이다.
툴팁, 마우스 오버 효과: http://simulz.com/478
toggleResetButton();
사용자 함수이다. CCTV가 한 개 이상 선택 되면 초기화 버튼이 활성화 된다. 선택 되지 않으면 disabled 된다.
초기화 버튼: http://simulz.com/477
