탐색 표시줄 및 바닥글의 모바일 구현(코드 포함)

이번에는 모바일에서 내비게이션 바와 바닥글을 구현하는 방법(코드 포함)을 알려드리겠습니다. 모바일에서 내비게이션 바와 바닥글을 구현하는 방법에 대한 주의사항은 무엇인가요? .

내비게이션 바는 일반적으로 머리글이나 바닥글 내부에 수평으로 배열된 링크 세트로 구성됩니다.

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

내비게이션 바의 코드는 일반적으로 데이터 역할이 헤더인 p 내에 배치됩니다.

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

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

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

<p 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> 
</p>

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

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

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

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

전체 화면 - 머리글과 바닥글이 페이지 상단과 하단에 유지되는 것과 유사하지만 페이지 내용 위에도 약간 비치게 됩니다.

사례를 읽으신 후 방법을 익히셨을 것입니다. 이번 글에서는 더 흥미로운 내용이 있으니 PHP 중국어 사이트의 다른 관련 글도 주목해주세요!

추천 자료:

모바일 프레임워크에서 양식 구성 요소를 사용하는 방법

jQuery Mobile과 Kendo UI 사용의 차이점은 무엇입니까

위 내용은 탐색 표시줄 및 바닥글의 모바일 구현(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!