2012-12-21 2 views
3

AppCloud로 안드로이드 앱을 만드는 중입니다. 내 이슈는, 내가 "페이지"를 설정했기 때문에 새로운 페이지 (HTML 파일)로 연결되는 그림 링크 (HTML) 일 뿐이라는 것을 잘 알고 있습니다. 나는 누군가에게 물었고 Jquery Mobile을 사용하여 페이지 간을 전환한다고 말했습니다. 1. AppCloud로 Jquery Mobile을 설정하려면 어떻게해야합니까? 2. Jquery Mobile을 사용하여 페이지 및 변환 작업을 수행하는 가장 좋은 방법은 무엇입니까? 감사!Jquery Mobile에서 Appcloud 사용하기

답변

0

이 답변에서는 App Cloud, jQuery Mobile에 대한 정보 및 JavaScript/jQuery에 대해 조금 알고 있다고 가정합니다. 대답은 조금 길어질 것입니다. 그러나 그 지식의 일부를 가정하지 않으면 훨씬 더 길어질 것입니다.

질문 1 : App Cloud로 jQuery Mobile을 설정하려면 어떻게해야합니까?

이것은 매우 간단합니다. 두 기술 모두에 대해 CSS와 스크립트를 포함해야합니다. 나는 이것을 헤더에 사용하고 성공했다.

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" /> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
<meta name="bc-manifest" content="manifest.json" /> 
<title>App Cloud</title> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
<script type="text/javascript" src="javascripts/lib/brightcove-app-cloud-1.12.min.js"></script> 
<script type="text/javascript" src="javascripts/views/appcloud.js"></script> 
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
</head> 
<body> 
… 

질문 2 : Jquery Mobile으로 페이지 및 전환을 수행하는 가장 좋은 방법은 무엇입니까?

두 가지 방법으로이 질문에 답변 할 예정입니다. 첫 번째는 jQuery Mobile (jQM)을 사용하지 않는 경우이고, 두 번째 방법은 jQuery Mobile입니다. 변환을 수행 할 방법을 찾고 있기 때문에 페이지 전환이 App Cloud에 내장되어 있으므로 jQM을 사용할 필요가 없습니다.

표준 App Cloud에서는 각 HTML 페이지를 App Cloud보기로 만들려고합니다. 대충 말하기보기는 응용 프로그램의 탐색 가능한 부분이며 HTML 페이지에 해당합니다. 보기에는 여러 논리적 페이지가 포함될 수 있습니다. 예를 들어,보기에는 탭으로 선택한 항목 목록을 표시 한 페이지가 포함될 수 있으며 탭 항목의 세부 정보를 표시하는 다른 페이지가 포함될 수 있습니다. 페이지간에 전환 할 때 App Cloud API의 forwardPage() 메소드에 전환이 내장되어 있으며 기본값은 SLIDE_LEFT입니다. 당신은 당신이 가장 가능성이 JQM의 탐색 도구를 사용하는 JQM으로 앱 클라우드를 사용하는 경우

<section id="pageone" class="page">` 

:이 시나리오의 페이지는 여기 쇼와 같이 클래스의 속성을 사용하여 페이지를 정의하는 앱 클라우드의 CSS를 사용합니다. 나는 여전히 jQM과 함께 App Cloud 뷰를 사용하지만, jQM의 논리적 페이지는 App Cloud 's가 아니라 jQuery의 CSS를 사용하여 정의된다. App Cloud와 마찬가지로 jQM은 하나의 HTML 파일에 여러 논리적 페이지를 배치하고 이러한 논리적 페이지로 이동하는 것은 jQM의 전환을 포함하여 jQuery의 표준 도구를 사용하여 문제가되지 않는다.

문제가 App Cloud보기로 변경됩니다. 일반적으로 jQM을 사용하면 페이지로 이동하지만 App Cloud에서는 모달 창이 열리 며 앱을 떠날 것입니다. 대부분의 경우 원하지 않을 것입니다. 여전히 앵커 태그를 사용하는 동안 다음과 같이 대신, href를 제거 :

<a rel="external" data-role="button" class="mainNavTargetBC"> 

내가 mainNavTargetBC 클래스를 추가 다음과 같이 다음 자바 스크립트에서 당신은 링크를 탭 이벤트를 수신 할 수 있습니다

다음과 같이
$("body").on("tap", ".mainNavTargetBC", topNavClickedBC); 

그런 다음 이벤트 처리기에서, 당신은 navigateToView() 메소드를 사용하여 새로운 앱 클라우드보기로 전환 할 수 있습니다

bc.device.navigateToView("brightcove.html"); 

를 그래서 거기입니다. 표준 App Cloud 및 jQM을 사용하여 페이지를 전환합니다. App Cloud에 내장 된 페이지 전환을 다시 요약하지만 jQM을 사용하는 경우 전환을 사용하십시오.

관련 문제