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

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

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