2016. 3. 16. 16:46ㆍlanguage/jquery mobile
기본적인 내비게이션을 만들고 내비게이션을 사라지게 하거나 나타내는 연습을 합니다.
내비게이션 바는 페이지 사이의 이동 버튼으로 많이 사용됩니다.
보통 페이지의 헤더나 푸터에 위치하며 내용 안에도 위치할 수 있습니다.
기본적인 네비게이션 소스를 보겠습니다.
|
<div data-role="navbar">
<ul>
<li><a class="ui-btn-active" href="#">One</a></li>
<li><a href="#">Two</a></li>
</ul>
</div><!-- /navbar --> |
cs |
data-role="navbar" 속성의 div 로 ul 태그를 감싸고 있습니다.
이때 ul 태그의 li 태그들이 네비게이션 버튼으로 사용됩니다.
li 태그 내부의 a 태그의 class="ui-btn-active" 속성은 선택이 되어져 있는 상태를 의미합니다.
또한 버튼을 클릭했을때 상태는 jquery mobile 에서 자동으로 관리합니다.
버튼은 나란히 최대 5개까지 만들 수 있습니다. 모두 1/n 의 너비를 가지게 됩니다.
1개 일 경우 너비가 100%, 2개일 경우 각각 50%, 3개일 경우 33.3% .... 5개일 경우 20% 의 너비를 가집니다.
단, 버튼이 6개가 넘어가면 줄이바뀝니다.
|
<div data-role="navbar">
<ul>
<li><a class="ui-btn-active" href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>
<li><a href="#">Six</a></li>
</ul>
</div><!-- /navbar --> |
cs |
네비게이션을 해더 (header) 또는 푸터(footer)와 함께 사용할 수 도 있습니다.
|
<div style="overflow: hidden;" data-role="header">
<h1>This is header</h1>
<a class="ui-btn-right" href="#" data-icon="gear">Options</a>
<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><!-- /header --> |
cs |
|
<div style="overflow: hidden;" data-role="footer">
<h4 style="text-align: center;">This is footer</h4>
<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 --> |
cs |
해더 숨기기, 나타나기, 접기 등 모바일 웹이나 하이브리드 앱을 돌아다니다 보면 내비게이션이나 해더 또는 푸터가 화면을 클릭하면 나오고 또는 접히거나 사라지거나 등 화면에 집중할 수 있도록 유동적으로 움직이는 것을 볼 수 있습니다.
이는 data 속성을 추가하여 쉽게 구현할 수 있습니다.
2개 속성으로 구현 가능한데 data-position 속성과 data-fullscreen 속성이 있습니다.
해더나 푸터 속성을 가진 영역에 data-position="fixed" 속성을 주게 되면 빈 화면을 클릭할 때 화면에서 나타났다가 접혔다가 하는 것을 볼 수 있습니다. 하지만 해더나 푸터는 자기의 영역을 가지고 있습니다.
여기에 data-fullscreen="true" 함께 주게되면 해더나 푸터는 자기의 영역을 잃고 공중에 뜨는 absolute 상태가 됩니다.
내용의 위에서 클릭하면 나타났다가 접혔다가 하게 됩니다. 물론 내용은 가리게 되지만 투명도를 가지고있어 뒤에 내용이 있다는 것은 알 수 있습니다.
다음 소스로 직접 실행해 보시기 바랍니다.
화면을 작게 만들어서 스크롤이 생기게 한 후 테스트 해보세요.
|
<section id="page1" data-role="page">
<div style="overflow: hidden;" data-role="header" data-position="fixed" data-fullscreen="false">
<h1>This is header</h1>
<a class="ui-btn-right" href="#" data-icon="gear">Options</a>
<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><!-- /header -->
<div data-role="navbar">
<ul>
<li><a class="ui-btn-active" href="#">One</a></li>
<li><a href="#">Two</a></li>
</ul>
</div><!-- /navbar -->
<br/>
<br/>
<div data-role="navbar" data-grid="d">
<ul>
<li><a class="ui-btn-active" href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>
</ul>
</div><!-- /navbar -->
<br/>
<br/>
<div data-role="navbar">
<ul>
<li><a class="ui-btn-active" href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>
<li><a href="#">Six</a></li>
</ul>
</div><!-- /navbar -->
<br/>
<br/>
<div style="overflow: hidden;" data-role="footer" data-position="fixed" data-fullscreen="false">
<h4 style="text-align: center;">This is footer</h4>
<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 -->
</section> |
cs |
data-position="fixed" data-fullscreen="false"
data-position="fixed" data-fullscreen="true"
