jquery mobile 移動web(5)_jquery

順序付きリスト

 　　<div data-role="content">
　　　　<ol data-role="listview" data-theme="g">
　　　　　　<li><a href="#"> List 1</a></li>
　　　　　　<li><a href="#"> List 2</a></li>
　　　　　　<li><a href="#"> List 3</a></li>
　　　　</ol>
 　　</div>

読み取り専用リスト

 　　<div data-role="content">
　　　　<ul data-role="listview" data-inset="true">
　　　　　　<li><a href="#"> List 1</a></li>
　　　　　　<li><a href="#"> List 2</a></li>
　　　　　　<li><a href="#"> List 3</a></li>
　　　　</ul>
 　　</div>

分離可能なボタンリスト

 　　<div data-role="content">
　　　　<ul data-role="listview" data-theme="g" data-split-icon="gear" data-split-theme="d">
　　　　　　<li><a href="#"> List 1</a><a href="#"></a></li>
　　　　　　<li><a href="#"> List 2</a><a href="#"></a></li>
　　　　　　<li><a href="#"> List 3</a><a href="#"></a></li>
　　　　</ul>
 　　</div>

バブル数リストが含まれます

 　　<div data-role="content">
　　　　<ul data-role="listview" data-theme="g">
　　　　　　<li><a href="#"> List 1</a><span class="ui-li-count">33</span></li>
　　　　　　<li><a href="#"> List 2</a><span class="ui-li-count">222</span></li>
　　　　　　<li><a href="#"> List 3</a><span class="ui-li-count">111</span></li>
　　　　</ul>
 　　</div>

設定オプション。

jquery Mobile の実行が開始されると、ドキュメント オブジェクトで mobileinit イベントがトリガーされます。このイベントを通じて、デフォルトの対応する関数をオーバーライドできます。さまざまな属性パラメータを設定します。

使用方法:

　$(document).bind("mobileinit",function(){ 
　　　　　　　　//在这里添加用户自定义代码。
 　　　　})
 　　　　<script src="jquery.js"></script>
 　　　　<script src="自定义事件处理函数的js文件"></script>
 　　　　<script src="jquerymobile.js"></script>

開発者にオブジェクト $.mobile を提供します。このオブジェクトの目的は、さまざまなオプションとデフォルト構成を構成することです。

$(document).bind("mobileinit",function(){ 
　　　　　　$.mobile.foo = "foo";l
　　　　})

設定可能なオプション:

1.ns

タイプ: 文字列。デフォルトは空ではない文字列です。
使用法: $.mobile.ns="mynamespace"
説明: ネームスペースをカスタマイズし、ネームスペースを回避します。

2.autolinitializePage

タイプ: ブール型、デフォルトは true です。
使用法: $.mobile.autoInitializePage = false
説明: デフォルトでは、ページ DOM 要素の準備が整うと、

に設定されている場合、プログラムは $.mobile.initializePage 関数を自動的にロードします。

偽

ページは作成されず、非表示のままになります。

3.subPageUrlKey

タイプ: 文字列、デフォルト値は ui-page です。

使用法: $.mobile.subPageUrlkey = "ページ"

説明: URL アドレス内の jQuery Mobile ビューのキー パラメーター名を変更します。選択したパラメーターを subPageUrlKey = "page" に変更すると、URL アドレス

は
に変更されます

example.html?page=サブページ。

4.activePageClass

タイプ: 文字列、デフォルト値は ui-page-active

使用法: $.mobile.activePageClass = “ui-ns-page-active”。

説明: 主な機能は、アクティブ状態ページと遷移状態のビュー CSS スタイルをカスタマイズすることです。

5.activeBtnClass

タイプ: 文字列、デフォルト値は ui-btn-active です

使用法: $.mobile.activeBtnClass = "ui-ns-page-active"

説明: このオプションの主な機能は、アクティブな女の子のスタイルをカスタマイズすることです。

6.ajaxEnabled

タイプ: ブール値、デフォルト値は true

使用法: $.mobile.ajaxEnabled = false

説明: 接続をクリックするとき、またはフォームやボタンを送信するときに、Ajax を使用してページをロードするか、データを送信するかどうかを設定します。

7.hashListeningEnabled

タイプ: ブール値、デフォルト値は true です。

使用法: $.mobile.hashListeningEnabled = false

