jquery mobile 및 phonegap을 사용하는 앱용 페이지 전환

html/css/javascript에 앱을 만들고 phonegap을 사용하여 빌드하고 있습니다.jquery mobile 및 phonegap을 사용하는 앱용 페이지 전환

그래서 처음에는 간단한 페이지 탐색을해야했습니다. 나는이 tryed :

지수 :

<!DOCTYPE HTML> 
<html> 

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <script src="jquery-1.8.2.js"></script> 
    <script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script> 
</head> 

<body id="body"> 
    <div id="container" data-role="page"> 
     <a rel="external" data-role="button" href="test.html" data-transition="slide">click me</a> 
    </div> 

</body> 

</html>

인 test.html :

<!DOCTYPE HTML> 
<html> 

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <script src="jquery-1.8.2.js"></script> 
    <script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script> 
</head> 

<body id="body"> 
    <div id="container" data-role="page"> 
     New page! 
    </div> 

</body> 

</html>

결과 : 나는 버튼 인 test.html 페이지가로드 매우 느린 데이터 전이 클릭 할 때 = "슬라이드"는 무시되는 것 같습니다. https://www.ibm.com/developerworks/mydeveloperworks/blogs/94e7fded-7162-445e-8ceb-97a2140866a9/entry/dynamic_page_loading_for_phonegap1?lang=en

정말하지 않습니다

나는 동적 페이지 로딩에 대한 기사를 발견했다. HTML 파일이 로컬에 저장되지 않습니까? 그렇다면 왜 XMLHtppRequest를 사용합니까?

내 질문은 : 좋은 페이지 전환 효과를 얻으려면 어떻게해야합니까?

출처

2012-10-15 Klaasvaak

<a> 링크에서 rel="external"을 삭제해야합니다.

속성 rel="external"은 Ajax 탐색을 비활성화하고 전환 효과를 건너 뛰고 페이지 test.html을 새로 고칩니다.

코드를 제거한 후 사용해보십시오.

index.html

<!DOCTYPE HTML> 
<html> 

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <script src="jquery-1.8.2.js"></script> 
    <script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script> 
</head> 

<body id="body"> 
    <div id="container" data-role="page"> 

     <!-- REMOVE THE ATTRIBUTE REL="EXTERNAL" FROM THE LINK --> 
     <a data-role="button" href="test.html" data-transition="slide">click me</a> 
    </div> 

</body> 

</html>

test.html :

<!DOCTYPE HTML> 
<html> 

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <script src="jquery-1.8.2.js"></script> 
    <script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script> 
</head> 

<body id="body"> 
    <div id="container" data-role="page"> 
     New page! 
    </div> 

</body> 

</html>

날 결과에 대해 알려주십시오.

출처

2012-10-15 09:42:26 Littm

다음과 같이 표시됩니다. XMLHttpRequest가 file : /// /test.html을로드 할 수 없습니다. Origin null은 Access-Control-Allow-Origin이 허용하지 않습니다. – Klaasvaak

set data-ajax = "false"작동하지 않습니다 – AppMobiGurmeet

오류가 발생했습니다. 하지만 여전히 전이가 없습니다. – Klaasvaak

Piotr Walczyszyn의 this 해결책을 시도하십시오. Jquery 모바일과 Phonegap을 함께 사용하는 모든 사용자에게 좋습니다.

출처

2013-03-12 11:56:14

jquery mobile 및 phonegap을 사용하는 앱용 페이지 전환

답변

관련 문제