Fixed toolbars

Fixed toolbars

CSS position을 지원하는 브라우저(대부분의 데스크탑 브라우저들과 iOS5+ 안드로이드 2.2+, 블랙베리 6 등등)에서는 fixedtoolbar 플러그인을 사용하는 fixed toolbar들은 viewport의 top이나 bottom에 fix 될 겁니다. 그 페이지의 content는 자유롭게 스크롤 되도 그 툴바는 top이나 bottom에 fix 돼 있을 겁니다. fixed positioning을 지원하지 않는 브라우저에서는 같이 따라서 움직일 겁니다.

헤더나 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

Fullscreen fixed toolbars는  visible일 경우 항상 content 위에 위치하게 됩니다. 일반적인 fixed toolbar와는 좀 다르죠. fullscreen toolbar는 toggle 됐을 때 그 위치가 바뀌지 않습니다. 스크린에서 완전히 사라지지가 않죠. Fullscreen toolbar는 photo viewer같이 photo로 전체 스크린이 꽉 차야 되는 그런 인터페이스에 잘 어울리는 기능입니다. 

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.

No longer supported: touchOverflowEnabled

이전버전인 jQuery Mobile 1.1에서 지원했던 true fixed toolbar는 CSS 프로퍼티인 overflow-scrolling:touch에 대해 native browser가 지원하는지에 대한 contingent 였습니다. 지금은 이 기능이 iOS5에서만 지원이 되고 있죠. 이 CSS 프로퍼티는 더 이상 사용되지 않습니다. 우리는 프레임워크에서 이 프로퍼티의 모든 internal usage를 없앴습니다. 하지만 이미 이 기능을 사용하고 있는 어플리케이션에서 문제가 발생하지 않도록 $.mobile 객체에 global 한 정의는 남겨 뒀습니다. 이 프로퍼티는 removal로 flag 되 있습니다. 그러니 더 이상 이 코드를 사용하지 않도록 업데이트 해 주세요. 이 프로퍼티의 support test는 $.support 하에서 그 정의가 남아 있고요 아직까지는 이 기능을 remove 할 계획은 없습니다.

---

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 네요.

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

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