JQuery Mobile은 탐색 모음 및 footer_jquery를 구현합니다.

탐색 모음은 일반적으로 머리글이나 바닥글 내부에 수평으로 배열된 링크 세트로 구성됩니다.

기본적으로 탐색 모음의 링크는 자동으로 버튼으로 변환됩니다(data-role="button" 필요 없음).

탐색 표시줄의 코드는 일반적으로 데이터 역할이 헤더인 div 내에 배치됩니다.

<div data-role="header"> 
<a href="#" data-role="button" data-icon="home">首页</a> 
<h1>欢迎访问我的主页</h1> 
<a href="#" data-role="button" data-icon="search">搜索</a> 
</div>

기본 탐색 바코드는 위와 같으며 두 개의 버튼과 제목으로 한 줄의 텍스트가 포함되어 있습니다. data-icon은 버튼에 해당하는 작은 아이콘을 정의할 수 있습니다. 버튼을 텍스트 오른쪽에 배치하려면 class="ui-btn-right" 스타일을 추가하면 됩니다. Jquery Mobile의 탐색 섹션(헤더 내부)에는 두 개의 버튼만 포함될 수 있습니다. (상상하실 수 있듯이 일반적인 모바일 앱 내비게이션은 버튼이 많지 않고, 바닥글에 배치되는 경우가 많습니다.)

반대로 바닥글의 버튼 수에는 제한이 없습니다. 기본 코드는 다음과 같습니다.

<div data-role="footer"> 
<a href="#" data-role="button" data-icon="plus">转播到新浪微博</a> 
<a href="#" data-role="button" data-icon="plus">转播到腾讯微博</a> 
<a href="#" data-role="button" data-icon="plus">转播到QQ空间</a> 
</div>

일반적인 모바일 앱 디자인 패턴과 일치합니다. 하단에는 다른 페이지로 전환할 수 있는 버튼이 있습니다. 페이지를 전환하는 방법도 매우 간단합니다. 여기의 각 버튼은 태그로 정의되어 있습니다. 페이지 변환은 href 뒤에 수행할 수 있습니다. 즉, 데이터 역할이 페이지인 div)가 점프를 완료할 수 있습니다. 점프 프로세스에는 나중에 소개될 jquery 모바일에 내장된 많은 애니메이션 효과가 있습니다.

머리글 및 바닥글과 관련하여 위의 것 외에도 데이터 위치 속성을 사용하여 다음 세 가지 선택적 값(출처: w2cschool)을 포함하여 위치 속성을 정의할 수도 있습니다.

인라인 - 기본값. 머리글과 바닥글은 페이지 콘텐츠와 인라인입니다.

수정됨 – 머리글과 바닥글이 페이지 상단과 하단에 그대로 유지됩니다.

전체 화면 - 머리글과 바닥글이 고정과 유사하게 페이지 상단과 하단에 유지되지만 페이지 콘텐츠 위에도 약간 비치게 됩니다.

jQuery 모바일의 내비게이션 바와 바닥글 구현에 대한 관련 지식을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!