Adding Icons to Buttons

jQuery Mobile framework에는 모바일에서 자주 사용되는 여러 아이콘들이 미리 세팅되어 있습니다. 다운로드 사이즈를 최소화하기 위해 jQuery Mobile에는 single white icon sprite가 포함되 있습니다. 그리고 자동적으로 semi-transparent black circle 이 그 아이콘 뒤에 추가 되어 어떤 배경색에도 잘 눈에 띄도록 만들어 줍니다.

아이콘은 data-icon attribute를 anchor 에 추가 함으로서 추가될 수 있습니다. 예를 들면 아래와 같이 사용되는 것이죠.

이렇게 하면 아래와 같이 아이콘이 있는 버튼이 만들어 집니다.

data-mini="true" 를 사용하면 좀 더 compact 한 버튼을 만들 수 있습니다.

Icon set

아래에는 data-icon attribute에 추가할 수 있는 여러 아이콘들을 보여 줍니다.

Icon positioning

디폴트로 아이콘은 button text의 왼쪽에 보여 집니다.

Mini & Inline

mini 와inline attributes 들은 좀 더 compact 한 버튼을 만들기 위해서 사용하시면 됩니다.

Custom Icons

custom icon을 사용하려면 myapp-email 같이 unique 한 이름을 가지는 data-icon  값을 명시하세요. 그러면 버튼 플러그인은 ui-icon- 이라는 prefixing을 data-icon 값에 붙여서 클래스를 generate 할 겁니다. 그러면 ui-icon-myapp-email 이 되는 거죠.

여러분은 ui-icon-myapp-email 클래스를 특정 아이콘 background source로 연결시켜준ㄴ 것을 스타일 쉬트의 CSS rule을 만들어서 사용하실 수 있습니다. 시각적인 일관성을 유지하기 위해 white icon 으로 18X18 픽셀짜리로 만들어서 PNG 로 만들어 주세요 transparency는 8로 만들어 주시구요.

이 예제에서는 그냥 심플하게 standalone icon image를 사용했는데요. icon sprite와 positioning을 사용해서 framework에서 사용하는 아이콘처럼 만드실 수도 있습니다.

.ui-icon-myapp-email {
	background-image: url("app-icon-email.png");
}

이러면 standard resolution icon 을 생성할 겁니다. 하지만 지금은 많은 device들에서 고해상도를 표현할 수 있습니다. iPhone 4의 retina display 같은 경우가 이에 해당 되죠. HD 아이콘을 추가하려면 36X36 픽셀로 만드세요. (18X18의 두배짜리로요). 그리고 -webkit-min-device-pixel-ratio: 2 media query 를 사용하는 second rule을 만드세요. 그리고 나서 HD icon file을 면시하시고 배경 사이즈를 18X18로 하시면 36픽셀 아이콘을 18 픽셀 공간으로 넣을 겁니다. 미디어 쿼리 블럭은 여러 아이콘 rule을 넣을 수 있습니다.

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.ui-icon-myapp-email {
		background-image: url("app-icon-email-highres.png");
		background-size: 18px 18px;
	}
	...more HD icon rules go here...
}
 

Icons and themes

하얀 아이콘 뒤에 있는 semi-transparent black circle은 어떤 배경색에도 눈에 잘 띄도록 해 주죠. 그래서 이렇게 하면 jQuery Mobile theming system에서도 아주 잘 어울립니다.

아래 themed buttons  들을 사용한 서로 다른 color swatch들위에 이 아이콘들이 어떻게 잘 어울리는지 보여주는 예제들이 있습니다.

ButtonIcons.html

OPTIONS

The following options apply to all buttons:

corners boolean

default: true

true로 설정되면 border-radius 테마가 적용 됨. 이 옵션은 data-corners="false" 로 사용할 수도 있음

$('a').buttonMarkup({ corners: "false" });

icon string

default: null

icon set 중에서 선택된 아이콘을 적용 함. data-icon="start" 로 사용 함

$('a').buttonMarkup({ icon: "star" });

iconpos string

default: "left"

버튼에 아이콘의 위치를 정해 줌. left, right, top, bottom, none, notext 등이 있음.
notext 는 icon 만 있는 버튼을 표시함. data-iconpos="left"

$('a').buttonMarkup({ iconpos: "right" });

iconshadow boolean

default: true

true로 설정되면 버튼의 아이콘에 그림자 테마를 적용함.
data-iconshadow="false"

$('a').buttonMarkup({ iconshadow: "false" });

inline boolean

default: null (false)

