jQuery 모바일을 사용하여 페이지를 '탐색'하시겠습니까?

Question

3 페이지 모바일 최적화 된 웹 사이트 만들기. jQuery 모바일에서 제공 할 수있는 가로 슬라이드 탐색이 필요합니다. 1 페이지에서 2 페이지로 이동하면 2 페이지가 오른쪽에서부터 슬라이드됩니다.

그러나 1 페이지에서 3 페이지로 이동할 수도 있습니다. 그렇게하면 2 페이지와 동일한 방식으로 3 페이지를 밀어 넣기를 원하지 않습니다. 대신 2 페이지를 슬라이드하고 계속 움직여야하므로 3 페이지 대신 슬라이드가 필요합니다.

내 자바 스크립트 데모입니다. 1 페이지에서 '지도'를 클릭하면 페이지 (1)가 지난 2 페이지를 이동에 2 페이지를 클릭하면 '1'로 이동하고 http://smartpeopletalkfast.co.uk/pos/

필자는이 있지만 메신저를 수행하는 더 복잡한 데모를 만든 3.

페이지로 이동 십자가 장치 및 기타 예상치 못한 문제가 많아서 jQuery 모바일과 같은 프레임 워크를 사용하는 것이 좋을 수도 있습니다. 감사합니다

당신은 하이 잭 링크 클릭을 할 수 있고 당신이 원하는 애니메이션과 올바른 의사 페이지로 사용자를 보낼

Answer 1

는 :

$(function() { 

    //create an associative array of objects to pas to the `changePage()` function for a specific transition 
    var convert = { 

      //from page1 
      page1 : { 

       //to page2 
       page2 : { transition : 'slide'}, 

       //to page3 
       page3 : { transition : 'slide'} 
      }, 

      //from page2 
      page2 : { 

       //to page1 
       page1 : { transition : 'slide', direction : 'reverse' }, 

       //to page3 
       page3 : { transition : 'slide'} 
      }, 

      //from page3 
      page3 : { 

       //to page1 
       page1 : { transition : 'slide', direction : 'reverse' }, 

       //to page2 
       page2 : { transition : 'slide', direction : 'reverse' } 
      } 
     }; 
    $('.my-links').bind('click', function() { 

     //change to the specified page 
     $.mobile.changePage($(this).attr('href'), convert[$.mobile.activePage[0].id][$(this).attr('href').replace('#', '')]); 
     return false; 
    }); 
}); 

이것은 .my-links 클래스와 모든 요소에 바인딩합니다. 또한 page/page2/page3은 세 페이지의 ID입니다.