Jquery 모바일: 버튼 아이콘
Jquery 모바일: 버튼 아이콘
Jquery 모바일은 18종류의 버튼 아이콘을 제공한다.
data-icon으로 아이콘 종류를 선택하고, data-iconpos로 아이콘의 위치를 정할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery Mobile Dialog</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- 버튼 위에 아이콘 출력. -->
<section id="page1" data-role="page">
<header data-role="header">
<h1>JQuery Mobile</h1>
</header>
<div class="content" data-role="content">
<p>첫 번째 페이지</p>
<a href="#page1" data-role="button" data-icon="delete">삭제 버튼</a>
<button data-icon="plus">플러스</button>
<input type="button" value="마이너스" data-icon="minus" />
<a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">오른쪽 화살표</a>
<a href="#" data-role="button" data-icon="arrow-l">왼쪽 화살표</a>
<a href="#" data-role="button" data-icon="arrow-u" data-iconpos="top">위쪽 화살표</a>
<a href="#" data-role="button" data-icon="arrow-d" data-iconpos="bottom">아래 화살표</a>
<a href="#" data-role="button" data-icon="gear">환경설정</a>
<a href="#" data-role="button" data-icon="arrow-d" data-iconpos="notext">아이콘만 출력</a>
</div>
<footer data-role="footer">
<h2>ⓒcopyright 2016</h2>
</footer>
</section>
</body>
</html>