true로 설정되면 inline button을 만듬. 버튼 안의 text 길이에 따라 버튼 길이가 정해 짐. 디폴트로 이 값은 null 이라서 버튼은 full width 를 가짐.
true와 false 가 올 수 있음.
data-inline="true"

$('a').buttonMarkup({ inline: "true" });

mini boolean

default: null (false)

true로 설정되면 가로 세로 모두 약간 작은 버튼이 표시됨. true, false 가 올 수 있음
data-mini="true"

$('a').buttonMarkup({ mini: "true" });

shadow boolean

default: true

true이면 drop shadow style 이 버튼에 적용 됨.
data-shadow="false"

$('a').buttonMarkup({ shadow: "false" });

theme string

default: null, inherited from parent

해당 widget에 color scheme (swatch)를 세팅 함. a-z 값이 올 수 있음. 디폴트로 parent container 의 color를 상속 함.

data-theme="a"

$('a').buttonMarkup({ theme: "a" });

initSelector CSS selector string

default: "button, [type='button'], [type='submit'], [type='reset'], [type='image']"

This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as form buttons. To change which elements are initialized, bind this option to the mobileinit event:

$( document ).bind( "mobileinit", function(){
   $.mobile.button.prototype.options.initSelector = ".myButtons";
});

METHODS

아래의 메소드들이 버튼 form 에 적용되는 것들 입니다. Link-based button은 관련된 메소드들이 없습니다.

enable

$('[type='submit']').button('enable');			
				

disable

$('[type='submit']').button('disable'); 

refresh update the form button

자바스크립트로 form 버튼을 여러개 생성했다면 여러분은 그 버튼들에 반드시 refresh 메소드를 적용해 주셔야 합니다. 그래야 visual styling이 업데이트 됩니다.

		
$('[type='submit']').button('refresh'); 

EVENTS

a, input, button element에 직접 bind 이벤트를 적용합니다. jQuery Mobile의 virtual events나 change, focus, blur 같은 bind standard javascript event 를 사용하세요.

 
$( ".myButton" ).bind( "click", function(event, ui) {
  ...
});

form button 플러그 인은 다음과 같은 custom event들이 있습니다.

create : form button 이 생성됐을 때 trigger 됨

$('[type='submit']').button({
   create: function(event, ui) { ... }
});		
			

Button basics

icons 을 추가하거나 inline or grouped.를 표시하는 것을 포함해서 버튼에 대한 모든 속성들을 보시려면 data- attribute reference 보세요.

Styling links as buttons

페이지의 main content block안에서 여러분은 data-role="button" attribute를 추가함으로서 anchor 링크들을 button 으로 style 할 수 있습니다. framework은 이 링크 기능을 포함한 버튼으로 이 anchor link를 변환시켜 줍니다. 아래 예제를 보세요.

Produces this link-based button:

Note: 버튼으로 style 된 링크는 아래 form에서 사용되는 버튼하고 똑 같이 보입니다. 그런데 몇가지 다른점이 있죠. Link-based 버튼들은 button plugin의 한 부분이 아닙니다. 그냥 버튼 스타일로 보이도록 하기 위해 underlying buttonMarkup 플러그인을 사용하는 것이죠. 그래서 form button에서 사용되는 메소드인 enable, disable, refresh 같은 것들을 사용할 수 없습니다. 이 link-based button을 disable 시켜야 되면 그 효과를 내기 위해 ui-disabled 클래스를 추가하실 수 있습니다.

Mini size

툴 바에 딱 맞게 적은 공간을 사용하는 버튼을 만드려면 data-mini="true" attribute를 추가하세요. 그러면 mini version 버튼을 만들 수 있습니다.

	
<a href="index.html" data-role="button" data-mini="true">Link button</a>

이렇게 하면 일반적인 버튼보다 크기도 작고 글씨도 작은 버튼이 생깁니다.

Form buttons

좀 더 쉬운 styling을 위해서 framework는 submit,reset,button, image 타입으로 된 버튼이나 input element를 딱 맞게 스타일 된 버튼으로 자동적으로 convert 합니다. 이 경우 data-role="button" attribute를 넣을 필요가 없죠. 하지만 필요하다면 다른 jQuery plugin 처럼 아무 selector 에서나 직접 button plugin 을 call 해서 사용하실 수도 있습니다.

original button 이나 input 처럼 이벤트 처리를 하기 위해 framework은 실제 element를 투명처리 해서 숨기고 이것을 new button markup 위에 위치 시켜 버립니다. 유저가 custom-styled 버튼을 클릭하면 실제로는 original element를 클릭하는 것이죠. form button이 enhanced button으로 convert 되는 것을 막으려면 data-role="none" attribute를 추가하세요. 그러면 native control이 render 됩니다.

