[컴][웹][javascript] 자바 스크립트 MooTools - checkbox

check box 를 check 하면 o 에 해당하는 그림이 보여지고,
check box 를 uncheck 하면 x 에 해당하는 그림이 보여지는 간단한 프로그램이다.

mootools 를 이용해서 작성 해 보았다. Mootools 가 class 를 구현 해 주기 때문에 OOP 등에 익숙 해 있다면, jQuery 보다 훨씬 짜기가 수월한 느낌이다.

laundry_signgen.zip

여기서 사용된 Mootools 의 class 를 몇개 살펴 보자.

var imgElements = []

for(var i=0; i<yesimgs.length; i++){

imgElements[i] = new Element('img', {

src: yesimgs[i]

});

여기서 Element 는 html 의 element 와 관련된 class 이다. 저런 식으로 첫번째 인자는 tag name 이 들어가며, 그 이외의 attribute 에 대해서는 JSON 형식으로 입력을 해준다. event 를 추가할 때도 비슷하다. 아래 checkbox 관련 element 에서는 event handler 를 추가 해 줬으니 확인 해 보자.

var chboxElements = []; for(var i=0; i<imgElements.length; i++){ chboxElements[i]=new Element('input', { type: 'checkbox', id: i, checked: 'true', events:{ click: function(event){ var clickedOne = event.target;                                 var id = clickedOne.getProperty('id'); var img = $$('#output').getElementById('outputYes'                                                                    + clickedOne.getProperty('id')); if(clickedOne.getProperty('checked')) {// if checked imgOutputNoElements[id].dispose();                                         $$('#output_pic').grab(imgOutputYesElements[id]); } else {// if not checked                                     imgOutputYesElements[id].dispose();                                     $$('#output_pic').grab(imgOutputNoElements[id]); } } } }); }

이 소스를 보면, 여러가지 유용한 것들이 나온다. 일단 getProperty('checked') 이다. 이것은 tag element 에서 attribute 의 값을 가져 올 때 사용하는 함수이다.

그리고 grab, adopt / dispose 가 있는데, grab, adopt는 한 element 밑에 child 로 다른 element 를 두려고 할 때 쓰이는 것이며, dispose 는 삭제할 때 쓰인다. 예를 들면, a.grab(b) 를 하면 a 밑에 b 를 child 로 두는 것이고, b.dispoe() 를 하면 b 를 없애는 것이다.