[모바일WEB-APP] Jquery-Mobile기초 – 테마

6. Jquery Mobile 기초 – 테마

(1) 테마의 확장

가) CSS 구조

테마의 확장을 위해서는 기본적으로 css 를 수정하여야 하는데 그전에 jquery-mobile 에서 제공하는 css 파일의 구조를 먼저

알아보자. Jquery-Mobile CSS 는 Swatches와 Structure 로 구성되어 있다.

Jquery-Mobile 에서는 아래와 같이 Structure CSS 와 Swatches CSS 를 따로 제공하고 있다.

확장을 위해서 가장 추천하는 방법은 – jquery.mobile.structure-1.1.2.min.css 와 – jquery.mobile.theme-1.1.2.css

를 사용하는 방법을 추천한다.

– jquery.mobile-1.1.2.css

– jquery.mobile-1.1.2.min.css

– jquery.mobile.structure-1.1.2.css

– jquery.mobile.structure-1.1.2.min.css

– jquery.mobile.theme-1.1.2.css

– jquery.mobile.theme-1.1.2.min.css

나) Theme Roller 사용

– Jquerty-Mobile Thme Rooler 사이트 이동 : http://jquerymobile.com/themeroller/

– jquery.mobile.theme-1.1.2.css 전체 내용 Clip Board Copy

– Theme Roller 상단에 Import 에서 붙여 넣기

– CSS 파일이 IMPORT 됨

– 좌측 위에 + 버튼을 눌러서 F 탭을 만듬

– F 탭의 CSS 를 편집하고

– Download 버튼을 눌러 ZIP 파일을 다운로드 받으면 변경된 CSS 를 확인 할 수 있다.

다) 변형된 CSS 의 활용

[예제] 새로 추가한 CSS 를 추가

– THEME 부분은 새로 만든것을 , Struc 부분은 기본의 것을 사용

<link rel=”stylesheet” href=”./themes/aaaaa.min.css” />
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.1.2/jquery.mobile.structure-1.1.2.min.css” />

[예제] 새로 추가한 테마를 적용한다.

– 새로 추가했던 것은 F , 이런식으로 추가적으로 THEME 를 추가할 수 있다.

<div data-theme = “f” data-role=”header” data-position=”fixed”>
<h1>기본 테마</h1>
<a href=”#” data-icon=”arrow-l”>Prev</a>
<a href=”#” data-icon=”arrow-r” data-iconpos=”right”>Next</a>
</div>

11 thoughts on “[모바일WEB-APP] Jquery-Mobile기초 – 테마”

  1. Hello there, just became aware of your blog through Google, and found
    that it is really informative. I am going to watch out
    for brussels. I will be grateful if you continue this in future.
    Numerous people will be benefited from your writing.

    Cheers!

  2. I don’t know how I ended up being here, but I thought this
    post was great. I don’t know who you are but certainly you’re going
    to a famous blogger if you are not already 😉 Cheers!

  3. Wonderful article! This really is the level of info
    that are meant to be shared all over the web. Shame on Google for
    now not positioning this set up higher! Come on over and talk to my internet site
    . Thanks =)

  4. I am just not sure where you’re getting your info,
    however great topic. I must spend some time studying considerably more or understanding
    more. Thanks for great info I used to be looking for this information for
    my mission.

  5. Thank you for any other informative blog.
    The place else could I get that kind of information written in such an ideal method?

    I’ve a project that I am just now working on, and
    I have been on the look out for such information.

  6. Oh my goodness! Awesome article dude! Thanks, However I
    am encountering troubles with your RSS. I don’t know the reason why I can’t join it.
    Is there anybody getting identical RSS issues? Anyone that knows the solution can you kindly respond?
    Thanks!!

  7. naturally such as your web-site however you
    must test the spelling on a good number of of your own posts.
    Several of them are rife with spelling issues and I to discover
    it very bothersome to know the veracity however I’ll surely
    come back again.

  8. I don’t even be aware of way I ended up here, however I believed this publish used
    to be good. I don’t realize who you are but certainly you happen to be going to
    a famous blogger should you will not be already. Cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *