반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함


지난 번 글에서 다룬 몇개의 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 해가지고 어떤 작업을 했습니다.


분석하면서 보니까 별로 막히는 부분은 없었네요.

모르는 부분을 미리 보고 해석하니까 잘 진행 됐던것 같습니다.


여기서 더 이 소스를 내것으로 만드려면 이것 저것 수정해 보면서 확실하게 익히는 겁니다.

이게 제가 공부하는 방법입니다.

수정해 보시고 다른 앱에 응용해 보시면 더 좋겠죠.


그럼....

반응형

Comment

이전 1 2 3 4 5 6 7 ··· 10 다음