jQuery 모바일 개발web(6)_jquery

모바일 장치용 jquery 모바일 이벤트 유형입니다.

　1.터치이벤트.

화면을 빠르게 터치하고 나가면 완전한 클릭 동작과 유사합니다.
길게 누르기 화면을 일정 시간 동안 터치하고 유지하세요.
​ ​ 스와이프는 화면 픽셀이 1초 이내에 가로로 30px 이동할 때 실행됩니다.
​ ​ 스와이프왼쪽으로 슬라이드
​ ​ 오른쪽으로 슬라이드하듯이 오른쪽으로 스와이프합니다.

　2. 방향전환 이벤트

방향 변경 이벤트 함수는 모바일 장치의 방향이 변경될 때 트리거됩니다. 이벤트 콜백 함수의 두 번째 매개 변수는 현재 방향을 식별하는 데 사용되는 매개 변수
를 반환합니다. 이 매개변수에는 Portrait(수직) 및 Landscarp(수평)의 두 가지 반환 값이 있습니다.

3. 스크롤 이벤트

scrollstart 이 이벤트는 스크롤이 시작될 때 트리거됩니다.
scrollend 이 이벤트는 스크롤이 끝나면 트리거됩니다.

　4. 표시/숨기기

Pagebeforeshow 이벤트는 애니메이션 효과를 통해 뷰가 화면에 나타나기 시작하기 전에 발생합니다.
Pagebeforehide는 애니메이션 효과를 통해 보기가 숨겨지기 전에 이벤트를 트리거합니다.
Pageshow 이벤트는 애니메이션 효과를 통해 화면에 뷰가 표시될 때 발생합니다.
애니메이션 효과를 통해 뷰가 숨겨지면 페이지 숨기기가 트리거됩니다.

샘플 코드:

　　$("div").live("pageshow",function(event,ui){ 
　　　　　　　　alert("this page just hidden"+ui.prevPage)
　　　　　　})

　5. 마우스 이벤트 시뮬레이션

vmouseover는 터치 및 마우스 오버 이벤트를 균일하게 처리합니다.
vmousedown은 터치 및 마우스 누르기 이벤트를 균일하게 처리합니다.
vmousemouse는 터치 및 마우스 이동 이벤트를 균일하게 처리합니다.
vmouseup은 터치 및 마우스 버튼 해제 이벤트를 균일하게 처리합니다.
vclick은 터치 및 마우스 클릭 이벤트를 균일하게 처리합니다.
vmousecancel은 터치 및 마우스 이탈 이벤트를 균일하게 처리합니다.

페이지 보기 지원

　1.$.mobile.changePage

함수형 프로그래밍을 통해 두 뷰 간의 전환 효과를 변경합니다. 일반적으로 전환 효과는 하이퍼링크를 클릭하거나 양식을 제출할 때 사용자 정의됩니다.

　　 문법: 　　

　$.mobile.changePage(to,options);
　　　　　　to 是必选参数， 可以传递的参数类型包括字符串，对象。
 　　　　　　options 可选，传递的是一个JSON 数据格式对象，
 　　　　　　用法： 以下实例将改变decondPage.html 的页面效果
 　　　　　　$.mobile.changePage("secondPage.html",{ 
　　　　　　　　transition:"slidedown"
　　　　　　}) 

　양식 제출 작업　

　$.mobile.changePage("submit.php",{ 
　　　　　　type:"post";
　　　　　　data:$("form#add").seriaize();
　　　　})

　2.$.mobile.loa페이지

주요 기능은 외부 페이지를 로드하여 현재 페이지의 DOM 요소에 삽입하는 것입니다.
​​​$.mobile.loadPage(url,options);
URL은 필수 매개변수이며 절대 또는 상대 URL 주소를 전달합니다.
옵션은 JSON 데이터 객체를 전달하는 선택적 매개변수입니다.

　예: 　

$.mobile.loadPage("secomdPage.html");
　　　　　提交表单并加载结果页面：
 　　　　$.mobile.loadPage("result.php",{ 
　　　　　　type:"get",
　　　　　　data:$("form#search").serizlize();
　　　　})

