モバイルアプリケーションの設計/ jQuery Mobileの開発者向けガイド
過去2〜3年の間に、モバイルWebサイトに対するブラウザとOSのサポートが飛躍的に向上しました。最も注目に値するのは、AppleのiOSとGoogleのAndroidプラットフォームです。しかし、PalmOSやBlackberryなどの他の企業はまだ混在しています。最近まで、単一のモバイルテーマをこれらすべてのプラットフォームに合わせることは非常に困難でした。.
JavaScriptが始まりましたが、これまで真に統一されたライブラリはありませんでした。 jQuery Mobileは、jQueryのすべての優れた機能を利用し、それらをモバイルベースのWebソースに移植します。このライブラリは、アニメーション、トランジション効果、および基本的なHTML要素の自動CSSスタイルを含むフレームワークのようなものです。このガイドでは、自分のjQueryモバイルアプリを快適に設計できるようにプラットフォームを紹介したいと思います。.
機能とOSサポート
私が他のどのフレームワークよりもjQuery Mobileを学ぶことを提案する理由は単純さです。コードはjQueryコア上に構築されており、開発者の活発なチームがスクリプトを書いてバグを編集しています。多くの機能のうち、HTML 5のサポート、Ajaxを利用したナビゲーションリンク、そしてタッチ/スワイプイベントハンドラ.
サポートは電話によって異なり、A-Cの3つのカテゴリの表に分けられます。 AはjQuery Mobileのフルサポートを誇る最上位層です。BはAjaxを除くすべての機能を備えていますが、Cは基本的なHTMLでほとんどJavaScriptがないHTMLです。幸いなことに、人気のあるオペレーティングシステムのほとんどは完全にサポートされています - 私は以下にいくつかの例のリストを追加しました.
- アップルiOS 3-5
- Android 2.1、2.2、2.3
- Windows Phone 7
- ブラックベリー6.0、ブラックベリー7
- Palm WebOS 1.4-2.0、3.0
もっと学びたいのなら、公式文書ページを読んでみてください。それはちんぷんかんぷんと書かれていないし、実際に従うことは非常に簡単に感じる。それでは、jQueryモバイルページを作成するための基本と、小さなアプリケーションを作成する方法に注目しましょう。!
標準HTMLテンプレート
あなたの最初のモバイルアプリを動かすためには、あなたが最初にすべきセットテンプレートがあります。これには、jQuery CDNから外部でホストされている、モバイルJSおよびCSSとともにjQueryベースコードが含まれます。下記の私の例のコードをチェックしてください.
基本的な携帯アプリ
ここで唯一の外部要素は2つのメタタグであるべきです。トップ ビューポート tagはモバイルブラウザをフルズーム効果を使うように更新します。値を設定する width =デバイス幅 ページ幅を電話スクリーンの幅に正確に設定します。そして何よりもjQuery Mobileは移動するレイアウトに適応できるため、ズーム機能を無効にしません。.
次のメタタグ X-UA互換 Internet Explorerに最新の反復でHTMLをレンダリングさせるだけです。古いブラウザ、特にモバイルは見慣れないレンダリングバグを回避しようとします.
ボディコンテンツの構築
これがjQuery mobileが巧妙になる可能性があるところです。各HTMLページは、必ずしもモバイルサイトの1ページにはなりません。フレームワークはHTML5のデータ属性を利用します。あなたはそれを追加することによって気軽に作成することができます。 データ- 予め。同じように data-role = "ページ" 1つのHTMLファイルで複数のdivに設定でき、複数のページを提供します。.
その後、アンカーリンクと一意のIDを使用してこれらのページ間を移動します。この設定は、基本的なシンプルなアプリに適しています。 3〜5ページしか必要としないのであれば、それをすべて1つのファイルに格納してはどうでしょうか。あなたが多くの書かれたコンテンツを持っていない限り、その場合は時間を節約するためにPHPインクルードを使ってみる.
紛失した場合は、以下のコード例を確認してください。.
トップタイトルバー
2ページ
いくつかの余分なコンテンツも.
つまり、できます 戻る いつでも.