jquery mobile 강좌 10 [ 목록 뷰 / listview / 아코디언 / collapsibleset / accordion ] (4)

2016. 3. 16. 11:40language/jquery mobile

 

 

 

Collapsible set 속성에 대해서 알아봅니다.

 

accordion (아코디언) 이라고도 합니다.

화면의 일부 (영역) 를 숨겨두었다가 클릭 등의 이벤트 발생시 나타내는 기능입니다.

쉽게 말해서 접었다 펼쳤다 하는 기능입니다.

 

list view 를 숨겨두었다가 펼쳐보는 기능을 만들어 봅시다.

 

먼저 소스를 살펴봅니다.

<section id="page1" data-role="page">
    <header data-role="header"><h1>cofs header</h1></header>                   
    <div class="content" data-role="content">
        <div data-role="collapsibleset" data-inset="false">
            <div data-role="collapsible">
                <h3>가나다 List</h3>
                <ul data-role="listview">
                    <li data-role="list-divider">자음 버튼 나눔</li>
                    <li>
                        <a href="#">가나다</a>
                    </li>
                    <li>
                        <a href="#">라마바</a>
                    </li>
                    <li data-role="list-divider">모음</li>
                    <li><a href="#">아야어여</a>
                    </li>
                    <li><a href="#">오요우유</a></li>
                </ul>
            </div>
        </div>
    </div>
    <footer data-role="footer"><h1>cofs footer</h1></footer>
</section>
cs

data-role="collapsibleset" 속성을 가지고 있는 div 태그를 봅니다.

이 태그는 collapsible들을 묵어주는 역할을 합니다.

그리고 그 안에는 data-role="collapsible" 속성을 가진 div 태그가 있습니다.

이 태그역역이 숨겨졌다가 나타났다가 하는 역할을 하게 됩니다.

여러 영역을 숨겨놓고 리스트처럼 보여줄 때에는 <div data-role="collapsible"> 를 여러번 만들면 됩니다.

 



 

그 바로 아래 h3 태그는 data-role="collapsible" 속성을 가진 div 태그의 숨겼다가 나타났다가 하는 버튼의 타이틀을 나타냅니다.

지정하지 않으면 화면에 나오지 않으니 주의바랍니다.

 

그리고 다른 속성들 중에 data-inset="false" 이라는 속성이 있는데 이는 화면의 전체 width 를 차지할 것인지 아니면 좌우 여백을 두고 가운데에 표시할 것인지를 결정합니다.

 

hr 태그 아래부터는 내용입니다.

내용은 위 소스처럼 listview 도 올수 있지만 다른 내용이 올 수 도 있습니다.

 

 

 

 

 

이번에는 listview 로 collapsible 기능을 구현해 봅니다.

collapsibleset 속성을 가진 div나 collapsible 속성을 가진 div 없이 listview 에 collapsible 속성을 추가해서 만들어 봅니다.

단, css 수정이 필요합니다.

 

        <style>
            .ui-li-static.ui-collapsible > .ui-collapsible-heading {
                margin: 0;
            }
            .ui-li-static.ui-collapsible {
                padding: 0;
            }
            .ui-li-static.ui-collapsible > .ui-collapsible-heading > .ui-btn {
                border-top-width: 0;
            }
            .ui-li-static.ui-collapsible > .ui-collapsible-heading.ui-collapsible-heading-collapsed > .ui-btn,
            .ui-li-static.ui-collapsible > .ui-collapsible-content {
                border-bottom-width: 0;
            }
                
        </style>
cs

 

위 스타일 소스를 화면에 삽입합니다.

 

