jQuery mobileモバイルweb(6)
5509 ワード
jquery mobileは、モバイル端末装置に対するイベントタイプである.
1.touchイベント.
tapはスクリーンに素早く触れて離れ、完全なクリック操作に似ています.tapholdは画面に触れてしばらく維持します.swipeは、1秒以内に30 pxスクリーン画素を水平に移動するとトリガーされる.swipeleft左側にスライドswiperight像右側にスライドします.
2.方向変更イベント
orientationchangeイベント関数モバイルデバイスの方向が変化するとトリガーされ、イベントのコールバック関数内の2番目のパラメータは、portrait(縦)landscarp(横)の2つの戻り値を有する現在の方向を識別するためのパラメータを返す.
3.ロールイベント、
scrollstartがスクロールを開始すると、イベントがトリガーされます.scrollendスクロールが終了するとイベントがトリガーされます.
4.表示/非表示
pagebeforeshowビューがアニメーション効果で画面に表示される前にイベントをトリガーします.pagebeforehideは、ビューがアニメーション効果で非表示になる前にイベントをトリガーし、pageshowはビューがアニメーション効果で画面に表示された後にイベントをトリガーします.pagehideは、ビューがアニメーション効果で非表示になった後にトリガーされます.
サンプルコード:
5.マウスイベントのシミュレーション
vmouseoverはタッチとマウスのサスペンションイベントを統一的に処理します.vmousedownはタッチとマウス押下イベントを統一的に処理します.vmousemoveはタッチとマウスの移動イベントを統一的に処理します.vmouseupは、タッチとマウスボタンの離すイベントを統一的に処理します.vclickはタッチとマウスクリックイベントを統一的に処理する.vmousecancelは、タッチとマウスlの離れイベントを統一的に処理します.
ページビューヘルパー
1. $.mobile.changePage
2つのビュー間の切り替え効果は、関数プログラミングによって変更されます.通常、ハイパーリンクをクリックしたり、フォームをコミットしたりするときに、切り替え効果をカスタマイズします.
構文:
フォームの発行アクション
2.$.mobile.loaPage
主な役割は、外部ページをロードし、現在のページのDOM要素に挿入することです. $.mobile.loadPage(url,options); urlは必須パラメータであり、絶対または相対的なURLアドレスoptionsオプションパラメータを渡し、JSONデータオブジェクトを渡します.
例:
データストア:
1.jqmData()メソッド
要素に任意のデータをバインドできます.
$.mobile.jqmData(element,key,value)elementパラメータは、データをバインドする必要がある要素を指定します.keyは、バインドデータの属性名、valueバインドデータが必要です.
2.jqmRemoveData()メソッド:
この方法は、要素にバインドするdataデータ、$を除去する.mobile.jqmRemoveData([name])nameはオプションのパラメータで、どのdataプロパティを削除するかを指定します.パラメータを着用しない場合は、要素上のすべてのデータを削除する必要があります.
3.jqmHasData()メソッド
要素にバインドデータが存在するか否かを判断する、$.mobile.jqmHasData(element); Elementパラメータは、データチェックを行うDOM要素です.
アドレスパスヘルパー:
1.解析URLアドレス
$.mobile.path.parseUrl関数は、Url指定を解析し、すべてのパラメータ値を含むオブジェクトを返します.Urlアドレスのパラメータ属性に簡単にアクセスできます.
parseUrl関数の構文
$.mobile.path.parseUrl(url); urlパラメータは相対的または絶対的なURLアドレスであり、必ず入力するパラメータを選択します.parseUrl関数は、オブジェクトに豊富なプロパティが含まれているオブジェクトを返します.属性:hash説明:番号の後ろにあるすべての文字の内容は、locationのhash属性に相当します:host説明:URLのホスト名とポート番号属性:hostname説明:URLのみを含むホスト名を返します.プロパティ:href説明:URLアドレス全体を返します.属性:pathname説明:ファイルまたはディレクトリに戻る関連パス属性:port説明:Urlのポート番号を返す要求属性:portocol説明:http http http属性:search説明:アドレスに戻る「?」次の要求パラメータ属性:authority説明:ユーザー名、パスワード、ホスト名、ポート番号からなるアドレスを返します.属性:directiry説明:要求URLアドレスのディレクトリパスを返します.属性:domain説明:protocalプロトコルとauthorityからなるパス属性を返します:filename説明:要求されたUrlファイル名属性を返します:hrefOfHash説明:hash値を含まないURLパスを返します.属性:hrefOfSearch説明:要求パラメータとhash値を含まないURLパスを返します.プロパティ:passwordの説明:ftpプロトコルのパスワードなどの要求URLのパスワードを返します.プロパティ:usernameの説明:ftpプロトコルのユーザー名などの要求URLのユーザー名を返します.
loading表示/非表示
loadingダイアログを表示する方法は$.mobile.showPageLoadingMse(); loadingダイアログボックスを非表示にする方法は$.mobile.hidePageLoadingMse();
JQuery MobileとHTML 5の3つのメリット
1. スピーディーでスピーディーな反復をサポート:1週間余りの間に、JQuery MobileドキュメントとO'Reillyが出版したJQuery Mobile書籍を読むことで、私は仕事ができるappの初歩的なバージョンを完成しました.これまでHTML 5/JQuery Mobileの開発経験はありませんでした.AndroidやiOSに比べて、JQuery MobileやHTML 5を使用してUIやロジックを構築するのは、元のシステムで構築するよりもずっと速いです.
原生システム:Android原生システムなど、オリジナルのオペレーティングシステムはGoogleが修正されていないシステムを発表しています.本稿では,ネイティブアプリケーションとは,システムが提供するAPIで直接開発したプログラムを指し,JQuery Mobileが開発したプログラムに対応する.
AppleのBuilderインタフェースの学習曲線は非常に急峻で、同じように難解なAndroidレイアウトシステムを学ぶのにも時間がかかることに気づきました.また、オリジナルコードを使用してlist viewをリモートのデータソースに接続し、きれいな外観を持つのは複雑です(AndroidではListView、iOSではUItableView)JavaScriptやHTML/CSSの知識を身につけることで、新しいadapter、delegateなどの抽象概念を学ぶ必要がなく、同じ機能を迅速に実現することができます.JQueryコードを作成すれば可能です.
2.面倒なアプリケーションストアの審査過程とデバッグ、構築による苦痛を避ける:携帯電話のためにアプリケーションを開発し、特にiOSシステムの携帯電話のために、最も苦痛な過程はAppleアプリケーションストアの審査を通過することである.元のアプリケーションをiOSユーザーに公開するには、かなり長いプロセス(数日、数週間かかる可能性があります)を待つ必要があります.最初のプログラムのリリースで苦労するだけでなく、以降のアップグレードのたびにもそうです.これにより、QAとパブリケーションのプロセスが複雑になり、追加の時間がかかります.JQuery Mobileアプリケーションは単なるWebアプリケーションであるため、ユーザーがWebサイトをロードすると、すぐに最新のバージョンにアップグレードされるというすべてのWeb環境の利点を継承しています.バグをすぐに修復し、新しいプロパティを追加できます.Androidシステムであるアプリケーション市場での要求がApple環境よりはるかに緩やかであっても,ユーザが知らず知らずのうちに製品のアップグレードを完了することはよいことである.
さらに利点は、betaまたはテストバージョンのリリースが容易になることです.ブラウザであなたのサイトを開くようにユーザーに伝えればいい!iOSの狂ったDRMを考える必要はなく、Androidに必要なAPKを気にする必要もありません.
3.クロスプラットフォームとクロスプラットフォームの開発をサポートする:大きなメリットは、私のアプリケーションがすぐにAndroidとIOSで仕事をすることができ、同じように他のプラットフォームで仕事をすることができることです.独立した開発者として、異なるプラットフォームのために基礎コードを維持することは大きな仕事です.単一の携帯電話プラットフォームのために高品質の携帯電話アプリケーションを作成するにはフルタイムの仕事が必要であり、プラットフォームごとに類似のことを繰り返すには大量の資源が必要である.アプリケーションがAndroidとIOSデバイスで同時に動作できるのは私にとって大きな収穫です.
さらに、特にAndroidの様々なブランチを実行するデバイスでは、大きさや形が異なり、さまざまな画面解像度の携帯電話でアプリケーションを悪く見せたいというのが本当の挑戦です.厳格なAndroid開発者にとって、画面サイズに応じて画面分割(完全最小化から最大化まで)を設定するには、多くの開発時間がかかります.ブラウザは各デバイスに同じ方法で表示されるので、この点について心配する必要はありません.
1.touchイベント.
tapはスクリーンに素早く触れて離れ、完全なクリック操作に似ています.tapholdは画面に触れてしばらく維持します.swipeは、1秒以内に30 pxスクリーン画素を水平に移動するとトリガーされる.swipeleft左側にスライドswiperight像右側にスライドします.
2.方向変更イベント
orientationchangeイベント関数モバイルデバイスの方向が変化するとトリガーされ、イベントのコールバック関数内の2番目のパラメータは、portrait(縦)landscarp(横)の2つの戻り値を有する現在の方向を識別するためのパラメータを返す.
3.ロールイベント、
scrollstartがスクロールを開始すると、イベントがトリガーされます.scrollendスクロールが終了するとイベントがトリガーされます.
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は、タッチとマウスlの離れイベントを統一的に処理します.
ページビューヘルパー
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アドレスoptionsオプションパラメータを渡し、JSONデータオブジェクトを渡します.
例:
$.mobile.loadPage("secomdPage.html");
：
$.mobile.loadPage("result.php",{
type:"get",
data:$("form#search").serizlize();
})データストア:
1.jqmData()メソッド
要素に任意のデータをバインドできます.
$.mobile.jqmData(element,key,value)elementパラメータは、データをバインドする必要がある要素を指定します.keyは、バインドデータの属性名、valueバインドデータが必要です.
2.jqmRemoveData()メソッド:
この方法は、要素にバインドするdataデータ、$を除去する.mobile.jqmRemoveData([name])nameはオプションのパラメータで、どのdataプロパティを削除するかを指定します.パラメータを着用しない場合は、要素上のすべてのデータを削除する必要があります.
3.jqmHasData()メソッド
要素にバインドデータが存在するか否かを判断する、$.mobile.jqmHasData(element); Elementパラメータは、データチェックを行うDOM要素です.
アドレスパスヘルパー:
1.解析URLアドレス
$.mobile.path.parseUrl関数は、Url指定を解析し、すべてのパラメータ値を含むオブジェクトを返します.Urlアドレスのパラメータ属性に簡単にアクセスできます.
parseUrl関数の構文
$.mobile.path.parseUrl(url); urlパラメータは相対的または絶対的なURLアドレスであり、必ず入力するパラメータを選択します.parseUrl関数は、オブジェクトに豊富なプロパティが含まれているオブジェクトを返します.属性:hash説明:番号の後ろにあるすべての文字の内容は、locationのhash属性に相当します:host説明:URLのホスト名とポート番号属性:hostname説明:URLのみを含むホスト名を返します.プロパティ:href説明:URLアドレス全体を返します.属性:pathname説明:ファイルまたはディレクトリに戻る関連パス属性:port説明:Urlのポート番号を返す要求属性:portocol説明:http http http属性:search説明:アドレスに戻る「?」次の要求パラメータ属性:authority説明:ユーザー名、パスワード、ホスト名、ポート番号からなるアドレスを返します.属性:directiry説明:要求URLアドレスのディレクトリパスを返します.属性:domain説明:protocalプロトコルとauthorityからなるパス属性を返します:filename説明:要求されたUrlファイル名属性を返します:hrefOfHash説明:hash値を含まないURLパスを返します.属性:hrefOfSearch説明:要求パラメータとhash値を含まないURLパスを返します.プロパティ:passwordの説明:ftpプロトコルのパスワードなどの要求URLのパスワードを返します.プロパティ:usernameの説明:ftpプロトコルのユーザー名などの要求URLのユーザー名を返します.
loading表示/非表示
loadingダイアログを表示する方法は$.mobile.showPageLoadingMse(); loadingダイアログボックスを非表示にする方法は$.mobile.hidePageLoadingMse();
JQuery MobileとHTML 5の3つのメリット
1. スピーディーでスピーディーな反復をサポート:1週間余りの間に、JQuery MobileドキュメントとO'Reillyが出版したJQuery Mobile書籍を読むことで、私は仕事ができるappの初歩的なバージョンを完成しました.これまでHTML 5/JQuery Mobileの開発経験はありませんでした.AndroidやiOSに比べて、JQuery MobileやHTML 5を使用してUIやロジックを構築するのは、元のシステムで構築するよりもずっと速いです.
原生システム:Android原生システムなど、オリジナルのオペレーティングシステムはGoogleが修正されていないシステムを発表しています.本稿では,ネイティブアプリケーションとは,システムが提供するAPIで直接開発したプログラムを指し,JQuery Mobileが開発したプログラムに対応する.
AppleのBuilderインタフェースの学習曲線は非常に急峻で、同じように難解なAndroidレイアウトシステムを学ぶのにも時間がかかることに気づきました.また、オリジナルコードを使用してlist viewをリモートのデータソースに接続し、きれいな外観を持つのは複雑です(AndroidではListView、iOSではUItableView)JavaScriptやHTML/CSSの知識を身につけることで、新しいadapter、delegateなどの抽象概念を学ぶ必要がなく、同じ機能を迅速に実現することができます.JQueryコードを作成すれば可能です.
2.面倒なアプリケーションストアの審査過程とデバッグ、構築による苦痛を避ける:携帯電話のためにアプリケーションを開発し、特にiOSシステムの携帯電話のために、最も苦痛な過程はAppleアプリケーションストアの審査を通過することである.元のアプリケーションをiOSユーザーに公開するには、かなり長いプロセス(数日、数週間かかる可能性があります)を待つ必要があります.最初のプログラムのリリースで苦労するだけでなく、以降のアップグレードのたびにもそうです.これにより、QAとパブリケーションのプロセスが複雑になり、追加の時間がかかります.JQuery Mobileアプリケーションは単なるWebアプリケーションであるため、ユーザーがWebサイトをロードすると、すぐに最新のバージョンにアップグレードされるというすべてのWeb環境の利点を継承しています.バグをすぐに修復し、新しいプロパティを追加できます.Androidシステムであるアプリケーション市場での要求がApple環境よりはるかに緩やかであっても,ユーザが知らず知らずのうちに製品のアップグレードを完了することはよいことである.
さらに利点は、betaまたはテストバージョンのリリースが容易になることです.ブラウザであなたのサイトを開くようにユーザーに伝えればいい!iOSの狂ったDRMを考える必要はなく、Androidに必要なAPKを気にする必要もありません.
3.クロスプラットフォームとクロスプラットフォームの開発をサポートする:大きなメリットは、私のアプリケーションがすぐにAndroidとIOSで仕事をすることができ、同じように他のプラットフォームで仕事をすることができることです.独立した開発者として、異なるプラットフォームのために基礎コードを維持することは大きな仕事です.単一の携帯電話プラットフォームのために高品質の携帯電話アプリケーションを作成するにはフルタイムの仕事が必要であり、プラットフォームごとに類似のことを繰り返すには大量の資源が必要である.アプリケーションがAndroidとIOSデバイスで同時に動作できるのは私にとって大きな収穫です.
さらに、特にAndroidの様々なブランチを実行するデバイスでは、大きさや形が異なり、さまざまな画面解像度の携帯電話でアプリケーションを悪く見せたいというのが本当の挑戦です.厳格なAndroid開発者にとって、画面サイズに応じて画面分割(完全最小化から最大化まで)を設定するには、多くの開発時間がかかります.ブラウザは各デバイスに同じ方法で表示されるので、この点について心配する必要はありません.