ButtonBasics.html

Bar theming

header와 footer bar 모두 디폴트로 theme a 로 스타일 됐습니다. 왜냐하면 이 바들은 특히 페이지의 visual hierarchy에서 primary 이기 때문이죠.

Theming headers and footers

이 header와 footer 바에 다른 theme을 적용하려면 data-theme attribute를 추가하시고 특정 테마 swatch (a,b,c, etc.)를 넣으시면 됩니다. 예를 들어 아래 예제는 swatch b를 설정하는 소스코드입니다.

<div data-role="header" data-theme="b"> 
	<h1>Page Title</h1> 
</div> 

Theming buttons in toolbars

header 블럭에 링크를 추가하게 되면 자동적으로 버튼으로 만들어지고 테마는 그 바의 테마 swatch가 적용 됩니다. 이 버튼만 다른 테마를 적용하시려면 data-theme attribute를 사용해서 그 버튼만 다른 테마가 적용되도록 만들 수 있습니다. 에를들어 헤더를 테마 c가 적용되도록 하면 양쪽의 버튼은 자동적으로 테마 c 가 적용된 버튼이 됩니다. 그 중 Save 버튼만 튀게 보이게 하고 싶으면 data-theme attribute를 오버라이드 해서 Save 버튼의 anchor에  다른 테마를 적용해서 넣으시면 됩니다.

<a href="add-user.php" data-theme="b">Save</a> 

Theme variations

아래는 헤더와 footer 바에 그리고 그 안의 버튼들에 다양하게 테마를 적용한 경우들 입니다.

Headers

Footers

아래는 안에 link 버튼이 들어있는 footer 바들 입니다. footer는 header하고 약간 다른 prescriptive markup convention을 가지고 있습니다. 헤더에서는 링크만 걸면 자동으로 버튼 모양으로 만들어지고 또 2개 까지만 만들수 있고 하는 규칙이 있는데 footer에는 그런 규칙이 없습니다. 그래서 원하시는 디자인으로 꾸미시려면 layout grids 나 다른 custom styles로 만드실 수 있습니다.

bars-themes.html

여기까지 jQuery Mobile Tutorial의 Toolbars 부분을 마치고 다음부터는 Buttons 부분으로 들어갑니다.
이제 본격적으로 jQuery Mobile 프로젝트가 시작할것 같으니까 좀 더 속도를 내서 jQuery Mobile 공식 튜토리얼을 모두 훑어봐야 겠어요.

이 persistence toolbars 는 아래 샘플 예제로 대신합니다.

원레 jQuery Mobile Tutorial 페이지에도 설명은 없고 예제만 있습니다.

Search 란에 텍스트를 입력하면 autocomplete 기능이 적용이 되서 쉽게 Search를 할 수 있게 해 줍니다.

아래 있는 예제는 JQM 튜토리얼 페이지에서 소스를 그냥 긁어온 거라서 깔끔하지는 않습니다.

사용하시려면 깨끗하게 정리하거나 다른곳에서 제대로 된 소스를 받으시면 좋을 거예요.

저는 그냥 jQuery Mobile 공식 튜토리얼을 공부하면서 이런 개념이 있다는 걸 알기 위해서 그리고 그 정보를 이렇게 글로 남기고 나중에 찾아보기 편하도록 하기 위해서 샘플 파일들을 올려 놓습니다.

persistent.html

Methods

fixedtoolbar 플러그인은 아래와 같은 메소드들을 가지고 있습니다.

show show the toolbar 

 $("[data-position='fixed']").fixedtoolbar('show');

Note: 이전 버전에서는 아래 신택스로 툴발를 show 하는데 사용했습니다. 하지만 현재는 더이상 지원하지 않고 있습니다.

$.mobile.fixedToolbars
   .show(true);

hide hide the toolbar (만약 fullscreen 툴바가 아니라면 static positioning으로 toggle back 할 겁니다. 스크롤에 딸 보일수도 있고 안 보일 수도 있겠죠)

$("[data-position='fixed']").fixedtoolbar('hide'); 

toggle toolbar가 visible 일 경우 show와 hide 메소드를 call 합니다.

$("[data-position='fixed']").fixedtoolbar('toggle'); 

updatePagePadding . 툴바의 height를 match 시키기 위해 툴바의 page element parent의 패빙을 업데이트 합니다.

$("[data-position='fixed']").fixedtoolbar('updatePagePadding');
		   				

