jquery mobile [ Listview 를 이용한 커스텀 accordion 만들기 / 아래로 펼치기, 접기 ]

 

 

 

Listview 를 이용한 커스텀 accordion 만들기 / 아래로 펼치기, 접기

 

 

 

Listview 를 이용해서 accordion 을 만드는 방법에 대해서 설명한다.

 

이 방법은 api 에 있는 기본적인 방법이 아닌 jquery animate 를 사용하여 다른 방식으로 구현한 방법이다.

 

먼저 기본적인 api 에 있는 방법은 아래 링크에서 설명하고 있다.

http://cofs.tistory.com/161

 

 

 

 

내가 구현하고 싶은 모양은 이런 모양이였다. ( 머리속에만 있어서 완성된 화면으로 대체합니다. )

 

 

 

 

두 이미지는 완성된 이미지를 스크린샷 찍은 것이다.

 

 

기본적인 accordion 과는 조금 다른 모양이다. 펼치기/접기를 하는 버튼이 하단에 위치한다.

 

 

만드는 방법은 그리 어렵지 않다.

jquery 를 다룰 줄 아는 사람이라면 쉽게 이해할 수 있을 것이라 생각해서 깊은 설명은 생략했다.

 

 

<section data-role="page" id="015accordion">
    <header data-role="header">
        <h1>jQuery Mobile</h1>
    </header>
    <script>
        var accordionZoneFlag = true; // true : 열기, false : 닫기
        function accordionZoneControl(){
            if(accordionZoneFlag){
                $("#ACCORDION_ZONE").slideDown(400, function(){
                    accordionZoneFlag = false;
                    $("#ACCORDION_ZONE_DOWN").css("display","none");
                    $("#ACCORDION_ZONE_UP").css("display","");
                });
            }else{
                $("#ACCORDION_ZONE").slideUp(400, function(){
                    accordionZoneFlag = true;
                    $("#ACCORDION_ZONE_DOWN").css("display","");
                    $("#ACCORDION_ZONE_UP").css("display","none");
                });
            }
        }
    </script>
    <style>
            .customNotPadding { /* border 0 */
                padding: 0 0 0 0;
            }
    </style>
    <div class="content" data-role="content">
        <ul data-role="listview" data-inset="true">
            <li>
                <div align="center">
                    <h2>아코디언 테스트를 해보자</h2>
                </div>
            </li>
            <li id="ACCORDION_ZONE" style="display: none;">
                숨어있는<br/>
                내용 입니다.<br/>
                아코디언 테스트 ^^
            </li>
            <li data-icon="false">
                <a href="javascript:accordionZoneControl();" class="customNotPadding">
                    <div id="ACCORDION_ZONE_DOWN" align="center" style="height: 20px;">
                        +
                    </div>
                    <div id="ACCORDION_ZONE_UP" align="center" style="height: 20px; display: none">
                        -
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <footer data-role="footer"><h1>cofs</h1></footer>
</section>

6# : 열고 닫음을 저장할 flag 변수이다.

7# ~ 21# : 열고 닫음을 실행할 함수이다. jquery animate 를 사용하여 자연스러운 동작을 만들었고 css 를 사용해서 열고 닫음을 실행하는 버튼의 display 를 컨트롤한다.

24# : listview 에는 padding 이 기본적으로 잡혀있어 이를 제거하려고 style을 class로 정의했다. listview 의 버튼에서 사용된다.

29# : 기본적인 listview 를 정의한다.

35# : 펼쳐졌다 접혀졌다 하는 listview 의 item 이다.

40# : 접기, 펼치기를 할 버튼이다. listview 의 item으로 작성되어있다.

42# ~ 47# : 버튼의 실제 구현부분인데 div로 zone 을 만든 이유는 아이콘이나 기타 text 등이 올 것을 대비해서 넓은 area를 주었다.