[JQUERY] jQuery를 모바일 : 문서 준비 대 페이지 이벤트

jQuery를 모바일 : 문서 준비 대 페이지 이벤트

해결법

1. ---

   1.내 원래 문서는 페이지 처리, jQuery를 모바일 1.4 전에 기본적으로 모든 오래된 방법을 구성했다. 당신은 여전히 ​​모든 것이 적어도 내년 jQuery를 모바일 1.6까지, 아래에 언급 사용할 수 있도록, jQuery를 모바일 1.5를 취급의 오래된 방법은 현재 사용되지 않으며 (포함)까지 활성 유지됩니다.

   내 원래 문서는 페이지 처리, jQuery를 모바일 1.4 전에 기본적으로 모든 오래된 방법을 구성했다. 당신은 여전히 ​​모든 것이 적어도 내년 jQuery를 모바일 1.6까지, 아래에 언급 사용할 수 있도록, jQuery를 모바일 1.5를 취급의 오래된 방법은 현재 사용되지 않으며 (포함)까지 활성 유지됩니다.

   더 이상 존재하지 않는 pageinit 포함 된 이벤트는, 그들은 pagecontainer 위젯으로 대체됩니다. Pageinit이 완전히 삭제되고 대신 pagecreate을 사용할 수 있으며, 해당 이벤트는 동일하고 변경하지 않을 머물렀다.

   이 페이지의 이벤트 처리의 새로운 방법에 관심이 있다면, 여기 좀 봐 다른 경우에이 문서를 계속 주시기 바랍니다. 당신은 당신이 아마 많은 유용한 정보를 찾을 수 있도록 페이지 이벤트를 넘어, 당신이 jQuery를 모바일 1.4 +를 사용하는 경우에도이 대답을 읽어야합니다.

   이 문서는 또한 여기에 내 블로그의 일환으로 볼 수 있습니다.

   당신이 jQuery를 배울 첫 번째 것은 모든 것이 즉시 DOM이로드 될 때 실행됩니다 있도록 () 함수 .ready $ (문서)의 내부 코드를 호출하는 것입니다. 하지만, jQuery를 모바일에서, Ajax는 당신이 탐색으로 DOM에 각 페이지의 내용을로드하는 데 사용됩니다. 첫 페이지가로드 된 모든 코드는 페이지 새로 고침 후 실행됩니다 페이지 조작을위한 전에이 때문에 $ (문서)의 .ready () 트리거합니다. 이것은 매우 미묘한 버그가 있습니다. 일부 시스템에서는 잘 작동 것으로 나타날 수 있지만 다른 사람이 발생하는 불확실성을 반복하기 어려운, 불규칙의 원인이 될 수 있습니다.

   클래식의 jQuery 구문 :

   $(document).ready(function() {
   
   });
   

   이 문제를 해결 (나이 문제가 신뢰) 페이지 이벤트를 생성 jQuery를 모바일 개발자를합니다. 간단히 말해서 페이지에서 이벤트 페이지 실행의 특정 지점에서 트리거 이벤트입니다. 그 페이지 이벤트 중 하나는 pageinit 이벤트이며, 우리는 다음과 같이 사용할 수 있습니다 :

   $(document).on('pageinit', function() {
   
   });
   

   우리는 심지어 더 나아가 문서 선택기 대신 페이지 ID를 사용할 수 있습니다. 이제 우리는 ID 인덱스 jQuery를 모바일 페이지가 있다고 가정 해 봅시다 :

   <div data-role="page" id="index">
       <div data-theme="a" data-role="header">
           <h3>
               First Page
           </h3>
           <a href="#second" class="ui-btn-right">Next</a>
       </div>
   
       <div data-role="content">
           <a href="#" data-role="button" id="test-button">Test button</a>
       </div>
   
       <div data-theme="a" data-role="footer" data-position="fixed">
   
       </div>
   </div>
   

   인덱스 페이지 만 사용할 수 있습니다 우리는이 구문을 사용할 수있는 것입니다 코드를 실행하려면 :

   $('#index').on('pageinit', function() {
   
   });
   

   Pageinit 이벤트 때마다 페이지에 대한로드 처음으로 표시 할 수있다 실행됩니다. 페이지를 수동으로 새로 고쳐집니다 또는 아약스 페이지 로딩이 해제되지 않는 한 그것은 다시 트리거되지 않습니다. 혹시 코드가 당신이 pagebeforeshow 이벤트를 사용하는 것이 좋습니다 페이지를 방문 할 때마다 실행합니다.

   다음은 작업 예입니다 http://jsfiddle.net/Gajotres/Q3Usv/이 문제를 보여줍니다.

   이 질문에 몇 가지 더 노트. 아무리 당신이 1 HTML 여러 페이지를 사용하거나 여러 HTML 파일이 하나의 별도의 자바 스크립트 파일로 처리하는 사용자 정의 자바 스크립트 페이지의 모든를 분리하는 것이 좋습니다 패러다임합니다. 이것은 더 좋은 코드를 확인하십시오 것입니다하지만, jQuery를 모바일 응용 프로그램을 만드는 특히 동안 당신은 훨씬 더 코드 개요를해야합니다.

   이 또 다른 특별한 jQuery를 모바일 이벤트도 그리고 그것은 mobileinit이라고합니다. jQuery를 모바일가 시작되면 문서 객체에 mobileinit 이벤트를 트리거합니다. 그들 mobileinit에 기본 설정을 재정의, 바인드합니다. mobileinit 사용의 좋은 예 중 하나는 아약스 페이지 로딩 소등, 또는 기본 아약스 로더의 행동을 변화하고 있습니다.

   $(document).on("mobileinit", function(){
     //apply overrides here
   });
   

   우선 이벤트는 여기에서 찾을 수 있습니다 : http://api.jquerymobile.com/category/events/

   우리는 페이지 A와 페이지 B가 있다고 가정하자, 이것은 언로드 /로드 순서는 다음과 같습니다

   더 나은 페이지 이벤트의 경우이 읽기 이해 :

   페이지 로딩 jsFiddle 예 : http://jsfiddle.net/Gajotres/QGnft/

   어떤 이유에서 페이지 전환이이 코드와 함께 할 수있는 몇 가지 조건에 방지 할 필요를위한 경우 :

   $(document).on('pagebeforechange', function(e, data){
       var to = data.toPage,
           from = data.options.fromPage;
   
       if (typeof to  === 'string') {
           var u = $.mobile.path.parseUrl(to);
           to = u.hash || '#' + u.pathname.substring(1);
           if (from) from = '#' + from.attr('id');
   
           if (from === '#index' && to === '#second') {
               alert('Can not transition from #index to #second!');
               e.preventDefault();
               e.stopPropagation();
   
               // remove active status on a button, if transition was triggered with a button
               $.mobile.activePage.find('.ui-btn-active').removeClass('ui-btn-active ui-focus ui-btn');;
           }
       }
   });
   

   이 모든 페이지 전환의 구걸에 트리거 및 페이지 전환이 발생하기 전에 가장 중요한 것은이 페이지의 변화를 방지 할 수 있기 때문에이 예제는 어떤 경우에 작동합니다.

   여기에 동작하는 예제입니다 :

   jQuery를 모바일 고전적인 웹 애플리케이션과는 다른 방식으로 작동합니다. 당신이 당신의 이벤트 당신이 그것을 반복 이벤트를 바인딩 일부 페이지를 방문 할 때마다 바인딩 관리 방법에 따라. 이것은 jQuery를 모바일의 페이지를 처리하는 단지 방법입니다, 오류가 아닙니다. 예를 들어, 다음 코드를 살펴 :

   $(document).on('pagebeforeshow','#index' ,function(e,data){
       $(document).on('click', '#test-button',function(e) {
           alert('Button click');
       });
   });
   

   작업 jsFiddle 예 : http://jsfiddle.net/Gajotres/CCfL4/

   때마다 페이지 #INDEX 클릭 이벤트가 버튼을 # 테스트 버튼을 준수 할 것입니다 것입니다 방문하십시오. 페이지로 페이지 1에서 2 다시 여러 번 이동하여 테스트합니다. 이 문제를 방지하기위한 몇 가지 방법이 있습니다 :

   가장 좋은 방법은 바인드 이벤트에 pageinit을 사용하는 것입니다. 당신이 공식 문서에서 살펴 경우에 당신은 너무 이벤트가 다시 결합 될 방법은 없다, pageinit 그냥 문서 준비처럼 한 번만 트리거 것을 발견 할 것이다. 이것은 당신이 방법 떨어져와 이벤트를 제거 할 때와 같은 처리 오버 헤드를 가지고 있지 않기 때문에 가장 좋은 솔루션입니다.

   작업 jsFiddle 예 : http://jsfiddle.net/Gajotres/AAFH8/

   이 작업 솔루션은 이전의 문제가 예를의 기준으로한다.

   당신이 그것을 결합하기 전에 이벤트를 제거합니다 :

   $(document).on('pagebeforeshow', '#index', function(){
       $(document).off('click', '#test-button').on('click', '#test-button',function(e) {
           alert('Button click');
       });
   });
   

   작업 jsFiddle 예 : http://jsfiddle.net/Gajotres/K8YmG/

   이 같은 jQuery를 필터 선택기를 사용합니다 :

   $('#carousel div:Event(!click)').each(function(){
       //If click is not bind to #carousel div do something
   });
   

   이벤트 필터가 공식 jQuery를 프레임 워크의 일부가 아니기 때문에 그것은 여기에서 찾을 수 있습니다 : http://www.codenothing.com/archives/2009/event-filter/

   속도가 주요 관심사 인 경우 간단히 말해서, 다음 솔루션이 훨씬 더 나은 해결 방법 1보다.

   새로운 하나, 그들 모두의 가장 쉬운 아마.

   $(document).on('pagebeforeshow', '#index', function(){
       $(document).on('click', '#test-button',function(e) {
           if(e.handled !== true) // This will prevent event triggering more than once
           {
               alert('Clicked');
               e.handled = true;
           }
       });
   });
   

   작업 jsFiddle 예 : http://jsfiddle.net/Gajotres/Yerv9/

   이 솔루션에 대한 sholsinger에 TNX : http://sholsinger.com/archive/2011/08/prevent-jquery-live-handlers-from-firing-multiple-times/

   pageChange 이벤트 단점 - 두 번 트리거

   때때로 pagechange 이벤트를 두 번 트리거 할 수 있으며 문제가 전에 언급과는 아무 상관이 없습니다.

   toPage가 jQuery를 향상 DOM 오브젝트 없을 때 pagebeforechange 이벤트가 두 번 발생하는 이유는 changePage의 재귀 호출 때문이다. 개발자가 이벤트 내에서 toPage을 변경할 수대로이 재귀는 위험하다. 현상 일관 pagebeforechange 이벤트 핸들러 내의 문자열 toPage을 설정하는 경우에 관계없이 개체인지 여부를 무한 순환 루프가 발생할 것이다. pageload 이벤트는 데이터 객체의 페이지 속성으로 새 페이지 (이 문서에 추가해야합니다, 그것은 현재 목록에없는)를 전달합니다. pageload 이벤트 따라서로드 페이지에 액세스하는 데 사용할 수 있습니다.

   당신이 pageChange을 통해 추가 매개 변수를 전송하기 때문에 몇 즉이 일어나고있다.

   예:

   <a data-role="button" data-icon="arrow-r" data-iconpos="right" href="#care-plan-view?id=9e273f31-2672-47fd-9baa-6c35f093a800&amp;name=Sat"><h3>Sat</h3></a>
   

   해결하려면이 문제는 페이지 이벤트 전이 순서로 나열된 페이지 이벤트를 사용합니다.

   언급 한 바와 같이, 때 당신은 이미이 DOM에 존재하는, 또는 수동으로 $ .mobile.changePage를 호출하여, 여러 이벤트 및 후속 행동이 발생하는 또 다른 jQuery를 모바일 페이지로의 링크를 클릭을 통해 일반적으로 중, 하나의 jQuery를 모바일 페이지에서 다른 페이지로 변경합니다. 높은 수준에서 다음과 같은 작업이 수행

   이것은 평균 페이지 전환 벤치 마크입니다 :

   페이지로드 및 처리 : 3 MS

   페이지 향상 : 45 밀리

   전환 : 604 밀리 초

   총 시간 : 670 밀리 초

   *이 값은 밀리 초 단위입니다.

   당신이 볼 수 있도록 전환 이벤트는 실행 시간의 거의 90 %를 먹고있다.

   이 페이지 전환하는 동안 한 페이지에서 다른 페이지로 매개 변수 / S를 보낼 수 있습니다. 그것은 몇 가지 방법으로 수행 할 수 있습니다.

   참조 : https://stackoverflow.com/a/13932240/1848600

   해결 방법 1 :

   당신은 changePage로 값을 전달할 수 있습니다 :

   $.mobile.changePage('page2.html', { dataUrl : "page2.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : true, changeHash : true });
   

   그리고 다음과 같이 읽을 :

   $(document).on('pagebeforeshow', "#index", function (event, data) {
       var parameters = $(this).data("url").split("?")[1];;
       parameter = parameters.replace("parameter=","");
       alert(parameter);
   });
   

   index.html을

   <메타 캐릭터 = "UTF-8"/> <메타 이름 = "뷰포트"내용 = "= widdiv 장치 widdiv 초기 스케일 = 1.0, 최대 스케일 = 1.0, 사용자 확장 = 없음"/>하지 <메타 이름 = "사과 모바일 웹 응용 프로그램 가능한"내용 = "예"/> <메타 이름 = "블랙"내용을 "사과 모바일 웹 앱 상태가-스타일의 바"= />