jQueryモバイル移動web(6)_jquery

モバイル デバイス用の jquery モバイル イベント タイプ。

1.タッチイベント。

タップは、完全なクリック操作と同様に、画面をすばやくタッチして終了します。
タップホールド 画面をタッチして一定時間押し続けます。
1 秒以内に画面のピクセルが水平方向に 30px 移動すると、スワイプがトリガーされます。
swipeleft 左にスライド
右にスライドするようなスワイプライト。

2.方向転換イベント

モバイル デバイスの向きが変わると、orientationchange イベント関数がトリガーされます。イベントのコールバック関数の 2 番目のパラメーターは、現在の向きを識別するために使用されるパラメーターを返します。 このパラメータには、ポートレート (垂直) とランドスカルプ (水平) の 2 つの戻り値があります。

3. スクロールイベント、

scrollstart このイベントは、スクロールが開始されるときにトリガーされます。

このイベントは、スクロールが終了するとトリガーされます。

4. 表示/非表示

Pagebeforeshow イベントは、アニメーション効果を通じてビューが画面に表示され始める前にトリガーされます。

Pagebeforehide は、アニメーション効果によってビューが非表示になり始める前にイベントをトリガーします。
Pageshow イベントは、アニメーション効果を通じてビューが画面に表示されるときにトリガーされます。
Pagehide は、アニメーション効果によってビューが非表示になったときにトリガーされます。

サンプルコード:

　　$("div").live("pageshow",function(event,ui){ 
　　　　　　　　alert("this page just hidden"+ui.prevPage)
　　　　　　})

5. マウスイベントをシミュレートします

vmouseover はタッチ イベントとマウスオーバー イベントを均一に処理します。

vmousedown は、タッチ イベントとマウス プレス イベントを均一に処理します。
vmousemove は、タッチ イベントとマウス移動イベントを均一に処理します。
vmouseup は、タッチ イベントとマウス ボタンのリリース イベントを均一に処理します。
vclick は、タッチ イベントとマウス クリック イベントを均一に処理します。
vmousecancel は、タッチ イベントとマウス離脱イベントを均一に処理します。

ページビュー補助

1.$.mobile.changePage

関数型プログラミングを通じて 2 つのビュー間の切り替え効果を変更します。通常、切り替え効果は、ハイパーリンクをクリックするとき、またはフォームを送信するときにカスタマイズされます。

文法:

　$.mobile.changePage(to,options);
　　　　　　to 是必选参数， 可以传递的参数类型包括字符串，对象。
 　　　　　　options 可选，传递的是一个JSON 数据格式对象，
 　　　　　　用法： 以下实例将改变decondPage.html 的页面效果
 　　　　　　$.mobile.changePage("secondPage.html",{ 
　　　　　　　　transition:"slidedown"
　　　　　　}) 

フォーム送信操作

　$.mobile.changePage("submit.php",{ 
　　　　　　type:"post";
　　　　　　data:$("form#add").seriaize();
　　　　})

2.$.mobile.loaPage

主な機能は、外部ページをロードし、現在のページの DOM 要素に挿入することです。

$.mobile.loadPage(url,options);
URL は必須パラメータであり、絶対または相対 URL アドレスを渡します
オプションはオプションのパラメーターであり、JSON データ オブジェクトを渡します。

例:

$.mobile.loadPage("secomdPage.html");
　　　　　提交表单并加载结果页面：
 　　　　$.mobile.loadPage("result.php",{ 
　　　　　　type:"get",
　　　　　　data:$("form#search").serizlize();
　　　　})

データストレージ:

1.jqmData() メソッド;

要素には任意のデータをバインドできます。

$.mobile.jqmData(要素,キー,値)
element パラメーターは、データをバインドする必要がある要素を指定します。 キーはデータにバインドする必要がある属性名です、
値によってバインドされたデータ。

2.jqmRemoveData() メソッド:

このメソッドは、要素

にバインドされているデータを削除します。 $.mobile.jqmRemoveData([名前])
Name は、どのデータ属性を削除する必要があるかを指定するオプションのパラメーターです。パラメーターが渡されない場合は、要素上のすべてのデータを削除する必要があります。

3.jqmHasData() メソッド

要素にバインドされたデータがあるかどうかを判断します。

$.mobile.jqmHasData(element);
要素パラメータは、データチェック用の DOM 要素です。

アドレス パス ヘルパー:

1. URL アドレスを解析します

$.mobile.path.parseUrl 関数は、URL 仕様を解析し、すべてのパラメーター値を含むオブジェクトを返すため、URL アドレスのパラメーター プロパティに簡単にアクセスできます。

parseUrl関数の構文

$.mobile.path.parseUrl(url);