툴바를 re-position 하는 updatelayout event 가 있습니다. 콘텐트를 현재의 페이지에 넣기 위한 다이나믹 어플리케이션을 개발하는 개발자는 이 updatelayout  이벤트를 manually trigger 할 수 있습니다. 그러면 그 페이지의 컴포넌트가 방금 추가된 새로운 콘텐트를 업데이트 하도록 합니다. 이 이벤트는 collapsible, listview filter 플러그인 에서 내부적으로 사용되고 아주 강력합니다. 왜냐하면 어떤 위젯도 이 updatelayout 이벤트를 listen 하도록 할 수 있거든요.

destroy destroy at fixedtoolbar (restore the element to its initial state)

$("[data-position='fixed']").fixedtoolbar('destroy'); 

Events

fixedtoolbar 플러그인에는 아래와 같은 custom 이벤트가 있습니다.

fixed toolbar 가 생성될 때 트리거 생성

$( ".selector" ).fixedtoolbar({
   create: function(event, ui) { ... }
});		
						

fixedtoolbar 플러그인에는 다음과 같은 옵션들이 있습니다.

visibleOnPageShow boolean

default: true

이것은 parent page 가 보일 때 이 툴바를 보이게 할지 말지를 결정합니다. 이 옵션은 data-visible-on-page-show="false" 로 사용할 수 있고 아래와 같이 아용할 수도 있습니다.

$("[data-role=header]").fixedtoolbar({ visibleOnPageShow: false });

disablePageZoom boolean

default: true

이것은 사용자가 페이지를 zoom in/out을 할 수 있도록 할지 말지에 대해 컨트롤 합니다.

data-disable-page-zoom="false"  

$("[data-role=header]").fixedtoolbar({ disablePageZoom: false });

transition string

default: "slide" (which ends up using slideup and slidedown)

fixed toolbar를 보이고 숨기고 하는데 사용 될 transition. 여기에 들어갈 수 있는 값들은 none, fade, slide 가 있습니다. (여러분이 직접 만든 CSS 트랜지션을 사용할 수도 있습니다.)

data-transition="fade"

$("[data-role=header]").fixedtoolbar({ transition: "fade" });

fullscreen boolean

default: false

Fullscreen fixed toolbar는 visible 상태라면 항상 content  위에 떠 있게 됩니다. 일반 fixed toolbar와는 다르죠. fullscreen toolbar는 toggle 했을 때 다시 fall back 되지 않습니다. 스크린에서 완전히 사라지지 않는다는 거죠. 이 툴바는 photo viewer 같이 사진으로 전체 화면을 채우거나 할 떄 유용하게 사용하실 수 있습니다. This page로 가시면 구현된 화면을 보실 수가 있습니다. 

data-fullscreen="true"

$("[data-role=header]").fixedtoolbar({ fullscreen: true });

Note:이 data-attribute 신택스는 페이지 element가 아니라 toolbar element 에서 사용하셔야 됩니다.

tapToggle boolean

default: true

유저가 스크린을 Tap 할 때마다 툴바가 토글 기능으로 보였다 안 보였다 하도록 할지 말지를 정해 줌.

data-tap-toggle="true"

$("[data-role=header]").fixedtoolbar({ tapToggle: true });

Note: 이 behavior는 다음과 같이 configuration 할 수 있습니다. 1.1에서는 더이상 이 신택스를 지원하지 않습니다.

	
$.mobile.fixedToolbars
   .setTouchToggleEnabled(false);

tapToggleBlacklist string

default: "a, .ui-header-fixed, .ui-footer-fixed"

jQuery selector의 리스트를 tap 했을 때 툴바가 토글되지 않도록 합니다.

$("[data-role=header]").fixedtoolbar({ tapToggleBlacklist: "a, input, select, textarea, .ui-header-fixed, .ui-footer-fixed" });

hideDuringFocus string

default: "input, select, textarea"

 jQuery selector가 선택됐을 때 툴바를 hide 됩니다. fixed toolbar 일 경우는 제외입니다.

$("[data-role=header]").fixedtoolbar({ hideDuringFocus: "input, select, textarea" });

updatePagePadding boolean

default: true

툴바는 담고있는 내용에 따라서 height가 달라질 수 있습니다. 이 옵션은 페이지 엘리먼트의 패딩을 자동적으로 업데이트 해 줍니다. 그럼으로서 툴바는 문서내에서 알맞는 공간을 확보할 수 있게 되는 거죠. enable 상태일 경우에는 여러 경우에 패딩이 업데이트 됩니다. 예를 들어 pageshow, 페이지 전환, resie, orientation change 등등. 툴바의 EM height 에 match 되게 페이지의 div 패딩을 세팅하는 CSS를 추가하고 이 옵션을 disable 하게 되면 여러분 나름대로의 optimization에 유리합니다. .ui-page-header-fixed { padding-top: 4.5em; }.

