jQuery | javascript | CSS

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

Godffs 2012. 9. 19. 01:49
반응형

항목(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]

 

 

반응형