私は Appcloud で Android アプリを作成中です。私の問題は、「ページ」が設定されているため、新しいページ(HTMLファイル)に移動するのは単なる画像リンク(HTML)であることです。これを行うためのより良い方法があることを知っています. 誰かに尋ねたところ、Jquery Mobile を使用してページ間を遷移するとのことでした。1. AppCloud で Jquery Mobile をセットアップするにはどうすればよいですか。2. Jquery Mobile でページとトランジションを行う最良の方法は何ですか。ありがとう!
1 に答える
この返信では、App Cloud、jQuery Mobile、JavaScript/jQueryについて少し知っていると仮定します。答えはそのままでは少し長くなりますが、その知識の一部を想定しないと、はるかに長くなります。
質問1:AppCloudを使用してjQueryMobileをセットアップするにはどうすればよいですか。
これは非常に簡単です。両方のテクノロジーの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:JqueryMobileでページとトランジションを実行するための最良の方法は何ですか。
この質問には2つの方法で答えます。1つ目はjQueryMobile(jQM)を使用していない場合、2つ目は使用している場合です。トランジションを実行する方法を探しているので、ページトランジションがApp Cloudに組み込まれているため、jQMを使用する必要はありません。
標準のAppCloudでは、各HTMLページをAppCloudビューとして作成します。大まかに言えば、ビューはアプリケーションのナビゲート可能な部分であり、HTMLページに対応します。ビューには、複数の論理ページを含めることができます。たとえば、ビューには、タップして選択するアイテムのリストを表示するページと、タップしたアイテムの詳細を表示する別のページを含めることができます。ページ間を移行する場合、App Cloud APIのforwardPage()メソッドには移行が組み込まれており、デフォルトはSLIDE_LEFTです。このシナリオのページは、次に示すように、App CloudのCSSを使用して、class属性を使用してページを定義します。
<section id="pageone" class="page">`
jQMでAppCloudを使用している場合は、jQMのナビゲーションツールを使用している可能性があります。私は引き続きjQMでAppCloudビューを使用しますが、jQMの論理ページは、AppCloudではなくjQueryのCSSを使用して定義されます。App Cloudと同様に、jQMは複数の論理ページを1つのHTMLファイルに配置します。これらの論理ページへの移動は、jQMのトランジションを含むjQueryの標準ツールを使用しても問題ありません。
問題はAppCloudビューに変更されています。通常、jQMでは、を使用してページに移動しますが、App Cloudでは、モーダルウィンドウが開き、アプリを終了します。これは、ほとんどの場合、望ましくありません。代わりに、アンカータグを使用しながら、次に示すようにhrefを削除します。
<a rel="external" data-role="button" class="mainNavTargetBC">
mainNavTargetBCクラスを追加しました。次に、JavaScriptで、次に示すように、リンクでタップイベントをリッスンできます。
$("body").on( "tap", ".mainNavTargetBC", topNavClickedBC);
次に、イベントハンドラーで、次に示すように、navigateToView()メソッドを使用して新しいAppCloudビューに移行できます。
bc.device.navigateToView("brightcove.html");
ですからあります。標準のAppCloudとjQMを使用したページ遷移。要約すると、App Cloudに組み込まれているページ遷移ですが、jQMを使用している場合は、それらの遷移を使用してください。