This option is also exposed as a data attribute: data-update-page-paddinge="false"

$("[data-role=header]").fixedtoolbar({ updatePagePadding: false });

supportBlacklist function

default: function that returns a boolean value

CSS position: fixed 지원은 테스트하기가 아주 어렵습니다. 사실 1.1 버전이 출시 됐을 때 제대로 된 테스트 방법이 알려져 있지 않았습니다. 이 옵션은 position: fixed 관련해서 문제가 있다고 알려진 대중적인 플랫폼의 opt-out을 시도하기 위한 함수입니다. 종종 이 플랫폼들은 부분적으로 position:fixed 를 지원합니다. 전혀 지원하지 않는 것 보다는 낫죠? 이 로직을 여러분의 blacklist 로직에 오버라이드 하려면 initialization 될 때 call 해서 true나 false를 리턴하는 함수를 제공하면 됩니다. 반드시 이것을 mobileinit에 세팅해야 합니다. 그래야 플러그인이 initially created 될 때 apply 됩니다.

$( document ).bind("mobileinit", function(){
  $.mobile.fixedtoolbar.prototype.options.supportBlacklist = function(){
    var result;
    // logic to determine whether result should be true or false
    return result;
  };
})

initSelector CSS selector string

default: ":jqmData(position='fixed')"

이것은 selector를 define 할 때 사용됩니다. (element types, data roles, etc.) 그러면 자동적으로 fixed toolbar로 initialize 되게 됩니다. 어떤 element가 initialized 될지 수정하시려면 이 옵션을 mobileinit event에 바인드 해 주세요.

$( document ).bind( "mobileinit", function(){
	$.mobile.fixedtoolbar.prototype.options.initSelector = ".myselector";
});

Fixed toolbars

헤더나 footer에 이 기능을 적용하려면 data-position="fixed" attribute를 jQuery Mobile의 header 나 footer element에 추가하시면 됩니다.

헤더를 fixed 시키는 예제

<div data-role="header" data-position="fixed">
	<h1>Fixed Header!</h1>
</div>		

footer를 Fixed 시키는 예제 :

<div data-role="footer" data-position="fixed">
	<h1>Fixed Footer!</h1>
</div>

Fullscreen Toolbars

fixed header나 footer에 이 기능을 사용하시려면 data-fullscreen attribute 를 그 element에 추가하시면 됩니다.

<div data-role="header" data-position="fixed" data-fullscreen="true">
	<h1>Fixed Header!</h1>
</div>

Forms in toolbars

jQuery Mobile 1.1에서는 static toolbar안에서 모든 form element가 제대로 작동하도록 테스트 중에 있습니다. 그러니까 fixed toolbar나 fixed element가 사용되는 어느 곳에서든 form element를 사용하실 때에는 충분히 테스트 해 줄것을 권고합니다. 그래야만 다양한 모바일 브라우저에서 예측할 수 없는 어떤 이슈가 발생하는 것을 줄일 수 있을 겁니다.

Changes in jQuery Mobile 1.1

jQuery Mobile 1.1 버전 이전에는 fixed header 효과를 위해 dynamically re-positioned toolbar를 사용했었습니다. 왜냐하면 아주 일부의 모바일 브라우저에서면 fixed CSS property 를 지원했었거든요. 그리고 유사 fixed 도 fake 자바스크립트 overflow-scrolling behavior를 통해서 지원이 됐었기 때문에 충분히 효과를 내지를 못했습니다. 그래서 특정 플랫폼에서는 아주 자연스럽지 못했었죠. 이런 behavior는 바람직하지 않습니다. 그래서 jQuery Mobile 1.1 에서는 좀 더 폭넓게 지원될 수 있도록 fixed toolbar에 대한 새로운 접근법을 사용했습니다. 이 framework은 다른 많은 대중적인 플랫폼에서 진짜 fixed toolbar를 지원해 줄 것을 원하고 있습니다.

Polyfilling older platforms

fixed toolbar plugin은 CSS position을 지원하지 않는 플랫폼에서 자연스럽게 거기에 맞게 기능을 합니다. iOS4.3 같은 곳에서도 제대로 fixed 되죠. 그 플랫폼에서 show/hide behavior를 포함한 fixed toolbar의 지원이 필요하다면 Filament Group이 개발한 polyfill을 사용하실 수 있습니다.

• Github code repository with CSS, and JavaScript required for the fixed toolbars polyfill
• Preview URL using the code in the repo above

여러분이 제안할 개선점이 있다면 github의 gist에 그 내용을 올려주세요.