url パラメータは相対または絶対 URL アドレスであり、渡されるパラメータは必須です。
parseUrl 関数は、豊富なプロパティを含むオブジェクトを返します。
属性: ハッシュ 説明: # 記号の後のすべての文字コンテンツは、location
のハッシュと同等です。 属性: host 説明: URL
のホスト名とポート番号 属性: hostname 説明: URL のみを含むホスト名を返します。
属性: href 説明: URL アドレス全体を返します。
属性: pathname 説明: ファイルまたはディレクトリの関連パスを返します
属性: port 説明: URL
のポート番号を返すリクエスト 属性: portocol 説明: http https
など、リクエスト URL アドレスのプロトコルを返します。 属性: search 説明: リターンアドレス
の「?」以降のリクエストパラメータ 属性: 権限 説明: ユーザー名、パスワード、ホスト名、およびポート番号で構成されるアドレス、
を返します。 属性: ディレクトリ 説明: 要求された URL アドレスのディレクトリ パス、
を返します。 属性: ドメイン 説明: プロトコルprotocolと権限で構成されるパスを返します
属性: filename 説明: 要求された URL ファイル名を返します
属性: hrefOfHash 説明: ハッシュ値を含まない URL パスを返します。
属性: hrefOfSearch 説明: リクエストパラメータとハッシュ値を含まない URL パスを返します。
属性: パスワード 説明: FTP プロトコルのパスワードなど、リクエスト URL 内のパスワードを返します。
属性: username 説明: FTP プロトコルのユーザー名など、リクエスト URL 内のユーザー名を返します。

読み込み中表示/非表示

読み込みダイアログボックスを表示する方法は

$.mobile.showPageLoadingMse();
読み込みダイアログを非表示にする方法は
です。 $.mobile.hidePageLoadingMse();

JQuery Mobile と HTML5 の 3 つの利点

1. すぐに始めて、迅速な反復をサポート: JQuery Mobile のドキュメントと O'Reilly が出版した JQuery Mobile の本を読んで、1 週間強で、動作するアプリの暫定バージョンを完成させました。これまで私には HTML5/JQuery Mobile 開発の経験がありませんでした。 Android や iOS と比較すると、JQuery Mobile と HTML5 を使用して UI とロジックを構築する方が、ネイティブ システムで構築するよりもはるかに高速になります。

注釈: ネイティブ システム: Android ネイティブ システムなど、Google によってリリースされた未修正のシステムであるオリジナルのオペレーティング システム。この記事でネイティブ アプリケーションとは、JQuery Mobile で開発されたプログラムに相当する、システムが提供する API を使用して直接開発されたプログラムを指します。

Apple の Builder インターフェイスは学習に時間がかかり、Android の複雑なレイアウト システムを学習するのにも時間がかかることがわかりました。さらに、リスト ビューをリモート データ ソースに接続し、ネイティブ コードを使用して優れたルック アンド フィールを実現することは非常に複雑です (Android では ListView、iOS では UITableView)。JavaScript と HTML/CSS の既存の知識を使用してこれを行うことができました。アダプターやデリゲートなどの新しい抽象的な概念を学習することなく、同じ関数をすばやく実装できます。JQuery コードを記述するだけです。

2. 面倒な App Store の承認プロセスと、デバッグとビルドによって引き起こされる苦痛を回避する: 携帯電話、特に iOS 携帯電話用のアプリケーションを開発する最も苦痛なプロセスは、Apple App Store から承認を取得することです。ネイティブ アプリを iOS ユーザーにリリースするには、かなり長いプロセスを待つ必要があります (数日、場合によっては数週間かかる場合もあります)。プログラムの最初のリリースだけでなく、その後のすべてのアップグレードも困難を伴います。これにより、QA およびリリースのプロセスが複雑になり、さらに時間がかかります。 JQuery Mobile アプリケーションは単なる Web アプリケーションであるため、すべての Web 環境の利点を継承しています。ユーザーがサイトを読み込むと、すぐに最新バージョンに「アップグレード」されます。バグはすぐに修正され、新しい機能が追加されます。 Android システムでも、アプリケーション市場の要件は Apple 環境よりもはるかに緩和されており、ユーザーが知らないうちに製品のアップグレードを完了することも良いことです。

さらなる利点は、ベータ版またはテスト版のリリースが容易になることです。ユーザーにブラウザで URL を開くように指示するだけです。 iOS のクレイジーな DRM や Android の必要な APK を考慮する必要はありません。

3. クロスプラットフォームおよびクロスデバイス開発のサポート: 大きな利点は、アプリが Android および IOS ですぐに動作し、さらに他のプラットフォームでも動作することです。独立した開発者にとって、さまざまなプラットフォームのコード ベースを維持するのは大変な仕事です。単一のモバイル プラットフォーム向けに高品質のモバイル アプリケーションを作成するにはフルタイムの仕事が必要で、プラットフォームごとに同様の作業を繰り返し行うには多くのリソースが必要です。アプリが Android デバイスと iOS デバイスの両方で動作する機能は、私にとって大きな利点です。

さらに一歩進めて、特にあらゆるサイズや形状のさまざまな Android フォークを実行しているデバイスでは、さまざまな画面解像度の課題を持つ携帯電話でアプリを適切に表示することが非常に重要です。要求の厳しい Android 開発者にとって、画面サイズに基づいて画面分割を設定する (完全な最小化から最大化へのズーム) と、開発に多くの時間がかかることがあります。ブラウザはどのデバイスでも同じようにレンダリングするため、これについて心配する必要はありません。