jQuery Mobile 네비바 링크 — 헤더 navbar로 페이지 이동 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile 네비바 링크
헤더 navbar로 다른 페이지 이동 완전 정리

page1의 헤더 navbar에서 page2·3·4로 점프하는 가장 간단한 패턴

시작 오늘 분석할 코드

page1의 헤더 안에 navbar를 두고 그 버튼들이 page2·page3·page4로 이동하게 만든 골격이다. navbar의 a 태그가 다른 페이지의 id를 가리키면 클릭 시 슬라이드 전환된다.

<div data-role="page" id="page1"> <div data-role="header"> <h1>페이지제목</h1> <div data-role="navbar"> <ul> <li><a href="#page2" class="ui-btn-active">page2</a></li> <li><a href="#page3">page3</a></li> <li><a href="#page4">page4</a></li> </ul> </div> </div> </div>

실제 출력

페이지제목

page2page3page4

(content 영역)

---

용어 핵심 키워드

data-role="navbar"탭 형태의 네비게이션 바 — ul·li 자동 가로 분할

href="#pageN"같은 파일 안의 다른 page로 슬라이드 전환

ui-btn-active현재 활성화된 탭 시각 강조

헤더 안 navbar제목 아래 일렬로 나열되는 탭 영역

---

1 헤더 안 navbar

navbar는 헤더 안에도, 푸터 안에도, 본문 안에도 둘 수 있다. 헤더에 두면 "페이지 카테고리 탭" 느낌, 푸터에 두면 "홈/즐겨찾기/설정 같은 글로벌 메뉴" 느낌이 된다.

⚙ 이 코드는 page1의 헤더에만 navbar가 있고 page2~4는 정의되지 않았다. 실제로 동작하려면 같은 파일 안에 page2·page3·page4의 div도 있어야 한다.

---

2 ui-btn-active — 현재 페이지 표시

지금 page1에 있다는 사실을 사용자에게 알려야 한다. 그런데 이 코드는 page1에 있을 때 navbar의 page2 버튼이 active로 표시되어 있다 — "이 코드의 의도가 다소 어색"한 부분이다. 일반적으로는 자기 자신(page1) 버튼이 navbar에 있어야 active로 표시한다.

⚠ 이 코드의 한계 — 실제 동작 시 page2로 이동하면 active가 그대로 유지되지 않는다. 유지하려면 ui-state-persist 클래스도 같이 부여해야 한다.

---

3 같은 패턴, 더 나은 형태

여러 페이지가 같은 navbar를 공유하는 게 의도라면, 각 page마다 자기 자신을 active로 표시하도록 navbar를 복사·수정해야 한다. 또 footer에 navbar를 두고 data-id로 묶어 깜박임을 막는 패턴이 더 자연스럽다.

---

 

반응형

 

4 자주 하는 실수

• navbar에 ul·li 빠뜨림 → 가로 분할 안 됨
• 다른 page의 div를 빠뜨림 → 클릭 시 빈 화면이나 동작 안 함
• active 버튼이 "현재 페이지"가 아닌 다른 페이지를 가리킴 → 사용자 혼란
• ui-state-persist 누락 → 다른 페이지 갔다 돌아오면 active 풀림

---

핵심 한 줄 요약

data-role="navbar"헤더 안 탭 네비게이션

href="#pageN"다른 page id로 슬라이드 전환

ui-btn-active현재 페이지 강조 — persist도 함께 권장

헤더 vs 푸터 navbar헤더=섹션 탭, 푸터=글로벌 메뉴

Tags

#jQuery-Mobile #navbar #data-role #페이지이동 #ui-btn-active #persist #헤더네비 #푸터네비 #슬라이드전환 #모바일웹 #jQuery #CSS #HTML #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

jQuery-Mobile, navbar, data-role, 페이지이동, ui-btn-active, persist, 헤더네비, 푸터네비, 슬라이드전환, 모바일웹, jQuery, CSS, HTML, 웹개발, 티스토리