JQuery Mobile - Fixed toolbar options

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";
});