반응형
항목(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> |
아이콘을 넣고 싶다면... class="ui-li-icon" 을 선언해주시면 됩니다.
<li><a href="#"><img src="이미지 경로" class="ui-li-icon" /> />List_2</a></li>
반응형
'jQuery | javascript | CSS' 카테고리의 다른 글
jQuery Mobile - eclipse 에서 jQueryMobile 실행하기 -1 (0) | 2013.03.10 |
---|---|
jQuery Mobile - 10.모바일 접속시 화면에 맞게 크기 설정하기 (2) | 2012.10.03 |
jQuery Mobile - 08.중첩 리스트 (0) | 2012.09.18 |
jQuery Mobile - 07. 탭(Tab) 만들기 (0) | 2012.09.17 |
jQuery Mobile - 06.리스트(List) (0) | 2012.09.17 |
Comments