페이지 만들기
jQuery를 모바일 모든 모바일 장치에서 작동하더라도, 그것은 (때문에 제한된 CSS3의 지원) 데스크톱 컴퓨터에서 일부 호환성 문제가 발생할 수 있습니다.
이 튜토리얼에서는, 우리는 당신이 더 나은 독서 경험에 대한 구글 크롬 브라우저를 사용하는 것이 좋습니다.
다음, 우리는 간단한 표준 jQuery를 모바일 페이지를 만들었습니다 :
예
<body>
<div data-role="page" >
<div
data-role="header" >
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content" >
<p>I Am Now A Mobile Developer!!</p>
</div>
<div data-role="footer" >
<h1>Footer
Text</h1>
</div>
</div>
</body> »그것을 자신을 시도 예 설명 :
- data-role="page" 브라우저에 표시되는 페이지입니다
- data-role="header" 페이지의 상단에 툴바를 생성합니다 (보통 제목이나 검색 버튼 사용)
- data-role="main" 텍스트, 이미지, 버튼, 형태 등 같은 페이지의 콘텐츠를 정의
- "ui-content" 클래스는 페이지 콘텐츠 안에 여분의 패딩과 마진을 추가
- data-role="footer" 페이지 하단에 툴바를 생성
- 등의 단락, 이미지, 제목, 목록, - 이러한 컨테이너 내부에서, 당신은 어떤 HTML 요소를 추가 할 수 있습니다
HTML5의 data-* 속성은 만들 jQuery를 모바일에서 사용되는 "touch-friendly" 모바일 장치와 매력적인 모습을.
jQuery를 모바일에서 페이지 추가
jQuery를 모바일에서 단일 HTML 파일에 여러 페이지를 만들 수 있습니다.
고유 ID와 각 페이지를 분리하고 사용 href 그들 사이에 링크 속성을 :
예
<div data-role="page" id="pageone" >
<div data-role="main" class="ui-content">
<a href="#pagetwo" >Go to
Page Two</a>
</div>
</div>
<div data-role="page"
id="pagetwo" >
<div
data-role="main" class="ui-content">
<a href="#pageone" >Go to Page
One</a>
</div>
</div> »그것을 자신을 시도 팁 :로드 시간이 많은 콘텐츠와 웹 응용 프로그램의 영향을받습니다 (즉, 텍스트, 링크, 이미지, 스크립트 등). 당신이 내부 페이지를 연결하지 않으려면 외부 파일을 사용합니다 :
<a href="externalfile.html">Go To External Page</a>
대화 상자로 사용하는 페이지
대화 상자가 특별한 정보 나 요청 입력을 표시하는 데 사용 윈도우의 유형입니다.
사용자가 링크를 탭 때 열리는 대화 상자를 만들려면 추가 data-dialog="true" 당신이 대화로 표시 할 페이지 :
예
<div data-role="page" id="pageone">
<div
data-role="main" class="ui-content">
<a href="#pagetwo">Go to Page Two</a>
</div>
</div>
<div data-role="page"
data-dialog="true" id="pagetwo">
<div
data-role="main" class="ui-content">
<a href="#pageone">Go to Page One</a>
</div>
</div> »그것을 자신을 시도