[jquery mobile] toolbar

* Toolbar

Header bar, Footer bar, Navbar 통칭

(position)

data-position = "inline"/"fixed"/

inline : 스크롤하면 툴바가 안보인다.

fixed : 스크롤해도 툴바가 고정 위치에 있다.

화면 터치하면 비로소 사라진다. 다시 터치하면 나타난다.(스크롤이 있는 경우에만 반응한다)

fullscreen: 스크롤이 없어도 터치에 반응한다.

data-position="fixed"

data-fullscreen="true"(풀스크린) -> 둘 다써 줘야 한다.

 

<div data-role="header" data-position="inline">
    <!-- header component 안에서 a 태그를 쓰면 자동으로 버튼 컴포넌트가 된다 -->
    <!-- headerbar 컴포넌트 안에서 최대 2개 버튼 표시 가능 -->
    <!-- data-theme='b' 파란색 버튼 -->
    <a href="index.html" data-icon="delete">Cancel</a>
    <h1>Edit Contact</h1>
    <a href="index.html" data-icon="check" data-theme="b">Save</a>
</div>

<!-- footer component는 header보다 자유로움 -->
<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>

<!-- 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 --> 

 

출처 : 생활코딩, https://opentutorials.org/course/473/2518