데이터 저장:

　 1.jqmData() 메소드;

요소에 모든 데이터를 바인딩할 수 있습니다.

　　$.mobile.jqmData(요소,키,값)
요소 매개변수는 데이터를 바인딩해야 하는 요소를 지정합니다. 키는 데이터에 바인딩되어야 하는 속성 이름입니다.
　　　가치로 묶인 데이터.

　

2.jqmRemoveData() 메소드:

이 방법은 요소에 바인딩된 데이터를 제거하는 것입니다.

　　$.mobile.jqmRemoveData([이름])
이름은 제거해야 하는 데이터 속성을 지정하는 선택적 매개변수입니다. 매개변수가 전달되지 않으면 요소의 모든 데이터를 제거해야 합니다.

　

3.jqmHasData() 메소드

요소에 바인딩된 데이터가 있는지 확인

　　　$.mobile.jqmHasData(element);
요소 매개변수는 데이터 확인을 위한 DOM 요소입니다.

주소 경로 도우미:

　

1. URL 주소 분석

$.mobile.path.parseUrl 함수는 Url 사양을 구문 분석하고 모든 매개변수 값이 포함된 개체를 반환하므로 Url 주소의 매개변수 속성에 쉽게 액세스할 수 있습니다.

　　

parseUrl 함수 구문

　　$.mobile.path.parseUrl(url);

url 매개변수는 상대 또는 절대 URL 주소이며, 전달된 매개변수는 필수입니다.
parsUrl 함수는 다양한 속성이 포함된 개체를 반환합니다.
속성: 해시 설명: # 기호 뒤의 모든 문자 내용은 위치 해시와 동일합니다
속성: 호스트 설명: URL
의 호스트 이름 및 포트 번호 속성: 호스트 이름 설명: URL만 포함된 호스트 이름을 반환합니다.
속성: href 설명: 전체 URL 주소를 반환합니다.
속성: pathname 설명: 파일 또는 디렉터리의 관련 경로를 반환합니다.
속성: port 설명: Url
의 포트 번호 반환 요청 속성: portocol 설명: http https
와 같은 요청 Url 주소의 프로토콜을 반환합니다. 속성: search 설명: 반환 주소
에서 "?" 뒤의 요청 매개변수 속성: Authority 설명: 사용자 이름, 비밀번호, 호스트 이름, 포트 번호로 구성된 주소를 반환합니다.
속성: 디렉토리 설명: 요청된 URL 주소
의 디렉토리 경로를 반환합니다. 속성: 도메인 설명: 프로토콜 프로토콜과 권한으로 구성된 경로를 반환합니다
속성: filename 설명: 요청된 URL 파일 이름을 반환합니다.
속성: hrefOfHash 설명: 해시 값을 포함하지 않는 URL 경로를 반환합니다.
속성: hrefOfSearch 설명: 요청 매개변수 및 해시 값을 포함하지 않는 URL 경로를 반환합니다.
속성: 비밀번호 설명: 요청 URL의 비밀번호(예: FTP 프로토콜 비밀번호)를 반환합니다.
속성: 사용자 이름 설명: 요청 URL의 사용자 이름(예: FTP 프로토콜의 사용자 이름)을 반환합니다.

표시/숨기기 로드 중

로딩 대화상자를 표시하는 방법은

　　　$.mobile.showPageLoadingMse();
로딩 대화상자를 숨기는 방법은
　　　$.mobile.hidePageLoadingMse();

JQuery Mobile과 HTML5의 3가지 장점

1. 빠르게 시작하고 신속한 반복 지원: 일주일이 조금 넘는 시간 동안 O'Reilly에서 출판한 JQuery Mobile 설명서와 JQuery Mobile 책을 읽고 작동하는 앱의 예비 버전을 완성했습니다. 이전에는 HTML5/JQuery 모바일 개발 경험이 없었습니다. Android 및 iOS에 비해 JQuery Mobile 및 HTML5를 사용하여 UI와 로직을 구축하는 것은 기본 시스템에서 구축하는 것보다 훨씬 빠릅니다.

