次の解決策のいずれかを使用します。
解決策 1:
この最初の解決策は、jQuery Mobile の CSS / JS ファイルをローカルに(= フォルダーにwww)含めることです。
1 -index.htmlフォルダ内にHTML ファイルを含めますwww。
2 -それぞれのリンクから 3 つの CSS、JS ファイルをダウンロードします。
3 - XCode での参照が正常に行われていることを確認しながら、CSS ファイルをwww/css/に、JS ファイルをにコピーします。www/js/
上記を実現するために、次のことができます。
www/css/フォルダーまたはwww/js/XCode で
右クリック
New File...-> iOS/ Other-> Empty-> Next.
次に、コピーするファイルを入力します (例: jquery.mobile.structure-1.2.0.min.css)。
jquery.mobile.structure-1.2.0.min.cssXCode で、上記で作成した新しいファイルに、ダウンロードしたファイルの内容 (例: ) をコピー & ペーストします。
ダウンロードしたすべての CSS / JS ファイル ( jquery.mobile.structure-1.2.0.min.css、jquery.mobile-1.2.0.min.css、jquery-1.8.1.min.js、およびjquery.mobile-1.2.0.min.js) に対して、手順 1 と 2 を繰り返します。
ファイルがコピーされると、次のディレクトリ構造が必要です。
- www
index.html- CSS
jquery.mobile.structure-1.2.0.min.cssjquery.mobile-1.2.0.min.css
- js
jquery-1.8.1.min.jshttp://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js
4 -ここで、jQuery Mobile の CSS / JS ファイルのパスを考慮して、それらの参照を HTML ファイルのヘッダーに追加できますindex.html。
の完全な例index.html:
<html>
<head>
<meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no'/>
<link rel="stylesheet" href="./css/jquery.mobile.structure-1.2.0.min.css" />
<link rel="stylesheet" href="./css/jquery.mobile-1.2.0.min.css" />
<script src="./js/jquery-1.8.1.min.js"></script>
<script src="./js/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Header</h1>
</div>
<div data-role="content" >
<p>Hello jQuery Mobile!</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
解決策 2:
この 2 番目のソリューションは、 http://code.jquery.comの外部サーバーから jQuery Mobile の CSS/JS ファイルを取得することです。
Phonegap の問題は、外部データの取得を許可するために特定のホワイトリストの例外を追加する必要があることです。
このホワイトリストの詳細については、オンライン ドキュメントを確認することをお勧めします(これは Phonegap / Cordova バージョン 2.1 用です。Phonegap / Cordova のバージョンに応じて適切なリンクを確認できます): http://docs.phonegap. com/en/2.1.0/guide_whitelist_index.md.html#Domain%20Whitelist%20Guide
XCode を使用している (そして iOS 向けに開発している) ためhttp://code.jquery.com、ホワイトリストの例外に追加するには、次の手順に従う必要があります。
Resources/Cordova.plistXCodeでファイルを開きます。
ラインを右クリックしてExternalHosts、 を選択しますAdd row。
String新しく作成された行の値を に設定しますcode.jquery.com。
変更したファイルを保存して閉じます。
これで、HTML のヘッダーに外部 CSS / JS ファイルの参照を含めることができますindex.html。
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
の完全な例index.html:
<html>
<head>
<meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no'/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Header</h1>
</div>
<div data-role="content" >
<p>Hello jQuery Mobile!</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>