説明: location.hash の変更を自動的に監視して処理するかどうかを設定します。 false に設定すると、手動の方法を使用してハッシュの変更を処理するか、単に接続を使用することができます。

アドレスはリダイレクトされます。

8.defaultPageTransition

タイプ: 文字列、デフォルト値は slide

使用法: $.mobile.defaultPageTransition = “フェード”

説明: このオプション パラメーターは主にページ切り替えのデフォルトの効果を設定します。なしに設定すると、オプションのパラメーターのスライドアップ (左右にスライド)

が設定されます。

スライドアップ (下から上にスライド) スライドダウン (上から下) ポップ (中央から)

9.touchOverflowEnabled

タイプ: ブール値、デフォルト値は false

使用法: $.mobile.touchOverflowEnabled = true

説明: デバイスのネイティブスクロール機能を使用するかどうか。

10.defaultDialogTransition

タイプ: 文字列、デフォルト値はpop

使用法: $.mobile.defaultDialogTransition = "none"

説明: Ajax ダイアログ ボックスのポップアップ効果を設定します。なしに設定すると、過剰な効果はありません。

11.minScrollBack

タイプ: 文字列、デフォルト値は 150

使用法: $.mobile.minScrollBack = “200”

説明: スクロール位置記憶機能は、スクロールが設定された高さを超えた場合にのみトリガーされます。

12.loadingMessage

タイプ: 文字列 デフォルト値はloadingです

使用法: $.mobile.loadingMessage = "読み込み中"

説明: ページの読み込みステータスのテキストの内容を設定します。 false に設定すると、何も表示されません。

13.pageLoadErrorMessage

タイプ: 文字列、デフォルト値はページの読み込みエラーです

使用法: $.mobile.pageLoadErrorMessage = "ページの読み込みに失敗しました"

説明: Ajax ページリクエストが失敗したときに表示されるプロンプトのテキスト内容を設定します

14.グレードA

タイプ: ブール値、デフォルト値は $.support.mediaquery の値です

使用法: $.mobile.gradeA

説明: ブラウザがサポートされている条件をすべて満たす場合、True が返されます。

JQuery Mobile と HTML5 の 3 つの欠点

1. ネイティブ アプリよりも動作が遅い: 私の意見では、最大の欠点は、最新の Android および iOS ハードウェア (デュアルコア Tegra 2 Android スマートフォン、デュアルコア iPad2 タブレット) でも、JQuery Mobile アプリの速度が大幅に遅いことです。 🎜>

ネイティブ プログラム内。特に Android では、ブラウザは iOS よりも遅く、バグが多くなります (Google は Web に重点を置いている会社ですが)。古い Android デバイスではプログラムをテストしませんでした。おそらくまったく動作しないでしょう (Android G1 など)。今後 12 ～ 24 か月以内にハードウェアの速度は急速に向上し (たとえば、クアッドコア デバイスが 2011 年に間もなく発売される予定です)、パフォーマンスはすぐに問題にならなくなる可能性があると私は考えています。しかし今日では、それは本当に欠点です。 iOS のみに焦点を当てている場合は、ブラウザのパフォーマンスが期待できます。少なくともその点では信頼できます (Android や BlackBerry などとは異なります)

2. 奇妙な (クロスブラウザ、クロスプラットフォーム開発): JQuery Mobile はまだベータ版なので、多くのバグに遭遇しました。とはいえ、JQuery チームは依然として GitHub で提起された問題に積極的に対応しています。最大の問題の 1 つは、さまざまなモバイル プラットフォーム上のさまざまなブラウザの奇妙な動作だと思います。この問題は常に批判されてきました。このアプリは少し奇妙に見えるかもしれません。JQuery Mobile チームはウィジェットとテーマに関して素晴らしい仕事をしたと思いますが、ネイティブ アプリとはかなり異なって見えます。この問題がユーザーにどの程度の影響を与えるかは不明ですが、注意が必要です。

3. 制限された機能とネイティブ プログラム: 明らかに、ブラウザーで実行される JavaScript はデバイスの多くの機能に完全にはアクセスできません。代表的な例はカメラです。ただし、PhoneGap のようなツールは、多くの一般的な問題の解決に役立ちます。実際に、ネイティブ Facebook バインディングを使用して、PhoneGap 経由でアプリのいくつかのバージョンを iOS と Android にデプロイし始めましたが、その結果には感銘を受けています。 PhoneGap の使用体験については、今後のブログで書きたいと思います。