주석: 기본 시스템: Google에서 출시한 수정되지 않은 시스템인 Android 기본 시스템과 같은 원래 운영 체제입니다. 본 글에서 네이티브 애플리케이션이란 시스템에서 제공하는 API를 이용하여 직접 개발한 프로그램을 의미하며, JQuery Mobile에서 개발한 프로그램에 해당한다.

Apple의 Builder 인터페이스는 학습 곡선이 가파르고 Android의 복잡한 레이아웃 시스템을 배우는 데에도 시간이 많이 걸립니다. 또한 목록 보기를 원격 데이터 소스에 연결하고 네이티브 코드를 사용하여 멋진 모양과 느낌을 갖는 것은 매우 복잡합니다(Android의 ListView, iOS의 UITableView). JavaScript 및 HTML/CSS에 대한 기존 지식을 사용하여 이 작업을 수행할 수 있었습니다. . 어댑터, 델리게이트 등 새로운 추상 개념을 배우지 않고도 동일한 기능을 빠르게 구현합니다. JQuery 코드만 작성하면 됩니다.

2. 번거로운 App Store 승인 프로세스와 디버깅 및 빌드의 고통을 피하세요. 휴대폰, 특히 iOS 휴대폰용 애플리케이션을 개발할 때 가장 고통스러운 프로세스는 Apple App Store에서 승인을 받는 것입니다. iOS 사용자에게 기본 앱을 출시하려면 상당히 긴 프로세스를 기다려야 합니다(며칠, 어쩌면 몇 주가 걸릴 수도 있음). 프로그램의 첫 번째 릴리스는 고난일 뿐만 아니라 모든 후속 업그레이드도 마찬가지입니다. 이로 인해 QA 및 릴리스 프로세스가 복잡해지고 시간이 추가됩니다. JQuery Mobile 애플리케이션은 단순한 웹 애플리케이션이므로 모든 웹 환경의 장점을 상속합니다. 즉, 사용자가 사이트를 로드하면 즉시 최신 버전으로 "업그레이드"됩니다. 버그를 수정하고 새로운 기능을 즉시 추가할 수 있습니다. Android 시스템에서도 애플리케이션 시장 요구 사항이 Apple 환경에 비해 훨씬 완화되어 사용자가 모르는 사이에 제품 업그레이드를 완료하는 것도 좋은 일입니다.

또 다른 이점은 베타 또는 테스트 버전을 출시하기가 더 쉽다는 것입니다. 사용자에게 브라우저에서 URL을 열라고 말하면 끝입니다! iOS의 미친 DRM이나 Android의 필수 APK를 고려할 필요가 없습니다.

3. 크로스 플랫폼 및 크로스 디바이스 개발 지원: 내 앱이 Android 및 IOS에서 바로 작동할 뿐만 아니라 다른 플랫폼에서도 작동한다는 큰 이점이 있습니다. 독립 개발자로서 다양한 플랫폼의 코드 기반을 유지 관리하는 것은 큰 일입니다. 단일 모바일 플랫폼을 위한 고품질 모바일 애플리케이션을 작성하려면 정규직이 필요하고, 각 플랫폼마다 유사한 작업을 반복적으로 수행하려면 많은 리소스가 필요합니다. Android와 iOS 기기 모두에서 앱이 작동할 수 있다는 점은 저에게 큰 보너스입니다.

한 단계 더 나아가, 특히 다양한 크기와 형태로 출시되는 다양한 Android 포크를 실행하는 기기의 경우, 다양한 화면 해상도 문제가 있는 휴대전화에서 앱이 보기 좋게 보이도록 만드는 것이 매우 중요합니다. 까다로운 Android 개발자의 경우 화면 크기에 따라 화면 분할을 설정(완전 최소화에서 최대화로 확대/축소)하는 데 많은 개발 시간이 걸릴 수 있습니다. 브라우저는 모든 장치에서 동일한 방식으로 렌더링하므로 이 측면에 대해 걱정할 필요가 없습니다.