■ jQuery Mobile 테마
01. 태그에 data-theme 속성을 지정하면 테마를 변경할 수 있다.
아래와 같이 page에 data-theme 속성을 적용하면 페이지 전체에 그 테마가 적용된다.
thema_designation.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>
<!-- jQuery Mobile의 기본 테마는 a 테마이다 -->
<div data-role="page" data-theme="b">
<div data-role="header" data-position="fixed">
<a href="javascript:" data-icon="home" class="ut-btn-left">홈</a>
<h1>Mobile</h1>
<a href="javascript:" data-icon="gear" class="ut-btn-right">설정</a>
<div data-role="navbar">
<ul>
<li><a href="javascript:" data-icon="grid">One</a></li>
<li><a href="javascript:" data-icon="star">Two</a></li>
</ul>
</div>
</div>
<div data-role="center">
<ul data-role="listview">
<li data-role="list-divider">TWICE</li>
<li><a href="javascript:">나연</a></li>
<li><a href="javascript:">정연</a></li>
<li><a href="javascript:">모모</a></li>
<li><a href="javascript:">사나</a></li>
<li><a href="javascript:">지효</a></li>
<li><a href="javascript:">미나</a></li>
<li><a href="javascript:">다현</a></li>
<li><a href="javascript:">채영</a></li>
<li><a href="javascript:">쯔위</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
|
02. 그럼 아래와 같이 페이지 색상이 변경되어 나오는 것을 확인 할 수 있다.
■ jQuery Mobile 테마 부분 적용하기.
01. 각 요소에 테마를 적용하고 변경하면서 사용할 수 있다. 아래코드처럼 data-theme 속성을 변경하면된다.
thema_designation_custom.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" data-theme="b">
<div data-role="header" data-position="fixed">
<a href="javascript:" data-icon="home" class="ut-btn-left" data-theme="a">홈</a>
<h1>Mobile</h1>
<a href="javascript:" data-icon="gear" class="ut-btn-right" data-theme="a">설정</a>
<div data-role="navbar">
<ul>
<li><a href="javascript:" data-icon="grid" data-theme="b">One</a></li>
<li><a href="javascript:" data-icon="star" data-theme="a">Two</a></li>
</ul>
</div>
</div>
<div data-role="center">
<ul data-role="listview">
<li data-role="list-divider">TWICE</li>
<li><a href="javascript:">나연</a></li>
<li><a href="javascript:">정연</a></li>
<li><a href="javascript:">모모</a></li>
<li><a href="javascript:">사나</a></li>
<li><a href="javascript:">지효</a></li>
<li><a href="javascript:">미나</a></li>
<li><a href="javascript:">다현</a></li>
<li><a href="javascript:">채영</a></li>
<li><a href="javascript:">쯔위</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed" data-theme="a">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
|
02. 그럼 a, b 2개의 테마가 혼용되어 나오는 것을 알 수 있다.
■ jQuery Mobile Theme Roller 테마 직접 만들기
테마는 jQuery Mobile Theme Roller(http://themeroller.jquerymobile.com/)를 사용해 만들 수 있다. 해당 사이트에서각 부분에 해당하는 색상을 설정하여 테마를 만들고 다운로드 하여, 기존의 CSS 파일 대신 다운받은 파일을 추가하고 data-theme 속성을 지정하면 사용자가 지정 테마를 마음것 변경 할 수 있다.