그리고 나서 다음과 같이 작성합니다.

        <ul data-role="listview">
            <li data-role="collapsible" data-inset="false" data-iconpos="right">
                <h2>클릭</h2>
                <ul data-role="listview" data-theme="b">
                    <li data-role="collapsible" data-inset="false" data-iconpos="right"><h2>한번더 클릭</h2>
                        <ul data-role="listview" data-theme="a">
                            <li><a href="#">마지막 리스트1</a></li>
                            <li><a href="#">마지막 리스트2</a></li>
                            <li><a href="#">마지막 리스트3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Eagle</a></li>
                    <li><a href="#">Sparrow</a></li>
                </ul>
            </li>
            <li><a href="#">Humans</a></li>
            <li data-role="collapsible" data-inset="false" data-iconpos="right">
                <h2>Fish</h2>
                <ul data-role="listview" data-theme="b">
                    <li><a href="#">Salmon</a></li>
                    <li><a href="#">Pollock</a></li>
                    <li><a href="#">Trout</a></li>
                </ul>
            </li>
            <li data-role="collapsible" data-inset="false" data-iconpos="right">
                <h2>Choose your preference</h2>
                <form>
                    <fieldset data-role="controlgroup" data-type="horizontal">
                        <label>Birds<input id="choose-birds-regular" type="checkbox"></label>
                        <label>Humans<input id="choose-humans-regular" type="checkbox"></label>
                        <label>Fish<input id="choose-fish-regular" type="checkbox"></label>
                    </fieldset>
                </form>
            </li>
        </ul>
cs

 

여기서 보지 못했던 속성이 있는데 data-iconpos="right" 는 아이콘 버튼을 우측으로 정렬하는 속성입니다.

 

결과는 다음과 같고 직접 실행해 보시기 바랍니다.

 

 

 



 

 

심화 기능

외부 버튼으로 collapsibleset 을 컨트롤 할 수 있습니다.

먼저 collapsible 추가, 펼치기, 접기 기능을 가진 버튼과 collapsibleset 영역을 만듭니다.

<section id="page1" data-role="page">
    <header data-role="header"><h1>cofs header</h1></header>                   
    <div class="content" data-role="content">
        <button id="add" type="button" data-icon="gear" data-iconpos="right" data-inline="true" data-mini="true">Add</button>
        <button id="expand" type="button" data-icon="plus" data-iconpos="right" data-inline="true" data-mini="true">Expand last</button>
        <button id="collapse" type="button" data-icon="minus" data-iconpos="right" data-inline="true" data-mini="true">Collapse last</button>
        <div id="set" data-role="collapsibleset" data-iconpos="right" data-content-theme="a">
            <div id="set1" data-role="collapsible" data-collapsed="true">
                <h3>Section 1</h3>
                <p>I'm the collapsible content.</p>
            </div>
        </div>
    </div>
    <footer data-role="footer"><h1>cofs footer</h1></footer>
</section>
cs

 

 

다음으로 javascript 를 이용하여 collapsible 를 컨트롤 해 봅니다.

<script type="text/javascript">
$( document ).on( "pagecreate"function() {
    var nextId = 1;
    $("#add").click(function() {
        nextId++;
        var content = "<div data-role='collapsible' id='set" + nextId + "'><h3>Section " + nextId + "</h3><p>I am the collapsible content in a set so this feels like an accordion. I am hidden by default because I have the 'collapsed' state; you need to expand the header to see me.</p></div>";
        $( "#set" ).append( content ).collapsibleset( "refresh" );
    });
    $( "#expand" ).click(function() {
        $("#set").children(":last").collapsible( "expand" );
    });
    $( "#collapse" ).click(function() {
        $( "#set" ).children( ":last" ).collapsible( "collapse" );
    });
});
</script>
cs

 

추가할 때 collapsibleset( "refresh" ) 이라는 함수가 있는데 이는 collapsibleset div 태그에 collapsible html 을 append 로 추가한 후 다시 그려주기 위해서 실행하는 함수 입니다.

 

그리고 collapsible( "expand" ) 함수는 collapsible를 펼칠 때 , collapsible( "collapse" ) 함수는 collapsible를 접을 때 사용합니다.