Latest web development tutorials

jQuery를 모바일 페이지

학습 jQuery를 모바일을 시작합니다

램프 jQuery를 모바일은 모든 모바일 장치와 호환이지만, (의한 제한 CSS3의 지원)을 PC와 완벽하게 호환되지 않지만.

더 나은이 튜토리얼을 읽기 위해, 우리는 당신이 구글 크롬 브라우저를 사용하는 것이 좋습니다.

예

<body>
<div data-role="page" >

  <div data-role="header" >
    <h1>欢迎来到我的主页</h1>
  </div>

  <div data-role="main" class="ui-content" >
    <p>我现在是一个移动端开发者!!</p>
  </div>

  <div data-role="footer" >
    <h1>底部文本</h1>
  </div>

</div>
</body>

»시도

분석의 예 :

  • = "페이지"데이터 역할은 표시 할 브라우저의 페이지입니다.
  • 데이터 역할 = "헤더"(일반적으로 표기 또는 검색 버튼 사용) 생성 된 페이지의 상단에 툴바 인
  • 데이터 역할 = "메인"등등 텍스트, 이미지 형태의 버튼과 같은 페이지의 콘텐츠를 정의한다.
  • 이 페이지 패딩과 마진 "UI 콘텐츠"클래스입니다.
  • 데이터 역할 = 페이지 도구 모음의 바닥을 만드는 데 사용되는 "바닥 글".
  • 등의 단락, 사진, 제목, 목록, - ​​이러한 컨테이너에서 당신은 어떤 HTML 요소를 추가 할 수 있습니다
램프 jQuery를 모바일 데이터 - *이 다양한 UI 요소 천이 페이지 구조를 지원하는 HTML5 특성에 의존한다. 브라우저가들은 자동으로 삭제됩니다를 지원하지 않습니다.

페이지에 jQuery를 모바일 추가

jQuery를 모바일을 사용하여, 당신은 다른 페이지의 숫자에서 하나의 HTML 파일을 만들 수 있습니다.

해당 페이지 같은 고유 ID를 이용하여 구별 HREF 다른 특성을 사용할 수있다 :

예

<DIV 데이터 역할 = "페이지 "ID = "pageone">
<사업부의 데이터 역할 = "기본"클래스 = "UI 콘텐츠">
<a의 href="#pagetwo"> 두 번째 페이지 </a>로 이동합니다
</ DIV>
</ DIV>

<DIV 데이터 역할 = "페이지 "ID = "pagetwo">
<사업부의 데이터 역할 = "기본"클래스 = "UI 콘텐츠">
<a의 href="#pageone"> 첫 페이지 </a>로 이동합니다
</ DIV>
</ DIV>

»시도

참고 : 웹 응용 프로그램 (등 텍스트, 이미지, 스크립트)의 콘텐츠를 많이있을 때 심각하게로드 시간에 영향을 미칠 것입니다. 당신이 페이지의 링크를 사용하지 않는 경우는 외부 파일을 사용할 수 있습니다 : 

<a href="externalfile.html">访问外部文件</a>

대화 상자 사용 등의 페이지

대화 상자는 페이지 정보 표시 또는 입력 양식 정보를 표시하는 데 사용됩니다.

데이터 확인해 = "대화"팝업 대화 상자가 사용자가 링크를 클릭 할 수있는 링크에 추가 :

예

<사업부의 데이터 역할 = "페이지"ID = "pageone">
<사업부의 데이터 역할 = "기본"클래스 = "UI 콘텐츠">
두 번째 페이지 </a>에 <a href="#pagetwo"> 점프
</ DIV>
</ DIV>

<DIV 데이터 역할 = "페이지 "데이터 대화 = "true"를 한 id = "pagetwo">
<사업부의 데이터 역할 = "기본"클래스 = "UI 콘텐츠">
첫 페이지 </a>에 <a href="#pageone"> 점프
</ DIV>
</ DIV>

»시도