JQuery Mobile
CHAPTER 4 테마 지정 20116693 안형모
테마와 견본 01 테마란? 인터페이스에 일관적으로 적용되는 시각 디자인 서체, 그림자, 색깔 등 인터페이스에 일관적으로 적용되는 시각 디자인 서체, 그림자, 색깔 등 Jquery Mobile에서는 여러가지 견본(swatch)이 사용가능 견본이란 배경, 텍스트, 그림자, 아이콘 등의 색깔을 조정하는 통일된 색깔 콘셉트 Jquery Mobile 기본 테마는 다섯개 (a, b, c, d, e)
각 견본 예시 02 기본 견본 견본a 견본b
각 견본 예시 03 견본c 견본d 견본e
테마적용 방법 04 기본 견본 <body> <section id="swatch-default" data-role="page"> <header data-role="header"><h1>jQuery Mobile</h1></header> <div class="content" data-role="content"> <h3>Default Swatch</h3> <ul data-role="listview"> <li><a href="#swatch-a">View swatch a</a></li> <li><a href="#swatch-b">View swatch b</a></li> <li><a href="#swatch-c">View swatch c</a></li> <li><a href="#swatch-d">View swatch d</a></li> <li><a href="#swatch-e">View swatch e</a></li> </ul> <p>Some sample form elements and buttons:</p> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button">Yes</a> <a href="#" data-role="button">No</a> <a href="#" data-role="button">Cancel</a> </div> <footer data-role="footer"><h1>O'Reilly</h1></footer> </section>
테마적용 방법 04 견본a <body> <section id="swatch-a" data-role="page" data-theme="a"> <header data-role="header"><h1>jQuery Mobile</h1></header> <div class="content" data-role="content"> <h3>Swatch A</h3> <ul data-role="listview"> <li><a href="#swatch-default">View default swatch</a></li> <li><a href="#swatch-b">View swatch b</a></li> <li><a href="#swatch-c">View swatch c</a></li> <li><a href="#swatch-d">View swatch d</a></li> <li><a href="#swatch-e">View swatch e</a></li> </ul> <p>Some sample form elements and buttons:</p> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button">Yes</a> <a href="#" data-role="button">No</a> <a href="#" data-role="button">Cancel</a> </div> <footer data-role="footer"><h1>O'Reilly</h1></footer> </section>
견본의 조합 05 <section id="swatch-mixed" data-role="page" data-theme="c"> <header data-role="header" data-theme="b"><h1>jQuery Mobile</h1></header> <div class="content" data-role="content"> <h3>Mixing Swatches</h3> <form action="formprocessor.php" method="post"> <div data-role="fieldcontain"> <label for="select-restaurants">Select Your Restaurants:</label> <select id="select-restaurants" name="select-restaurants" data-native-menu="false" multiple="multiple" data-theme="e"> <option value="choose" data placeholder="true">Choose...</option> <optgroup label="French"> </optgroup> </select> </div> </form> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-theme="a">Yes</a> <a href="#" data-role="button" data-theme="e">No</a> <a href="#" data-role="button" data-theme="b">Cancel</a> <footer data-role="footer" data-theme="b"><h1>O'Reilly</h1></footer> </section> </body> </html>
견본 설정하기 06 CSS 파일을 직접 수정 Theme Roller를 활용하여 테마 제작 (jquerymobile.com/themeroller)
사용자 정의 테마 설정하기 03
사용자 정의 테마 설정하기 03 내용
사용자 정의 테마 설정하기 03 <html> <head> <title>jQuery Mobile Application</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="custom.min.css" /> <link rel=“stylesheet” href="http://code.jquery.com/mobile/1.0/jquery.mobile.structure-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head>
목록뷰 요소에 테마 적용하기 03 <body> 목록뷰 요소에 테마 적용하기 03 <body> <section id="swatch-a" data-role=“page” data-theme="a"> <header data-role="header"><h1>Swatch A</h1></header> <div class="content" data-role="content"> <ul data-role="listview" data-split-icon="star" data-divider-theme="e" data-count-theme="b"> <li data-role="list-divider"> French Restaurants <span class="ui-li-count">3</span>
감사합니다