네비게이션바 만들기
data-role="navbar"
네이게이션바는 data-role="navbar" 을 사용하여 만들며
header와 footer에 생성가능하다.
네비게이션바를 고정하고싶으면 data-position="fixed"을 적용한다.
네비게이션바를 header와 footer에 생성 (상단에는 고정하기)
<div data-role="page">
<div data-role="header" data-position="fixed"> (상단 탭컨트롤 고정)
<div data-role="navbar">
<ul>
<li><a href="#">회원로그인</a>
<li><a href="#">게시판의 목록보기</a>
<li><a href="#">게시판의 글쓰기</a>
<li><a href="#">게시판의 글수정</a>
</ul>
</div>
</div>
<div data-role="content">
<p>jQuery Mobile page 구성</p>
</div>
<div data-role="footer">
<h1>화면 하단</h1>
<div data-role="navbar">
<ul>
<li><a href="#">회원로그인</a>
<li><a href="#">게시판의 목록보기</a>
<li><a href="#">게시판의 글쓰기</a>
<li><a href="#">게시판의 글수정</a>
</ul>
</div>
</div>
</div>
각 페이지마다 네비게이션바 공통으로 사용
모든 페이지에서 네비게이션바를 공통으로 사용할수있으며 네비게이션바의 항목을 클릭하면 페이지가 이동되고 클릭상태 자동선택 활성화 및 상태를 유지하고자 한다.
선택상태를 유지할 필요성->data-id 지정
data-position="fixed"(고정)
디폴트 선택버튼의 class속성=>ui-btn-active(활성화)
ui-state-persist 지정(상태유지)
예제로 정리
현재 페이지는 a.html
<div data-role="footer" data-id="persistFooter" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="a.html" data-icon="plus"
class="ui-btn-active ui-state-persist">회원가입</a></li><!-- a.html은 회원가입 페이지니까 자동선택,상태유지를 적용한다 -->
<li><a href="b.html" data-icon="search">검색</a></li>
<li><a href="c.html" data-icon="gear">목록보기</a></li>
</ul>
</div>
</div>
a.html은 현재페이지니까 회원가입 항목에 자동선택,상태유지를 적용한다
만약 여기서 검색을 클릭하면 링크를 통해 b.html로 이동된다.
----------------------------------------------------------------
b.html
검색페이지에 맞게 실시간 검색 및 listview를 부여한다
1.실시간 검색->data-filter="true" (필터적용)
2.listview(ex 전화번호부) 항목의 구분선->data-role="list-divider"
<div data-role="content">
<ul data-role="listview" data-filter="true"><!-- 전화번호부 만들고 원하는것만 보이게 필터 -->
<li data-role="list-divider">Divider(구분선)</li>
<li><a href="#">방화</a></li>
<li><a href="#">개화산역</a></li>
<li><a href="#">김포공항</a></li>
<li><a href="#">송전</a></li>
<li><a href="#">마곡</a></li>
<li><a href="#">발산</a></li>
</ul>
</div>
<div data-role="footer" data-id="persistFooter" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="a.html" data-icon="plus" >회원가입</a></li>
<li><a href="b.html" data-icon="search"
class="ui-btn-active ui-state-persist">검색</a></li><!-- 현재 페이지가 b라서 선택,유지 적용 -->
<li><a href="c.html" data-icon="gear">목록보기</a></li>
</ul>
</div>
</div>
현재 페이지가 b라서 검색항목에 선택,유지 적용
----------------------------------------------------------------
c.html
자주 문의하는 목록보기를 만들고자 한다
data-role="collapsible-set" 을 사용히여 묶어준다.
=> 전체 화면의 데이터부분을 보여줄 영역을 설정할때 사용
=>그 안에서 펼처질 각각의 항목은 data-role="collapsible" 으로 설정
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible">
<h1>대금결제방식은 어떻게 하는지 알려주세요</h1><!-- 묻고 -->
<p>1.계좌이체 2.카드결제 3.포인트결제 방식이 있습니다.</p><!-- 답하기 -->
</div>
<div data-role="collapsible">
<h1>임시</h1>
<p>직업은 프로그래머이고 나이는 34살입니다.</p>
</div>
</div>
</div>
<div data-role="footer" data-id="persistFooter" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="a.html" data-icon="plus" >회원가입</a></li>
<li><a href="b.html" data-icon="search">검색</a></li>
<li><a href="c.html" data-icon="gear"
class="ui-btn-active ui-state-persist">목록보기</a></li><!-- 현재 페이지가 c라서 선택,유지 적용 -->
</ul>
</div>
</div>
2022-08-12
