jquery mobile 강좌 8 [ 목록 뷰 / listview / 버튼 나누기 / 검색 만들기 ] (2)

 

 

 

 

리스트의 버튼영역을 2개로 나눌 수 있습니다.

 

이는 a 태그를 2개 사용하는 것으로 만들 수 있으며 자동으로 그 영역이 정해집니다.

 

이번 강좌부터는 section 영역만 소스로 올리겠습니다.

<section id="page1" data-role="page">
    <header data-role="header"><h1>CSS3 Animations</h1></header>                   
    <div class="content" data-role="content">
        <h3>가나다 List</h3>
        <ul data-role="listview">
            <li data-role="list-divider">자음 버튼 나눔</li>
            <li>
                <a href="#">가나다</a>
                <a href="http://www.naver.com">네이버</a>
            </li>
            <li>
                <a href="#">라마바</a>
                <a href="http://www.daum.net">다음</a>
            </li>
            <li data-role="list-divider">모음</li>
            <li><a href="#">아야어여</a>
            </li>
            <li><a href="#">오요우유</a></li>
        </ul>
    </div>
    <footer data-role="footer"><h1>cofs</h1></footer>
</section>

 

첫번째 리스트 그룹과 같이 버튼 영역이 나뉘게 됩니다.

 

 

 

 

다음은 검색기능을 구현해 보겠습니다.

검색 기능은 data-filter="true" 로 구현 가능합니다.

 

<section id="page1" data-role="page">
    <header data-role="header"><h1>cofs header</h1></header>                   
    <div class="content" data-role="content">
        <h3>가나다 List</h3>
        <ul data-role="listview" data-filter="true">
            <li data-role="list-divider">자음 버튼 나눔</li>
            <li>
                <a href="#">가나다</a>
                <a href="http://www.naver.com">네이버</a>
            </li>
            <li>
                <a href="#">라마바</a>
                <a href="http://www.daum.net">다음</a>
            </li>
            <li data-role="list-divider">모음</li>
            <li><a href="#">아야어여</a>
            </li>
            <li><a href="#">오요우유</a></li>
        </ul>
    </div>
    <footer data-role="footer"><h1>cofs footer</h1></footer>
</section>

 

 

 

 

 

 

 

마지막으로 검색 기능을 사용할 때 자동으로 검색 그룹을 지정해 줄 수 있습니다.

 

이는 data-autodividers="true" 속성으로 가능합니다.

<section id="page1" data-role="page">
    <header data-role="header"><h1>cofs header</h1></header>                   
    <div class="content" data-role="content">
        <h3>가나다 List</h3>
        <ul data-role="listview" data-filter="true" data-autodividers="true">
            <li data-role="list-divider">자음 버튼 나눔</li>
            <li>
                <a href="#">가나다</a>
                <a href="http://www.naver.com">네이버</a>
            </li>
            <li>
                <a href="#">라마바</a>
                <a href="http://www.daum.net">다음</a>
            </li>
            <li data-role="list-divider">모음</li>
            <li><a href="#">아야어여</a>
            </li>
            <li><a href="#">오요우유</a></li>
        </ul>
    </div>
    <footer data-role="footer"><h1>cofs footer</h1></footer>
</section>

 

 

 

위의 그림과 2번째 그림을 비교해 보면 그룹의 변화가 확실히 구분됩니다.