본문 바로가기

jQuery/jQueryMobile

[jQueryMobile] jQuery Mobile 테마

반응형




■ jQuery Mobile 테마




01. 태그에 data-theme 속성을 지정하면 테마를 변경할 수 있다.

    아래와 같이 pagedata-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 속성을 지정하면 사용자가 지정 테마를 마음것 변경 할 수 있다.







반응형