이 기사는 주로 다양한 페이지 전환 효과 및 모달 대화 상자의 사용을 소개합니다. HTML5의 다양한 페이지 요소를보다 자세히 사용하는 기술을 소개합니다. 매우 실용적입니다. 필요한 친구는 그것을 참조 할 수 있습니다.
이 기사는 HTML5의 다양한 페이지 전환 효과와 모달 대화 상자 사용을 상세하게 요약합니다. 참조를 위해 공유하십시오. 특정 분석은 다음과 같습니다.
페이지 애니메이션 :데이터 전환 속성은 페이지 전환의 애니메이션 효과를 정의 할 수 있습니다.
예 : <a href = index.html data-transition = pop> 팝 </a>
데이터 변환 매개 변수 테이블 :
매개 변수 설명
오른쪽에서 왼쪽으로 슬라이드하십시오
슬라이드 업이 바닥에서 미끄러 져 들어갑니다
슬라이드 타운은 위에서 아래로 슬라이드합니다
팝은 점차 센터에서 확장됩니다
페이드가 점차 나타납니다
뒤집기
참고 : 대상 페이지에 뒤로 버튼을 표시하려면 데이터 지향 = 리버스 속성을 링크에 추가 할 수 있습니다. 이 속성은 원래 Data-Back = true와 동일합니다. 공식 버전에서 어떤 속성이 유지 될지 모르겠습니다.
모달 대화 상자모달 대화 상자는 둥근 타이틀 바와 독점 이벤트를위한 닫기 버튼이있는 의사-흐름 레이어입니다. 모든 구조화 된 페이지를 사용하여 Data-Rel = 대화 상자 링크를 사용하여 모달 대화 상자 응용 프로그램을 구현할 수 있습니다.
예 : <a href = foo.html data-rel = 대화 상자> 열기 대화 상자 </a>
이 페이지 전환 효과는 표준 페이지의 데이터 전환 매개 변수 효과를 사용할 수도 있습니다. 더 나은 결과를 달성하기 위해 POP, SLIDEUP 및 FLIP 매개 변수를 사용하는 것이 좋습니다.
이 모달 대화 상자는 기본적으로 닫기 버튼이 생성되며, 이는 부모 페이지로 돌아 오는 데 사용됩니다. 스크립팅 기능이 약한 장치에서는 DataRel =로 링크를 추가하여 닫기 버튼을 구현할 수도 있습니다.
스크립트를 지원하는 장치의 경우 href =# 또는 data-rel = 뒤로 직접 사용하여 종료를 달성 할 수 있습니다. 내장 된 Close 메소드를 사용하여 다음과 같은 모달 대화 상자를 닫을 수도 있습니다. $ ( '. ui-dialog'). 대화 상자 ( 'close').
모달 대화 상자는 동적으로 표시되는 임시 페이지 이므로이 페이지는 해시 테이블에 저장되지 않으므로이 페이지로 후퇴 할 수 없습니다. 예를 들어, 페이지 A의 링크를 클릭하여 대화 상자 B를 열면 작업이 완료되고 대화 상자가 닫힌 다음 페이지 C로 이동하면 브라우저의 뒤로 버튼을 클릭하면 B가 아닌 페이지 A로 돌아갑니다.
도구 모음툴바는 주로 헤더, 바닥 글 및 기타 영역에서 사용되며 페이지에서 비즈니스 기능의 적용을 지원하고 구현하는 데 사용됩니다. JQuery Mobile은 비교적 완전한 솔루션을 제공합니다.
도구 모음은 헤더 바, 바닥 글 및 탐색 (NAV 막대)의 세 가지 응용 프로그램으로 나뉩니다.
그중에서도 제목과 바닥 글은 페이지에서 몇 가지 다른 방식으로 적용됩니다. 기본 도구 모음은 인라인 방식으로 배치됩니다. 이 포지셔닝 방법은 스크립트가 열악한 장치 및 CSS 호환성을 포함한 최적화를 포함하여 최대의 호환성을 달성 할 수 있습니다.
또 다른 방법은 정적 일 수도 있습니다. 이 포지셔닝 방법을 사용하면 도구 모음이 항상 화면의 상단 또는 하단에 보관할 수 있습니다. 또한 화면 공간 사용을 극대화하는 목표를 달성 한 도구 모음을 표시/숨기기 위해 클릭 이벤트를 수락 할 수 있습니다.
구현 방법 : 데이터 위치 추가 = 제목 및 바닥 글 영역에 고정 속성을 추가합니다.
제목 컨테이너제목 컨테이너는 페이지 헤더 영역의 디스플레이 컨트롤이며 주로 제목과 기본 작동 영역을 표시하는 데 사용됩니다.
구조 코드 :
코드를 복사하십시오