■ jQueyr Mobile 아이콘 사용하기
· jQuery Mobile 리시트의 오른쪽에 잇는 화갈표를 다른 이미지로 교체할 수 있다.
· a태그를 하나더 생성하고, data-icon 속성을 입력하면 아이콘을 교체하여 사용할 수 있다.
· jQuery Mobile은 자체적으로 51개의 아이콘을 지원한다.
01. 아이콘을 교체하여 사용하기 위한 코드는 아래와 같다.
data_icon.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">
<ul data-role="listview">
<li>
<a href="javascript:">action</a>
<a href="javascript:" data-icon="action"></a>
</li>
<li>
<a href="javascript:">alert</a>
<a href="javascript:" data-icon="alert"></a>
</li>
<li>
<a href="javascript:">arrow-d</a>
<a href="javascript:" data-icon="arrow-d"></a>
</li>
<li>
<a href="javascript:">arrow-d-l</a>
<a href="javascript:" data-icon="arrow-d-l"></a>
</li>
<li>
<a href="javascript:">arrow-d-r</a>
<a href="javascript:" data-icon="arrow-d-r"></a>
</li>
<li>
<a href="javascript:">arrow-l</a>
<a href="javascript:" data-icon="arrow-l"></a>
</li>
<li>
<a href="javascript:">arrow-r</a>
<a href="javascript:" data-icon="arrow-r"></a>
</li>
<li>
<a href="javascript:">arrow-u</a>
<a href="javascript:" data-icon="arrow-u"></a>
</li>
<li>
<a href="javascript:">arrow-u-l</a>
<a href="javascript:" data-icon="arrow-u-l"></a>
</li>
<li>
<a href="javascript:">arrow-u-r</a>
<a href="javascript:" data-icon="arrow-u-r"></a>
</li>
<li>
<a href="javascript:">audio</a>
<a href="javascript:" data-icon="audio"></a>
</li>
<li>
<a href="javascript:">back</a>
<a href="javascript:" data-icon="back"></a>
</li>
<li>
<a href="javascript:">grid</a>
<a href="javascript:" data-icon="grid"></a>
</li>
<li>
<a href="javascript:">bars</a>
<a href="javascript:" data-icon="bars"></a>
</li>
<li>
<a href="javascript:">bullets</a>
<a href="javascript:" data-icon="bullets"></a>
</li>
<li>
<a href="javascript:">calendar</a>
<a href="javascript:" data-icon="calendar"></a>
</li>
<li>
<a href="javascript:">camera</a>
<a href="javascript:" data-icon="camera"></a>
</li>
<li>
<a href="javascript:">carat-d</a>
<a href="javascript:" data-icon="carat-d"></a>
</li>
<li>
<a href="javascript:">carat-l</a>
<a href="javascript:" data-icon="carat-l"></a>
</li>
<li>
<a href="javascript:">carat-r</a>
<a href="javascript:" data-icon="carat-r"></a>
</li>
<li>
<a href="javascript:">carat-u</a>
<a href="javascript:" data-icon="carat-u"></a>
</li>
<li>
<a href="javascript:">check</a>
<a href="javascript:" data-icon="check"></a>
</li>
<li>
<a href="javascript:">clock</a>
<a href="javascript:" data-icon="clock"></a>
</li>
<li>
<a href="javascript:">cloud</a>
<a href="javascript:" data-icon="cloud"></a>
</li>
<li>
<a href="javascript:">comment</a>
<a href="javascript:" data-icon="comment"></a>
</li>
<li>
<a href="javascript:">delete</a>
<a href="javascript:" data-icon="delete"></a>
</li>
<li>
<a href="javascript:">edit</a>
<a href="javascript:" data-icon="edit"></a>
</li>
<li>
<a href="javascript:">eye</a>
<a href="javascript:" data-icon="eye"></a>
</li>
<li>
<a href="javascript:">forbidden</a>
<a href="javascript:" data-icon="forbidden"></a>
</li>
<li>
<a href="javascript:">forward</a>
<a href="javascript:" data-icon="forward"></a>
</li>
<li>
<a href="javascript:">gear</a>
<a href="javascript:" data-icon="gear"></a>
</li>
<li>
<a href="javascript:">grid</a>
<a href="javascript:" data-icon="grid"></a>
</li>
<li>
<a href="javascript:">heart</a>
<a href="javascript:" data-icon="heart"></a>
</li>
<li>
<a href="javascript:">home</a>
<a href="javascript:" data-icon="home"></a>
</li>
<li>
<a href="javascript:">info</a>
<a href="javascript:" data-icon="info"></a>
</li>
<li>
<a href="javascript:">location</a>
<a href="javascript:" data-icon="location"></a>
</li>
<li>
<a href="javascript:">lock</a>
<a href="javascript:" data-icon="lock"></a>
</li>
<li>
<a href="javascript:">mail</a>
<a href="javascript:" data-icon="mail"></a>
</li>
<li>
<a href="javascript:">minus</a>
<a href="javascript:" data-icon="minus"></a>
</li>
<li>
<a href="javascript:">navigation</a>
<a href="javascript:" data-icon="navigation"></a>
</li>
<li>
<a href="javascript:">phone</a>
<a href="javascript:" data-icon="phone"></a>
</li>
<li>
<a href="javascript:">plus</a>
<a href="javascript:" data-icon="plus"></a>
</li>
<li>
<a href="javascript:">power</a>
<a href="javascript:" data-icon="power"></a>
</li>
<li>
<a href="javascript:">recycle</a>
<a href="javascript:" data-icon="recycle"></a>
</li>
<li>
<a href="javascript:">refresh</a>
<a href="javascript:" data-icon="refresh"></a>
</li>
<li>
<a href="javascript:">search</a>
<a href="javascript:" data-icon="search"></a>
</li>
<li>
<a href="javascript:">shop</a>
<a href="javascript:" data-icon="shop"></a>
</li>
<li>
<a href="javascript:">star</a>
<a href="javascript:" data-icon="star"></a>
</li>
<li>
<a href="javascript:">tag</a>
<a href="javascript:" data-icon="tag"></a>
</li>
<li>
<a href="javascript:">user</a>
<a href="javascript:" data-icon="user"></a>
</li>
<li>
<a href="javascript:">video</a>
<a href="javascript:" data-icon="video"></a>
</li>
</ul>
</div>
<div data-role="footer" >
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
|
02. 위 코드를 출력한 브라우의 우측의 아이콘이 설정된 값으로 변경된 것을 확인 할 수 있다.
