jQuery Mobile - Fixed or Fullscreen toolbar

Fixed toolbars

“fixed” 해더와 풋터를 알아보겠습니다.
가식적인 스크롤 스크립팅 대신에 자연스런 스크롤을 사용할수록 더욱더 자연스러운 페이지 컨텐트의 흐름이 가능합니다. 해더와 풋터가 시야에서 사라지게 되면, 여러분은 화면은 터치하여 다시 보여지게 할 수 있습니다. 다시 화면을 터치하거나 페이지를 스크롤 하면 페이지 뒤로 사라질 것입니다. 이를 위해 툴바 컨테이너에 data-position=”fixed” 속성을 추가해 줍니다.

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

아래 처럼 페이지의 맨 위에 해더가 고정되어있고, 페이지의 맨 아래에 풋터가 고정되어 있습니다.

스크롤을 해보면 아직 브라우저별로 차이는 있겠지만 아래와 같이 해더와 풋터가 같이 움직입니다.

화면을 클릭 혹은 터치를 하게 되면 해더와 풋터가 사라지거나 다시 나타나게 됩니다.

Fullscreen positioning

“fullscreen” 툴바 모드를 알아보겠습니다. 이 툴바는 전체 화면을 꽉 채우는 컨텐트를 사용해야하는 특별한 상황에서 사용됩니다. 페이지를 클릭시 해더와 풋터가 보였다 안보였다 하하 원할 때 사용합니다. 보통 사진이나 이미지, 비디오 화면인 경우에 적합합니다.
이를 사용하기 위해서는 data-role=”page” 속성의 div태그에 data-fullscreen=”true”속성을 추가하고, 해더와 풋터에 data-position=”fixed” 속성을 사용하여야 합니다.

Fullscreen 모드는 페이지에 감춰있기 때문에, 모든 컨텐트에서 항상 보여지는 것은 아니니 유의하셔야 합니다. 반면에,  fixed 모드는 항상 페이지의 상단과 하단에 보여지며 스크롤로 보여지지 않는 화면에서 터치시 보여지게 됩니다.

<div data-role="page" data-fullscreen="true">
    <div data-role="header" data-position="fixed"> …. </div>

아래와 처럼 페이지가 로딩되면 해더와 풋터가 보여지 않습니다.

화면을 클릭 혹은 터치를 하게 되면 화면을 가리면서 해더와 풋터가 보여지거나 사라지게 됩니다.