Blog Content

    티스토리 뷰

    jQuery Mobile - 09.리스트에 이미지, 아이콘 추가하기

    반응형

    항목(List)에 이미지, 아이콘을 추가하는 예제입니다.
    이미지를 추가하고 싶다면...
    <li><a href="#"><img src="이미지경로" /></a> </li>  
     

     

     이미지 넣기
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta charset="euc-kr" />             
        <meta name="viewport" content="width=device-width,
                                       initial-scale=1.0,
                                       maximum-scale=1.0,
                                       minimum-scale=1.0,user-scalable=no"/>
        <link rel="shortcut icon" href="../FrameWork/images/icons-18-black.png" />
        <link rel="apple-touch-icon" href="../FrameWork/images/icons-18-black.png" />
        <link href="../framework/jquery.mobile-1.0.css" rel="stylesheet" type="text/css" />            <script src="../framework/jquery-1.6.4.js"></script>
        <script src="../framework/jquery.mobile-1.0.js"></script>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header">
                <h1>이미지 항목</h1>
            </div>
            <div data-role="content">
                <ul data-role="listview">
                    <li><a href="#"><img src="이미지 경로" />List_1</a></li>
                    <li><a href="#"><img src="이미지 경로" />List_2</a></li>
                    <li><a href="#"><img src="이미지 경로" />List_3</a></li>
                </ul>
            </div>
        </div>
    </body>
    </html>
     
    [그림 09-1]

    아이콘을 넣고 싶다면... class="ui-li-icon" 을 선언해주시면 됩니다.
    <li><a href="#"><img src="이미지 경로" class="ui-li-icon" /> />List_2</a></li>

    [그림 09-2]

     

     

    반응형

    Comments