HTML5 및 CSS3 프로그래밍을위한 기본 jQuery Mobile 페이지 작성 방법 - 더미

비디오: 누구나 쉽게 내 홈페이지 만들기 프로젝트[13편] index.html 만들기제작할 구조 설명[IB96] 2024

AJAX로 모바일 친화적 인 웹 사이트를 구축하는 데 HTML5 및 CSS3 프로그래머들 사이에서 매우 인기있는 접근 방식이 있습니다. 이는 jQuery에 대한 추가 기능 라이브러리를 사용하는 것입니다. jQuery Mobile 라고 불린다. Jquery Mobile은 라이브러리 상단에 구축 된 JavaScript와 CSS 코드의 강력한 조합입니다.

jQuery 라이브러리는 일반적인 HTML5 페이지를 가져 와서 기본 모양과 느낌을 모방하는 방식으로 수정합니다. 코드는 일반적인 HTML과 비슷합니다.

모바일 데모

JQuery Mobile 데모

jQuery Mobile 웹 사이트

일반 목록입니다.
999에서
모바일 목록

> 인형을위한 HTML 일체형 몇 가지 세부 정보로이 페이지를 모바일 궁금증으로 만들 수 있습니다:

jQuery 모바일 CSS를 포함하십시오.

HTML 요소를 모바일 대응 요소로 변환하도록 설계된 특수 CSS 파일입니다. 직접 다운로드 할 수 있지만 대부분의 개발자는 jQuery 사이트에 직접 연결됩니다.

표준 jQuery 라이브러리를 포함합니다.
대부분의 코드는 jQuery를 기반으로하므로 jQuery 라이브러리도 통합하십시오. 다시 한번 메인 jQuery 웹 사이트에서 jQuery를 가져와야한다.

jQuery 모바일 라이브러리를 통합합니다.
이 라이브러리는 라이브러리를 확장하여 새로운 모바일 관련 동작을 추가하는 JavaScript 라이브러리입니다.

main-div에 data-role = "page"속성을 추가하십시오.
페이지에 기본 div를 만들고 속성을 제공하십시오. 이것은 jQuery 모바일에 추가 된 사용자 정의 데이터 - 롤 속성입니다. jQuery는 다양한 요소의 데이터 역할을 살펴보고 스타일 및 동작 변경 사항을 이러한 요소에 자동으로 적용합니다. 기본 div에 데이터 역할 페이지를 지정하십시오. 이렇게하면 전체 div를 페이지로 처리하도록 브라우저에 지시합니다.

데이터 테마를 지정하십시오.
모든 요소에 데이터 테마를 적용 할 수 있지만 거의 항상 페이지에 테마를 적용합니다. jquery 모바일에는 "a"~ "e"라는 기본 테마가 내장되어 있습니다. "당신이 좋아하는 것을 찾으려고 시도하거나, 테마 모바일의 특별한 모바일 버전으로 자신 만의 것을 만들 수 있습니다.

페이지에 div를 추가하십시오.
페이지 div에 div를 몇 개 더 추가하십시오. 일반적으로 세 가지가 있습니다: 머리글, 내용 및 바닥 글.

data-role = "header"로 헤더 div를 지정하십시오. 데이터 역할을 가진 div 안에 헤더 정보를 넣으면 jQuery는이 요소를 모바일 헤더로 취급하고 적절한 스타일을 적용 할 것을 말합니다. 헤더에는 일반적으로
태그가 포함됩니다.

일반적으로 고정 할 헤더를 data-position = "fixed"속성으로 지정합니다. 이렇게하면 모바일 응용 프로그램의 일반적인 동작 인 나머지 콘텐츠가 스크롤되는 경우 머리글이 그대로 유지됩니다.
콘텐츠 div를 설정합니다.

div의 data-role = "content"를 추가하여 페이지의 주요 콘텐츠 영역을 설정하십시오. 사이트의 주요 본문 요소 중 하나라도이 세그먼트에 있어야합니다.
모든 링크를 버튼으로 변환 할 수 있습니다.

웹 애플리케이션의 표준 컨벤션은 링크를 마우스 기반 입력보다 큰 목표를 가진 버튼으로 전환하는 것입니다. anchor 태그에 data-role = "button"속성을 추가하여 버튼에 대한 링크를 쉽게 변환 할 수 있습니다.
목록을 모바일 목록보기로 변환합니다.

목록에는 모바일 세계에서 특별한 규칙이 있습니다. data-role 속성을 사용하여 모든 목록을 listView로 변환 할 수 있습니다.
꼬리말 만들기.

"footer"로 설정된 데이터 역할이있는 div를 하나 더 추가합니다. 일반적으로 머리글과 같은 바닥 글은 데이터 위치 특성으로 고정됩니다.