jQuery Mobile을 reference 한 다음에 CSS와 JS 파일들을 include 하세요. 그러면 fixed toolbar가 iOS4.3에서도 jQuery Mobile 1.0 에서와 비슷하게 작동할 겁니다.

Known issue with form controls inside fixed toolbars, and programmatic scroll

iOS5와 몇몇 안드로이드 플랫폼에서는 잘 알려지지 않은 이슈들이 있습니다. 이 이슈들은 fixed-positioned 콘테이너 안에 위치한 form을 컨트롤 할 때 나타나는 현상인데요. 윈도우가 프로그램적으로 스크롤이 될 때 그 hit area를 잃는 경우가 있습니다. (window.scrollTo 같은 기능을 사용할 때). 이건 jQuery Mobile의 이슈는 아니지만 그것 때문에 jQuery Mobile 기능이 제대로 작동하지 않는 경우가 있습니다. 그러니까 될 수 있는대로 jQuery Mobile fixed toolbar 안에 form control을 사용할 떄는 프로그램적으로 스크롤을 하지 말 것을 권고 드립니다. Device Bugs project tracker의 This ticket이  이 문제에 대해 보다 자세히 설명을 하고 있습니다.

Known issues in Android 2.2/2.3

안드로이드 2.2와 2.3의  implementation of position: fixed; 는 styles와 markup 패턴들과 관련되지 않은 conjunction 이 될 수도 있습니다. 왜냐하면 여러 이상한 에러들이 있거든요. 특히 position: fixed element 내의 absolute element 같은 포지션일 경우 그렇습니다. 저희는 라이브러리의 범위내에서 발생하는 이런 버그들을 제대로 고치려고 노력을 하고 있습니다. 하지만 custom styles에서는 여러 이슈들을 유발할 수 있습니다.


• 다른곳에 있는 Form element들은 (특히 select 메뉴 같은 것) fixed position안에 위치한 empty absolute position 으로 세팅됐을 때 user와의 interaction이 fail 날 수 있습니다. 드물지만 (대개 안드로이드 2.2에서 일어나는데) 이런 경우 그 부분에서만 fail이 일어나는게 아니라 전체 페이지의 모든 기능에서 fail이 일어나기도 합니다. 이런 경우 absolute position 된 element들에 아무 character라도 add 해서 (non-breaking space나 어떤 경우엔 그냥 whitespace를 추가해도) 해결 할 수는 있습니다.
  
  
• 위에 언급된 이슈는 fixed position element 내의 absolute position된 이미지의 경우에도 발생할 수 있습니다. 대개 그 이미지의 inherent dimensions과 관련해서 에러가 발생합니다. CSS를 이용해서 height와 width 가 정해 진다거나 image src 가 invalid (그래서 inherent height와 width 가 없는) 경우 이러한 일이 발생합니다. 예를 들어 그 이미지가 50X50이고 fixed element로 위치가 정해졌고 그 inherent dimension을 그대로 사용할 때 이러한 현상은 일어나지 ㅇ낳습니다.
  
  
• position: fixed element가 페이지의 어느곳에서든 나타날 때 대부분의 2D CSS transform은 fail 될 겁니다. 특이하게 오직 translate transform 만 이 경우에 해당되지 않는 것 같습니다. 더 특이한 점은 이 이슈는 CSS opacity를 9나 그 이하로 세팅하면 해결된다는 겁니다.
  
  
• position: fixed 와 overflow 프로퍼티의 조합은 가장 피해야 할 상황입니다. 이 두 기능은 Android OS의 구 버전에서 예측하지 못하는 이슈들을 야기하기 때문입니다.
  
  
• position:fixed element 내에 위치해서 on-screen keyboard를 불러오는 element들은 default keyboard를 사용하지 않고 다른 것을 사용할 때 user input 기능이 fail 됩니다 .Swype, XT9 등도 여기에 해당됩니다.
  

저희들은 이 버그들을 해결하기 위해 지속적으로 노력하고 있습니다. 우리는 모든 안드로이드 native browser에서 충분한 테스트를 거치지 않고 복잡한 user styles과 form element를 포함하고 있는 fixed toolbar들을 implementing 하지 말것을 권고드립니다 .

다음과 같은 페이지들은 fixed toolbar와 form element들과 관련해서 테스트를 한 페이지들 입니다. : demo app, text inputs, search inputs, radio toggles, checkbox toggles, slider, select, and buttons.

The rest of the page is just sample content to make the page very long

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.

And an inset list

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.

Embedded form

A bit more text

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.

-----------

위에 내용도 번역하려고 보니까 이게 영어가 아니네요.

왜 갑자기 이게 영어가 아닌걸로 변했는지.. 아니면 원래 저랬는지 몰겠지만.. 조금 황당...

