2012-10-24 3 views
2

jQuery 모바일 앱의 뒤로 버튼에 문제가 있습니다. 논쟁은 많이 논의되었지만 여전히 올바른 대답을 찾아야합니다.jquery 모바일 순환 내비게이션 뒤로 버튼

나는 2 개 HTML 파일이 : 이제 list.html을 호출

그들 각각은 하나의 데이터 역할 = "페이지"를 포함 description.html 수 있습니다.

이제 목록에서 내가 설명에서

$.mobile.changePage('description.html')

사용 설명에가는 '나는 목록을 채우는 데 사용하는 여러 연결되는 링크를 제공하고 있습니다. 따라서 내가 사용하는 링크를 클릭 할 때

$.mobile.changePage('list.html')

그런 다음 목록에서 다시 설명을 볼 수 있습니다.

이제 문제는 1 회 목록을 열고 경우 설명 모든 것이 완벽한 것입니다. 뒤로 버튼이 제대로 작동합니다. 하지만 다른 목록을 열면 본문 안의 div에 추가하지 않고 이전 목록을 바꿉니다. 그렇게하면 첫 번째 목록에서 다시 클릭하면 두 번째 호출 결과가 표시됩니다.

나는

window.location = 'list.html'

으로 해봤지만 더 많은 문제를 제공합니다. 그리고 그것은 더 느립니다.

나는 내 문제는 충분히 명확하게 설명했다 바랍니다. 나는이 소리가 혼란 스러울 지 모른다.

누군가가 도움을 줄 수 있기를 바랍니다. 감사합니다. .

편집 : 나는 (자신의 헤더 내용과 바닥 글) 페이지를 식별하는 클래스를 사용하여 시도했지만이 문제가 해결되지 않았 음을 언급하는 것을 잊었다

.

답변

0

당신은 같은 것을 사용하여 문제를 해결합니다 :

<script> 
     $('#pageDescription').click(function(){ 
      $('yourdiv').html(content); 
      $.mobile.changePage('#pageList','slide'); 
     }); 
     $('#pageList').click(function(){ 
      $('yourdiv').html(content); 
      $.mobile.changePage('#pageDescription','slide'); 
     }); 
    </script> 
    <body> 
     <div data-role="page" id="pageDescription"> 
      //Your html from description.html 
     </div> 
     <div data-role="page" id="pageList"> 
      //Your html from list.html 
     </div> 
    </body> 

이 더 많은 정보를 참조하십시오 http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html

참고 : 당신은 당신의 뒤로 버튼을 준비하는 것을 잊지 마세요 것입니다!

NEW CODE :

<script> 
    var oldHtml; 
    $('div li a').click(function(){ 
     oldHtml = $('yourdiv').html(); 
     $('yourdiv').html(content); 
     $.mobile.changePage('#pageDescription','slide'); 
    }); 
    $('a[data-icon=back]').click(function(){ 
     $('yourdiv').html(oldHtml); 
    }); 
</script> 
<body> 
    <div data-role="page" id="pageDescription"> 
     //Your html from description.html 
    </div> 
    <div data-role="page" id="pageList"> 
     <div data-role="header"> 
      <a data-role="button" data-icon="back" data-iconpos="notext"></a> 
     </div> 
     //Your html from list.html like this 
     <ul> 
      <li><a>link1</a></li> 
      <li><a>link2</a></li> 
     </ul> 
    </div> 
</body> 
+0

미안하지만 그 역사 문제가 해결되지 않은 : 나는 새로운 기술을 만들 때 예전보다 우선합니다. – Ciack404

+0

새로운 설명을 어디에 만들 계획입니까? 클릭 한 링크에 따라 다릅니다. $ ('yourdiv')를 사용합니다. append ('newhtml') ;? –

+0

아니요 이전 div를 지워야합니다. $ ('# mydiv') .html (content); – Ciack404