반응형
■ jQueyr Mobile 리스트에 이미지 사용하기
· 리스트에 이미지를 넣고 싶을 때는 곱다로 img 태그를 넣어주면 된다.
· img 태그를 넣으면 jQuery Mobile이 자동으로 이미지를 80 × 80의 크기로 변경해 삽입한다.
01. 이미지를 삽입하기 위한 코드는 아래와 같다.
list_img.php |
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> <link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/> <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="first_page"> <div data-role="header"> <h1>Mobile</h1> </div> <div data-role="center" style="padding:10px;"> <ul data-role="listview" data-inset="true"> <li> <a href="javascript:"> <img src="./image/cat_banjo.png"/> <h3>CAT BANJO</h3> </a> </li> <li> <a href="javascript:"> <img src="./image/cat_cupid.png"/> <h3>CAT CUPID</h3> </a> </li> <li> <a href="javascript:"> <img src="./image/cat_food.png"/> <h3>CAT FOOD</h3> </a> </li> <li> <a href="javascript:"> <img src="./image/cat_lady.png"/> <h3>CAT LADY</h3> </a> </li> </ul> </div> <div data-role="footer"> <h1>FOOTER</h1> </div> </div> </body> </html> |
02. 출력하면 아래와같이 리스트앞에 이미지가 출력되는 것을 확인 할 수 있다.
반응형
'jQuery > jQueryMobile' 카테고리의 다른 글
| [jQueryMobile] jQueryMobile 입력 양식 (0) | 2016.10.24 |
|---|---|
| [jQueryMobile] jQueryMobile의 페이지 이동 (0) | 2016.10.21 |
| [jQueyrMobile] 아이콘 사용하기 (0) | 2016.10.21 |
| [jQueyrMobile] 리스트 구분자 사용 및 그룹화 (0) | 2016.10.21 |
| [jQueyrMobile] 다이얼로그(알림) 창 띄우기 (0) | 2016.10.21 |
