Jquery mobileのポイント積
1583 ワード
1、Jquery Mobileのpageページ解析
第一に、ページに必要な部分:jquery mobileのサイトはhtml 5のdoctypeで始まる必要があります
第二に、viewportラベルの追加
ページの拡大レベルとページサイズを定義します.最終ページの表示幅は、対応するデバイスブラウザの幅です.
第三に、関連するファイルを順番に導入する
順序を逆さまにしてはいけない
第四、標準ページテンプレート
1ページに複数の「page」を含めることができます
2、プリフェッチページ(prefetching pages)
あるpageをロードした後、このページの他の接続ページもdomノードツリーにプリロードしたい場合は、次のように対応する接続に属性data-prefetchを追加できます.
ページにdata-prefetchプロパティを任意に追加して、他のインタフェースをプリロードできます.プリロードされたインタフェースは、デフォルトの最初の「page」のみが初期化され、その他は初期化されていません.
htmlリンクに属性を追加する方法に加えて、jsでページのプリロードを行うこともできます.コードは以下の通りです.
プリロード方式により、プリロードされたインタフェースをすばやく閲覧することができるが、これにより帯域幅の送信と占有が別途要求されるため、ページのロードは推奨されない.次のインタフェースが表示されない限り、プリロードは意味があります.たとえば、連続した画像をブラウズする場合.
第一に、ページに必要な部分:jquery mobileのサイトはhtml 5のdoctypeで始まる必要があります
<!DOCTYPE html>第二に、viewportラベルの追加
<meta name="viewport" content="width=device-width, initial-scale=1">ページの拡大レベルとページサイズを定義します.最終ページの表示幅は、対応するデバイスブラウザの幅です.
第三に、関連するファイルを順番に導入する
jquery.mobile-1.0.1.min.css
http://code.jquery.com/jquery-1.6.4.min.js
http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js順序を逆さまにしてはいけない
第四、標準ページテンプレート
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>1ページに複数の「page」を含めることができます
2、プリフェッチページ(prefetching pages)
あるpageをロードした後、このページの他の接続ページもdomノードツリーにプリロードしたい場合は、次のように対応する接続に属性data-prefetchを追加できます.
<a href="prefetchThisPage.html" data-prefetch> ... </a>ページにdata-prefetchプロパティを任意に追加して、他のインタフェースをプリロードできます.プリロードされたインタフェースは、デフォルトの最初の「page」のみが初期化され、その他は初期化されていません.
htmlリンクに属性を追加する方法に加えて、jsでページのプリロードを行うこともできます.コードは以下の通りです.
$.mobile.loadPage( pageUrl, { showLoadMsg: false } );プリロード方式により、プリロードされたインタフェースをすばやく閲覧することができるが、これにより帯域幅の送信と占有が別途要求されるため、ページのロードは推奨されない.次のインタフェースが表示されない限り、プリロードは意味があります.たとえば、連続した画像をブラウズする場合.