하단에 고정 네비게이션 바 만들기 > jquery

하단의 고정 네이게이션 바를 만드는 방법 이라는 거창한 이름을 주었으나 간단히 설명 하자면

페이지가 넘어갈때 같이 안넘어 가는 것 처럼 보이는 네비게이션바 정도로 해석 하자.

뭔 소리인가 하면

링크를 클릭 해서 페이지가 이동할때 앱처럼 오른쪽에서 왼쪽으로 샤샤샥 이동을(설정에 따라다름) 하는 에니메이션을 기본으로 보여 주는데(잘 이해가 안되면 직접 만들어 보고 실행 시켜봐라) 그때 일반적으로는 header 와 footer 가 같이 이동을 한다.

하지만 네비게이션바를 footer 에(또는 header에 ) 둘 경우 그건 안바뀌는 것처럼 보이고 가운데 컨텐츠만 바뀌면 좋겠다 싶은 경우가 있을 것이다. (앱이 보통 그렇게 보이니까.) 그럴 경우 사용하는 것이다.

뭐 설명은 이정도로 하고 코드를 바로 보자.

 

<div data-role="page" id="page">
 <div data-role="header">
  <h1>Page one</h1>
 </div>
 <div data-role="content"> 
  <ul data-role="listview">
   <li><a href="#page2">Page Two</a></li>
            <li><a href="#page3">Page Three</a></li>
   <li><a href="#page4">Page Four</a></li>
  </ul>  
 </div>
 <div data-role="footer" data-position="fixed" data-id="footer">
  <nav data-role="navbar">
         <a href="#page" class="ui-btn-active ui-state-persist">main</a>
            <a href="#page2">page2</a>
            <a href="#page3">page3</a>
            <a href="#page4">page4</a>
        </nav>
 </div>
</div>

<div data-role="page" id="page2">
 <div data-role="header">
  <h1>Page Two</h1>
 </div>
 <div data-role="content"> 
  Content  
 </div>
 <div data-role="footer" data-position="fixed" data-id="footer">
    <nav data-role="navbar">
         <a href="#page">main</a>
            <a href="#page2" class="ui-btn-active ui-state-persist">page2</a>
            <a href="#page3">page3</a>
            <a href="#page4">page4</a>
        </nav>
 </div>
</div>

<div data-role="page" id="page3">
 <div data-role="header">
  <h1>Page Three</h1>
 </div>
 <div data-role="content"> 
  Content  
 </div>
 <div data-role="footer" data-position="fixed" data-id="footer">
    <nav data-role="navbar">
         <a href="#page">main</a>
            <a href="#page2">page2</a>
            <a href="#page3" class="ui-btn-active ui-state-persist">page3</a>
            <a href="#page4">page4</a>
        </nav>
 </div>
</div>

<div data-role="page" id="page4">
 <div data-role="header">
  <h1>Page Four</h1>
 </div>
 <div data-role="content"> 
  Content  
 </div>
 <div data-role="footer" data-position="fixed" data-id="footer">
    <nav data-role="navbar">
         <a href="#page">main</a>
            <a href="#page2">page2</a>
            <a href="#page3">page3</a>
            <a href="#page4" class="ui-btn-active ui-state-persist">page4</a>
        </nav>
 </div>
</div>

 

이 코드는 드림위버5.5에서 생성해준 코드를 일부 변형 한 것이다.

주의해서 봐야 할 것은

<div data-role="footer" data-position="fixed" data-id="footer">
이 부분이다. (권장은 footer 태그를 써서 푸터를 묶어야 하는데.. 드림위버는 아직 그렇게 안하네..)

data-role는 footer 로 설정 하고 data-position은 fixed (이걸 다른거로 설정 하면 제대로 작동을 안한다.)하고, 마지막으로 data-id를 모두 동일하게 설정을 한다.

그런 다음에 네비게이션 바를 만들기 위해

<nav data-role="navbar">
태그로 네비게이션 바를 생성 했다.

그리고 각 페이지에서는 자기 페이지가 선택 되었다는 것을 알리기 위해 a 태그에  class="ui-btn-active ui-state-persist" 를 추가 했다.

뭐 난 어떤 페이지가 선택되어 있는지 알리고 싶지 않다.. 하면 안넣어도 무방 하다.

 

이제 핵심을 정리 한다.

footer 에 data-id 를 동일하게 설정하고 그 안에 코드도 동일(최소한 비슷) 하게 설정 하면 페이지이동 에니메이션과 무관하게 보여지게 된다는것을 이용해서 고정네비게이션바를 만드는 방법이다.

즉 이동하지 않는 것 처럼 보일 뿐이지 실제로는 이동한다는 것이 중요하겠지.. 일반 웹에서의 방식과 비슷하나 중요한것은 다음내용이 다 보여지기 전까지 이전 내용이 남아 있다는 것이다. 그래서 그자리를 항상 지키는 것 처럼 보이는 것이지.