안녕하세요!!
이번에 포스팅할 jQuery Mobile 내용은 아이콘 입니다.
jQuery Mobile 은 아주 쉽게 아이콘을 생성할 수 있습니다. 오늘 그 부분에 대해서 알아보겠습니다.
우선 아래 간단한 소스를 보면서 설명드리겠습니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="content">
<a href="#" data-role="button" data-icon="arrow-l">Left Arrow Button</a>
</div>
</div>
</body>
</html>
// 위 구문에서 중요하게 보아야 할 곳은 붉은색으로 표시된 부분입니다. data-icon="arrow-l" 입니다. 여기서 l 은 left 의 줄임말이라고 보면 되겠습니다. 위 구문을 실행하면 아래와 같은 화면이 나오게 됩니다.
// 위 그림을 보면 좌측에 아이콘이 생긴것을 확인할 수 있습니다. 이렇게 아이콘을 만들고 싶은 경우 data-icon 을 이용하여 사용하고 싶은 아이콘을 적어주기만 하면 됩니다. 아래 내용은 기타 아이콘들에 대한 내용입니다. 이미지와 함께 설명하겠습니다.
사용하고 싶은 아이콘을 선택하여 적어주면 됩니다.
기본적인것만 숙지하시고 나머지는 굳이 다 외울 필요는 없을듯 하고 이런게 있구나 정도로 생각하세요~
사용방법은 위 소스에 나와 있으니 한번 테스트 해보시기 바랍니다.
그럼 오늘도 즐거운 하루 보내시고 즐거운 프로그래밍 되세요~
'jQuery > jQuery Tutorial' 카테고리의 다른 글
| jQuery Events hover(), focus(), blur() (0) | 2013.05.10 |
|---|---|
| jQuery events mouseenter(), mouseleave(), mousedown(), mouseup() (0) | 2013.05.10 |
| jQuery Events ( click(). dbclick() ) (0) | 2013.05.10 |
| jQuery Selectors (0) | 2013.05.08 |
| jQuery 기초 (0) | 2013.05.08 |
