2012-11-04 4 views
4

jQuery Mobile에 대한 몇 가지 테스트를하고 있으며 애플리케이션 및 다양한 페이지를 설정하는 방법을 알아 내려고합니다. 이상적으로, 나는 프레임 워크가 전환과 함께 페이지를로드하지만 각 페이지를 명확하게 분리 된 상태로 유지하고 싶습니다. 특히,이 아약스를 통해로드 페이지가 없습니다 "분명히"자바 스크립트 또는 이전 페이지의 CSS 않는 것 같습니다 :jQuery Mobile에서 페이지를 올바르게 분리하는 방법은 무엇입니까?

예 1 - 자바 스크립트 예를 들어

,이 같은 뭔가가있는 경우 page1.html : 나는 page2.html를로드하는 경우

<script> 
    setInterval(function() { 
     console.info('Interval' + (new Date())); 
    }, 1000); 
</script> 

그런 다음, 간격은 여전히 ​​실행되고 있습니다. page1으로 돌아 가면 새로운 간격이 시작되어 이제 page1으로 돌아갈 때마다 두 개의 간격이 실행되고 3과 4 등이 실행됩니다.

예 2-

또 다른 문제 CSS는 스타일링이다. 두 페이지에서 독립적으로 작업하는 두 명의 개발자가 my-element 요소를 생성한다고 가정 해 보겠습니다. page1에서,이 요소는 스타일입니다 :

<style> 
    #my-element { 
     color: red; 
    } 
</style> 

<span id="my-element">This one is red</span> 

page2에, 요소가 스타일되지 않습니다

<span id="my-element">This one has no style</span> 

다시 말하지만, 나는 page1.html 먼저 다음 page2.html에 가면, my-element도, 빨간색되는 끝 그것은 page2.html에서 스타일 아니었지만.

  1. 가 현재는로드 페이지에 jQuery를 모바일 접근 방식이 전혀 확장 성이 보인다 :

    그래서 나는이 질문이있는 것 같아요. 한 페이지에서 작성된 CSS, JS는 다음 페이지로 이어집니다. 그래서 jQuery Mobile 페이지를 "깔끔하게"만들 수있는 방법이 있습니다. JS 또는 CSS 비트가 다음 페이지에 영향을 미치지 않도록 이전 페이지의 모든 항목을 완전히 삭제 하시겠습니까?

  2. 그렇지 않은 경우 jQuery Mobile에서 확장 가능한 방식으로 여러 페이지로 작업하는 올바른 방법은 무엇입니까?

답변

3

설명하는 동작은 JQM을 작동시키는 것입니다. 'data-ajax = false'또는 'rel = external'을 사용하여 일반 페이지로드 (아약스 없음)를 사용하여 페이지를로드 할 때까지 DOM이 지속됩니다 (로드하는 첫 번째 페이지의 js 및 css 포함).

ajax를 통해 페이지를로드하면 DOM에 두 개 이상의 페이지가 있습니다. 즉, 앵커 페이지와 같이 시작한 페이지와 ajax를 통해로드하는 다른 페이지 (다음 페이지에서 한 번 삭제됨)입니다. 로드 됨).

이 접근 방식을 사용하면 페이지간에 공유 할 수있는 전환 및 기타 기능을 사용할 수 있습니다.

여전히 js/css로 특정 페이지를 쉽게 타겟팅 할 수 있습니다. 나는 항상 JQM 이벤트 (pagebeforeshow, pageshow ...) 중 하나에 바인딩하여 페이지 특정 것들을 처리하는 내 응용 프로그램에서 controller.js 파일을 runnimg 해요. 페이지 특정 CSS의 경우와 마찬가지로 페이지 ID 속성을 사용하여 CSS 페이지를 고유하게 만듭니다.

관련 문제