원래 jQuery Mobile 웹사이트를 가도 이렇게 돼 있더라구요.

보니까 제목이 The rest of the page is just sample content to make the page very long 네요.

이 페이지의 나머지 부분은 그냥 페이지를 길게 만들려고 넣은 샘플 내용이라고 하네요.

이게 왜 있는지 좀 이상.... 잠깐 당황했음...

Simple navbar

jQuery Mobile은 아주 기본적인 navbar 위젯을 가지고 있습니다. 하나의 바에 optional icons와 함께 다섯개의 버튼을 표시할 수 있습니다. 또한 persistent navbar variation 도 있는데요. 페이지 이동시에도 고정돼 있는 탭 바와 비슷합니다.

navbar는 data-role="navbar" attribute 를 가지고 있는 container element 안에 싸여있는 링크들의 정렬되지 않은 리스트로 코딩 됩니다. 아래에는 두개의 버튼이 있는 navbar에 대한 예제입니다.

<div data-role="navbar">
	<ul>
		<li><a href="a.html">One</a></li>
		<li><a href="b.html">Two</a></li>
	</ul>
</div><!-- /navbar -->

navbar에 있는 링크가 클릭되면 active(selected) 상태가 됩니다. ui-btn-active 클래스는 activated link에 추가되기 전에 navbar 에 있는 모든 anchor들로부터 첫번재로 remove 됩니다. 만약에 이 링크가 다른 페이지로 가는 링크라면 이 클래스는 transition이 완료된 이후에 다시 remove 됩니다.

navbar가 initialization 되고 그곳의 아이템을 active state로 세팅하기 위해서는 class="ui-btn-active" 를 여러분 markup의 해당 anchor에 추가하시면 됩니다. 추가적으로 ui-state-persist를 넣으시면 framework는 그 정보가 DOM에 있는 한 페이지가 보일때마다 active state를 restore 합니다. 예제 파일의 첫번째 예제는 "One"을 active 상태로 세팅 한 navbar를 보여 줍니다.

<div data-role="navbar">
	<ul>
		<li><a href="a.html" class="ui-btn-active ui-state-persist">One</a></li>
		<li><a href="b.html">Two</a></li>
	</ul>
</div><!-- /navbar -->

이 경우 navbar 아이템들은 공간을 균등하게 나눠 갖습니다. 각 버튼은 브라우저 윈도우의 1/2씩을 차지 합니다.

navbar01.html

navbar의 최대 아이템 수는 5개까지 입니다.

만약 아이템이 5개 이상이면 navbar는 줄을 바꿔서 표시됩니다.

아이템이 1개만 있으면 이 아이템은 100%의 width 를 차지하게 됩니다.

위 예제 파일을 다운 받으신 후 실행해 보시면 직접 눈으로 확인 하실 수 있습니다.

Navbars in headers

navbar를 페이지의 top에 추가하시게 되면 페이지 타이틀과 버튼은 계속 남아 있게 됩니다. navbar를 header block 안에 넣으세요. 바로 타이틀과 버튼 다음에요. 그러면 navbar를 top에 (title 바로 다음 줄에) 표시할 수 있습니다.

Navbars in footers

페이지의 bottom에 navbar를 추가하시면 어떻게 될까요? tab bar 처럼 보이겠죠. data-role="footer" 와 함께 콘테이너에 navbar를 넣어 주세요.


<div data-role="footer">		
	<div data-role="navbar">
		<ul>
			<li><a href="#">One</a></li>
			<li><a href="#">Two</a></li>
			<li><a href="#">Three</a></li>
		</ul>
	</div><!-- /navbar -->
</div><!-- /footer -->

Icons in navbars

data-icon attribute를 추가하면 navbar에 아이콘도 넣을 수 있습니다. 각 anchor에 standard mobile icon을 추가할 수 있습니다. 디폴트로 아이콘은 텍스트 위쪽에 위치됩니다. (data-iconpos="top"). 아래 예제는 footer 안에 있는 navbar에 아아콘을 추가하는 예제입니다.

아이콘은 visual consistency를 위해 각각의 링크에 다는 대신 on the navbar container 에 세팅합니다.

<div data-role="navbar" data-iconpos="bottom">

이 예제는 bottom에 icon이 위치되게 됩니다.

아이콘 포지션은 data-iconpos="left" 와 data-iconpos="right"로 세팅될 수 있습니다.

결과 화면은 첨부 파일을 참조하세요.


Using 3rd party icon sets

