'theme'에 해당되는 글 2건

jQuery 의 Style 이나 javascript 가 해당 페이지의 DOM 요소를 로드하기 전에 수행되어 지는 이벤트가 있습니다.

즉 $(document).ready() 이벤트가 수행되기전에 자동적으로 적용됩니다.

만약에 초기구성을 바꿀필요가 있을때 해당이벤트에서 오버라이딩을 수행하면됩니다.

$(document).on("mobileinit", function() {

//apply override here

//기본적인 설정을 오버라이딩함

$.extend( $.mobile, {foo:bar} );

});

자바스크립트의 위치도 중요합니다.

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

바꿀수 있는 구성옵션

activeBtnClass string, default: "ui-btn-active"

activePageClass string, default: "ui-page-active"

ajaxEnabled boolean, default: true

allowCrossDomainPages boolean, default: false

autoInitializePage boolean, default: true

buttonMarkup.hoverDelay integer, default: 200

defaultDialogTransition string, default: 'pop'

defaultPageTransition string, default: 'fade'

getMaxScrollForTransition integer, default: 3

hashListeningEnabled boolean, default: true

ignoreContentEnabled boolean, default: false

linkBindingEnabled boolean, default: true

pageLoadErrorMessage string, default: "Error Loading Page"

pageLoadErrorMessageTheme string, default: "e"

phonegapNavigationEnabled boolean, default: false

Introducing jQuery Mobile ? Tool for HTML5 Mobile Platforms Development (One)

 http://www.flash-to-html5.net/blog/introducing-jquery-mobile-tool-for-html5-mobile-platforms-development-one

jQuery Mobile 에서 스크립트 코드 해석이 안되어서 찾아 보았습니다.

기본적으로 제시되고 있는 테마가 a, b, c, d, e 다섯가지 입니다. 그리고 f 부터는 사용자가 커스터마이징해서 사용할수 있다고 하네요.

Theme Classes

jQuery mobile 에서 테마를 적용하기위한 방법에는 두가지가 있습니다.

data-theme= "a" 와 같이 속성을 사용하여 테마를 적용하는 방법

<div data-role = "page" data-theme = "a"></div>

class 속성에 개별적으로 테마를 적용하는 방법

<div data-role = "page" class = "ui-body-c"></div>

ui-bar-(a-z)

ui-body-(a-z)

ui-btn-up-(a-z)

Commonly used with the ui-btn-hover-(a-z) and ui-btn-down-(a-z), ui-btn-active

ui-corner-all

ui-corner-tl (top left only), -top (both top corners), -left (both left corners, .ui-btn-corner-all.

ui-shadow

ui-disabledui-bar-(a-z)

ui-body-(a-z)

ui-btn-up-(a-z)

Commonly used with the ui-btn-hover-(a-z) and ui-btn-down-(a-z), ui-btn-active

ui-corner-all

ui-corner-tl (top left only), -top (both top corners), -left (both left corners, .ui-btn-corner-all.

ui-shadow

ui-disabled