jquery mobile 강좌 9 [ 목록 뷰 / listview / 말풍선 count bubbles / 아이콘 icon / 썸네일 / thumbnails] (3)

 

 

 

 

이번 강좌는 말풍선 생성, 우측 버튼 아이콘 변경, 좌측 아이콘 생성, 좌측 썸네일 생성 하는 방법까지 총 4가지를 공부하겠습니다.

 

 

위에 나열된 4가지 기능 모두 jquery mobile 에서 제공되니 간편하게 만들 수 있습니다.

 

 

1. 말풍선 생성 ( Count bubbles )

말풍선은 다음 그림처럼 자연스럽게 ui를 제공하고 있습니다.

 

 

li 태그에 안에 span 태그를 사용하고 ui-li-count 클래스를 지정하면 말풍선을 위 그림처럼 표현할 수 있습니다.

    <ul data-role="listview">
            <li data-role="list-divider">말풍선 표시</li>
            <li>
                <a href="#">가나다<span class="ui-li-count">12</span></a>
            </li>
            <li>
                <a href="#">라마바<span class="ui-li-count">80</span></a>
            </li>
        </ul>

 

 

 

 

2. 우측 아이콘 변경

우측 아이콘은 다음 그림처럼 변경 가능합니다.

 

 

li 태그에 data-icon 속성을 이용하면 가능합니다.

        <ul data-role="listview">
            <li data-role="list-divider">아이콘 변경 1</li>
            <li data-icon="delete">
                <a href="#">삭제 아이콘</a>
            </li>
            <li data-icon="info">
                <a href="#">정보 아이콘</a>
            </li>
        </ul>

 

 

아이콘은 delete, gear, info, false(표시안함) 등이 있고 사용자가 직접 만들 수 도 있습니다.

.ui-icon-custom:after {
    background-image: url("이미지경로");
    background-position: 3px 3px;
    background-size: 70%;
}
 

위와 같이 css 를 지정한 후

<li id="skull" data-icon="custom"><a href="#">custom-icon</a></li>

이렇게 data-icon 속성을 지정하면 사용자가 만든 아이콘으로 변경할 수 있습니다.

 

 

 

3. 좌측 아이콘 생성

좌측에 작은 아이콘을 생성하는 방법또한 간단합니다.

단, 아이콘 사이즈는 16 X 16 픽셀을 권고합니다.

 

 

li 태그 내부에 a 태그 안에 img 태그를 만들고 class를 ui-li-icon 을 지정 후 이미지 경로를 설정하면 가능합니다.

        <ul data-role="listview">
            <li data-role="list-divider">아이콘 변경 2</li>
            <li>
                <a href="#"><img class="ui-li-icon" alt="France" src="http://api.jquerymobile.com/resources/listview/images/gf.png">To use standard 16x16 pixel icons in list items</a>
            </li>
            <li>
                <a href="#"><img class="ui-li-icon" alt="France" src="http://api.jquerymobile.com/resources/listview/images/de.png">image element and insert 16x16 icons</a>
            </li>
        </ul>

 

 

 

4. 좌측 썸네일 생성 ( Thumbnails )

좌측 썸네일 역시 img 태그를 이용합니다.

이미지 크기는 80픽셀의 정사각형을 권고합니다.

 

 

특별히 클래스를 지정한다거나 할 필요는 없습니다.

img 태그 하나면 충분합니다.

        <ul data-role="listview">
            <li>
                <a href="#">
                    <img src="http://api.jquerymobile.com/resources/listview/images/album-hc.jpg">
                    <h2>Broken Bells</h2>
                    <p>The framework will scale the image to 80 pixels square</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://api.jquerymobile.com/resources/listview/images/album-p.jpg">
                    <h2>Broken Bells</h2>
                    <p>The framework will scale the image to 80 pixels square</p>
                </a>
            </li>
        </ul>

 

 

 

 

 

 

 

 

전체 소스와 결과입니다.

<section id="page1" data-role="page">
    <header data-role="header"><h1>cofs header</h1></header>                   
    <div class="content" data-role="content">
        <h3>listview 입니다.</h3>
        <ul data-role="listview">
            <li data-role="list-divider">말풍선 표시</li>
            <li>
                <a href="#">가나다<span class="ui-li-count">12</span></a>
            </li>
            <li>
                <a href="#">라마바<span class="ui-li-count">80</span></a>
            </li>
            <li data-role="list-divider">아이콘 변경 1</li>
            <li data-icon="delete">
                <a href="#">삭제 아이콘</a>
            </li>
            <li data-icon="info">
                <a href="#">정보 아이콘</a>
            </li>
            <li data-role="list-divider">아이콘 변경 2</li>
            <li>
                <a href="#"><img class="ui-li-icon" alt="France" src="http://api.jquerymobile.com/resources/listview/images/gf.png">To use standard 16x16 pixel icons in list items</a>
            </li>
            <li>
                <a href="#"><img class="ui-li-icon" alt="France" src="http://api.jquerymobile.com/resources/listview/images/de.png">image element and insert 16x16 icons</a>
            </li>
            <li data-role="list-divider">아이콘 변경 3</li>
            <li>
                <a href="#">
                    <img src="http://api.jquerymobile.com/resources/listview/images/album-hc.jpg">
                    <h2>Broken Bells</h2>
                    <p>The framework will scale the image to 80 pixels square</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://api.jquerymobile.com/resources/listview/images/album-p.jpg">
                    <h2>Broken Bells</h2>
                    <p>The framework will scale the image to 80 pixels square</p>
                </a>
            </li>
        </ul>
    </div>
    <footer data-role="footer"><h1>cofs footer</h1></footer>
</section>