여러분은 텍스트 label의 위에 있는 큰 아이콘을 갖는 iOS 스타일의 탭을 표현할 수 있는 Glyphish 같은 인기있는 아이콘 라이브러리를 추가할 수도 있습니다. 그러기 위해 필요한 것은 이 아이콘을 표시하기 위한 링크를 걸고 navbar에 위치를 지정하는 것 뿐입니다. 

아래 이미지는 navbar에 Glyphish icons 를 이용해서 custom style을 구현한 예제입니다.

Icons by Joseph Wain / glyphish.com. Licensed under the Creative Commons Attribution 3.0 United States License.

Theming navbars

샘플 파일을 다운 받아 보시면 몇가지 예제를 보실 수 있을 겁니다. 자동적으로 parent's swatch letter를 상속한 겁니다. 이 에제에서는 data-theme attribute를 사용하는 대신에 body swatch(ui-body-a)에 적용하기 위해 manual로  swatch 클래스를 추가했습니다. 이런 경우에도 상속은 같은 방법으로 이루어 집니다.

navbar 아이템에 theme color를 세팅하려면 각각의 link에 data-theme attribute를 추가시고 특정 theme swatch를 지정해 주시면 됩니다. navbar container에 theme swatch를 적용하는 것은 지원되지 않습니다.

Footer bar structure

footer bar는 data-role attribute 값에footer를 넣는 다는 것 말고는 header와 기본 구조가 같습니다.

<div data-role="footer"> 
	<h4>Footer content</h4> 
</div> 

footer toolbar는 디폴트로 a swatch를 theme으로 사용할 겁니다. 이것은 여러분이 쉽게 set the theme swatch color를 할 수 있습니다.

footer는 이렇게 헤더처럼 미리 그 구조가 짜여져 있지 않기 때문에 여러분이 원하는 디자인 구조를 적용하시려면 grids layout과 custom style을 사용할 것을 권합니다.

Adding buttons

footer에 링크나 button markup 을 추가하면 둘 다 모두 자동적으로 button으로 표시 됩니다. 공간을 절약하기 위해 툴바에 있는 버튼들은 자동적으로 inline styling로 세팅됩니다. 그러니까 그 버튼은 그 안의 텍스트나 아이콘의 너비 만큼 공간을 차지하게 됩니다.

디폴트로 툴바는 nav bar 나 다른 위젯 공간을 위한 padding을 가지고 있지 않습니다. bar에 padding을 넣으려면 class="ui-bar" 를 footer에 추가해야 합니다.

<div data-role="footer" class="ui-bar">
	<a href="index.html" data-role="button" data-icon="plus">Add</a>
	<a href="index.html" data-role="button" data-icon="arrow-u">Up</a>
	<a href="index.html" data-role="button" data-icon="arrow-d">Down</a>
</div>

이 예제는 좌우로 버튼을 한줄 정렬해서 표시하게 됩니다.

아래 예제 파일 다운 받으셔서 소스도 고치시면서 직접 눈으로 확인하시면 더 이해가 쉽게 갈겁니다.

footer01.html

버튼들을 하나의 그룹으로 묶으려면 wrapper 안에 있는 링크들을 data-role="controlgroup",data-type="horizontal" attributes 와 함께 감싸세요.


이렇게 하면 버튼 그룹을 만들 수 있습니다. 위 예제 파일을 확인해 보세요.

Adding form elements

Forms elements 와 다른 content들도 또한 toolbar에 add될 수 있습니다. 위 예제 파일에 footer bar 안의 select menu 예제가 있습니다. data-mini="true" attribute를 추가해서 툴바 안에 mini-sized form elements를 사용할 것을 권장합니다.

Fixed & Persistent footers

footer가 global navigation element인 경우 여러분은 화면이 스크롤 될 때 따라 움직이지 않고 제자리에 표시 되도록  fixed 로 display 하기를 원하실 겁니다.  fixed toolbar persistent도 가능합니다. 이런 경우에는 page transitions이 일어나도 그 툴바는 계속 보일 겁니다. 이 기능은 jQuery Mobile에 포함돼 있는 persistent footer feature를 사용함으로서 구현하실 수 있습니다.

화면전환에도 footer를 계속 보이게 하려면 관계된 모든 페이지의 footer에 data-id attribute를 추가하세요. 물론 id 값은 모두 같아야 합니다. 예를 들어 현재페이지와 다음(target) 페이지에 data-id="myfooter"를 추가하면 framework은 page가 바뀌는 동안에도 같은 지점에 footer를 계속 고정시킬것입니다.

이 기능은 header와 footer가 data-position="fixed"로 세팅돼 있을 때에만 제대로 작동할 겁니다. 그렇게 하면 transition 동안에도 계속 보이게 됩니다.