jQuery Mobile 페이지

jQuery Mobile 시작하기

ヒント：jQuery Mobile은 모든 모바일 장치에 적용되지만, 데스크톱 컴퓨터에서는 CSS3 지원이 제한적이므로 호환성 문제가 있을 수 있습니다.

따라서 이 튜토리얼에서는 최상의 읽기 경험을 위해 구글 크롬 브라우저를 추천합니다.

예제

<body>
<div data-role="page">
  <div data-role="header">
    <h1>저의 홈페이지에 방문해 주셔서 감사합니다</h1>
  </div>
  <div data-role="content">
    <p>저는 모바일 개발자입니다!</p>
  </div>
  <div data-role="footer">
    <h1>페이지 푸터 텍스트</h1>
  </div>
</div>
</body>

본인이 직접 시도해보세요

예제 설명：

  • data-role="page"는 브라우저에 표시되는 페이지입니다
  • data-role="header"는 페이지 상단의 도구 표시줄(제목과 검색 버튼 등으로 사용됩니다)을 생성합니다
  • data-role="content"는 페이지의 내용을 정의합니다. 예를 들어, 텍스트, 이미지, 양식, 버튼 등.
  • data-role="footer"는 페이지 하단의 도구 표시줄을 생성합니다

이 컨테이너에서는 어떤 HTML 요소도 추가할 수 있습니다. 문서, 이미지, 제목, 목록 등.

ヒント：HTML5 data-* 속성은 jQuery Mobile를 통해 모바일 장치에 "터치 친화적인" 인터랙션 아웃레이아웃을 생성하는 데 사용됩니다.

jQuery Mobile에 페이지 추가

jQuery Mobile에서는 단일 HTML 파일에 여러 페이지를 생성할 수 있습니다.

각 페이지를 고유한 id로 구분하고, href 속성을 사용하여 서로를 연결하세요：

예제

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">페이지 이동</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">페이지 하나로 이동</a>
  </div>
</div>

본인이 직접 시도해보세요

주의사항：대량의 내용을 포함한 웹 애플리케이션은 로드 시간에 영향을 미칠 수 있습니다(텍스트, 링크, 이미지, 스크립트 등). 내부 링크 페이지에서 이를 원하지 않는 경우, 외부 파일을 사용하세요：

<a href="externalfile.html"> 외부 페이지로 이동</a>

페이지를 다이얼로그로 사용

다이얼로그는 정보를 표시하거나 입력을 요청하는 뷰 타입입니다.

사용자가 링크를 클릭할 때(轻轻触摸) 다이얼로그를 생성하려면, 해당 링크에 data-rel="dialog"을 추가하세요：

예제

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo"> data-rel="dialog">페이지 두 번째로 이동</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">페이지 하나로 이동</a>
  </div>
</div>

본인이 직접 시도해보세요