JQ 터치와 AJAX

Question

나는 약간의 vaugue 인 경우이 사과에 조금 새로운하지만 최선을 다하겠습니다.

JQtouch를 사용하여 사이트의 아이폰 친화적 인 버전을 만들려고합니다. 나는 이것이 일반적으로 DIV에 의해 분리 된 페이지들과 함께 하나의 HTML 파일에서 이루어질 것이라는 것을 이해합니다. 그러나, 나는 웹 사이트의 기존 페이지에서 내용을로드하고 싶습니다.

문제의 다음 부분은 내 iphone.html 페이지가 현재 웹 사이트와 같은 디렉토리에 있지 않기 때문에 JQtouch의 정상적인 동작이 작동하지 않는 것 같습니다.

<div id="home"> 
<div class="toolbar"> 

<h1>Title</h1></div> 

<ul class="rounded"> 

<li class="arrow"> <a href="#content">HOME</a></li> 

<li class="arrow"> <a href="#about">ABOUT US</a></li> 

<li class="arrow"> <a href="#gnwr">GNWR</a></li> 

<li class="arrow"> <a href="#gner">GNER</a></li> 

<li class="arrow"> <a href="#journal">NEWS</a></li> 

<li class="arrow"> <a href="#FAQS">FAQS</a></li>      

<li class="arrow"> <a href="#contact">CONTACT</a></li> 


</ul> 
</div> 

<div id="content"></div>    
<div id="about"></div> 
<div id="journal"></div> 
<div id="faqs"></div> 
<div id="contact"></div> 


</body> 
</html> 

나는 다음과 같습니다 :

<script> 
$(document).ready(function(){ 
$('#content').load('http://www.mysite.co.uk' + ' #content'); 
$('#about').load('http://www.mysite.co.uk/about' + ' #content'); 
        } 
</script> 

이 후 나는 내용을로드하고 페이지 애니메이션이 잘 작동 다음과 같이

지금까지 내가 페이지를 설정했습니다. 유일한 문제는 두 개의 링크가 내가로드 할 때 콘텐츠에 존재하고 클릭하면 분명히 작동하지 않는다는 것입니다.

링크를 클릭하면 href를 확인하고 www.mysite.co.uk/about으로 이동하면 #about을 가리 키도록 변경하고 거기를 탐색하도록 할 수 있습니까?

희망 사항이 있으면 더 많은 정보를 알려주세요.

감사합니다.

크리스.

Answer 1

하나의 질문에 대해 많은 질문을하고 있습니다 ... 몇 가지 질문을하게됩니다. 사람들이 쉽게 대답 할 수 있습니다. 어쨌든, 나는 그것을 줄 것이다.

우선, 모든 내용을 하나의 html로 가질 필요는 없습니다. AJAX를 통해 내용을로드 할 수 있습니다. this demo의 AJAX> "GET 예제"및 AJAX를 통해로드 된 page content을 참조하십시오.

내가 아는 한,로드하려는 페이지가 동일한 디렉토리 구조에있을 필요는 없습니다. AJAX를 통해로드하려는 페이지는 유효한 jQTouch 페이지를 포함해야합니다. 즉, 전체 페이지는 <div>으로 묶여 있습니다.

클릭하면 내가 링크의 HREF를 확인할 수있는 방법이 있나요하고 포인트 경우 # 정보에 포인트로 변경 www.mysite.co.uk/about 및 탐색에 강제로 그곳에?

정확하게 이해하면 www.mysite.co.uk/about에 대한 모든 링크를 #about으로 대체하고 싶습니다. 당신이 수행 할 수 있습니다

$('a[href="http://www.mysite.co.uk/about"]').attr('href', '#about'); 

그 때 각 페이지가로드 :이 jQuery를 함께 할 수있는 코멘트

$(document).ready(function(e){ 
    $('body>div').bind('pageAnimationEnd', function(event, info){ 
     $('a[href="http://www.mysite.co.uk/about"]').attr('href', '#about'); 
    }) 
});