지난 번 글에서 다룬 몇개의 jQuery API들은 오늘 분석할 샘플 코드에 있길래 미리 공부해 봤습니다.
우선 전체 소스 부터 볼께요.
<!DOCTYPE HTML>
<html>
<head>
<title>checkbox</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
var myArray = [];
$(document).ready(function() {
// put all your jQuery goodness in here.
myArray[myArray.length] = 'Item - 0';
checkboxRefresh();
});
function checkboxRefresh(){
var newhtml = "<fieldset data-role=\"controlgroup\">";
newhtml +="<legend>Select items:</legend>" ;
for(var i = 0 ; i < myArray.length; i++){
newhtml += "<input type=\"checkbox\" name=\"checkbox-"+i+"a\" id=\"checkbox-"+i+"a\" class=\"custom\" />" ;
newhtml += "<label for=\"checkbox-"+i+"a\">"+myArray[i]+"</label>";
}
newhtml +="</fieldset>";
$("#checkboxItems").html(newhtml).page();
//$('input').checkboxradio('disable');
//$('input').checkboxradio('enable');
//$('input').checkboxradio('refresh');
//$('input:checkbox').checkboxradio('refresh');
$("input[type='checkbox']").checkboxradio("refresh");
$('#my-home').page();
}
$('#bAdd').live('click', function () {
myArray[myArray.length] = 'Item - ' + myArray.length;
checkboxRefresh();
});
</script>
</head>
<body>
<div data-role="page" data-theme="b" id="my-home">
<div id="my-homeheader">
<h1 id="my-logo">checkbox</h1>
</div>
<div data-role="content">
<div id="checkboxItems" data-role="fieldcontain"></div>
<fieldset class="ui-grid-b">
<div data-role="controlgroup" data-type="horizontal">
<a id="bAdd" href="#" data-role="button" data-icon="plus" >Add new item</a>
</div>
</fieldset>
</div>
</div>
</body>
</html>
핵심은 bold 처리한 자바스크립트 부분입니다
맨 처음에 myArray라는 배열 변수를 선언 했고 그 다음 $(document).ready(function() {} 이 있습니다.
이건 페이지가 로딩하면 DOM 에 로딩된 직후에 곧바로 실행되는 jQuery 함수입니다.
그 내용을 보니 myArray 에 Item-0 을 대입했네요. 방금전에 빈 myArray[] 배열 변수를 선언했으니까 myArray.length는 0 이겠죠. 그러니까 myArray[0] = 'Item - 0'; 이 실행 됐을 겁니다.
다음에는 checkboxRefresh(); 함수를 call 했네요.
그럼 checkboxRefresh() 함수를 볼까요.
여기에는 newhtml 이라는 변수에 html 코드를 넣었습니다.
fieldset data-role=controlgroup .... 이렇게 계속 넣다가 for 문을 돌리네요.
myArray.length; 만큼 돌리면서 myArray 배열에 있는 값들을 하나 하나 표시하는 for 문입니다.
checkbox를 넣고 그 다음에 배열의 i 번째에 있는 값을 표시하고 그러네요.
마지막엔 </fieldset> 으로 태그를 닫아 주구요.
다음에 $("#checkboxItems").html(newhtml).page(); 가 나옵니다.
밑에 body 안에 보면 id가 checkboxItems 라는 div가 나오죠. 이 안에 newhtml 값을 넣습니다. 지난 글에서 살펴 봤던 .html() 메소드를 사용했습니다. 태그까지 전부 다 넣는 거예요.
그 다음 .page() 가 있는데. 이건 jQuery Mobile 메소드 입니다.
솔직히 뭘 하는지 정확하게 모르겠습니다. 이부분을 빼도 제대로 작동이 되던데...
아마 jQuery Mobile 의 data-role=page 부분에 넣는 것 아닐까요?
사실 $("#checkboxItems").html(newhtml); 여기 까지만 놓고 그 아래 내용은 지워도 원하는 동작은 제대로 합니다.
하여간 그 아래를 보면 .checkboxradio("refresh"); 는 체크박스를 refresh 하는 것 같고 그 아래는 my-home 이란 아이디를 가지고 있는 div (여기서는 data-role=page) 전체를 page()에 담습니다.
여기까지 하면 myArray 배열에 값이 한개 있기 때문에 1개의 checkboxbutton 만 화면에 나타나겠죠. 이제 버튼을 누르면 라디오 버튼이 하나씩 추가 되는 기능을 보겠습니다.
$('#bAdd').live('click', function () {} 함수가 그 역할을 합니다. .live() jQuery 메소드는 이전 글에서 공부했습니다.
앞에 있는 bAdd 라는 아이디를 갖고 있는 태그 안의 부분을 클릭하면 함수 내에 선언된 동작을 하게 됩니다.
안에를 보면 myArray.length 가 나오죠. 이건 배열의 갯수 이니까. 아까 페이지 오픈할 때 한개가 생겼으니까 1 이 됩니다. 자바계열에서는 배열의 시작을 0부터 시작하니까 myArray[1] 이 되면 두번째가 됩니다.
그러니까 bAdd를 클릭 할 때마다 배열이 한개씩 늘어 나게 되겠죠.
그리고 나서 checkboxRefresh() 를 부르게 되면 배열 갯수 만큼 checkboxbutton을 화면에 뿌려주는 로직이니까 하나씩 늘어나게 될 겁니다.
여기까지가 동적인 효과를 주는 자바스크립트 부분입니다.
대부분 jQuery 메소드를 사용했습니다.
그 아래 body 부분은 html 입니다.
jQuery Mobile 에 대해서 알아야겠죠? 이 코드를 이해하려면요.
처음에 data-role로 페이지를 설정했고 style은 b 로 적용했고 이 페이지의 id는 my-home 입니다.
이 아이디는 checkboxRefresh() 함수에서 맨 마지막에 .page() 메소드를 사용할 때 이용됩니다.
그리고 아래 내용 중에 봐야될 부분은 data-role="content" 부분이 있고 (이것도 jQuery Mobile의 중요한 개념입니다.) 그 안에 data-role="fieldcontain" 이 있습니다.
jQuery Mobile이 생소하신 분들은 이 data-role에 대해 알아야 겠다는 느낌이 팍팍 드시죠?
따로 찾아 보시기 바랍니다.
제 블로그에도 정리가 돼 있습니다.
위에 자바스크립트를 보시면 새로 추가되는 체크박스 버튼이 fieldcontain (id="checkboxItems") 안에 추가 되고 있습니다.
id는 이렇게 자바스크립트에서 catch해서 어떤 작업을 할 때 요긴하게 쓰입니다.
그 다음은 data-role="controlgroup" 이 있죠. 아마 button을 그룹화 할 때 사용하는 data-role 일 겁니다.
그리고 그 안에는 버튼을 한개 만들었습니다. 여기서 id="bAdd" 를 갖고 위에 자바스크립트에서 catch 해가지고 어떤 작업을 했습니다.
분석하면서 보니까 별로 막히는 부분은 없었네요.
모르는 부분을 미리 보고 해석하니까 잘 진행 됐던것 같습니다.
여기서 더 이 소스를 내것으로 만드려면 이것 저것 수정해 보면서 확실하게 익히는 겁니다.
이게 제가 공부하는 방법입니다.
수정해 보시고 다른 앱에 응용해 보시면 더 좋겠죠.
그럼....
GroupedButtons.html
