93

私はモバイルWeb開発に不慣れで、jQueryを頻繁に使用してPhoneGapでモバイルアプリを作成しました。

しかし、当然のことながら、私が物事をフォーマットする方法と、テストしているモバイルデバイスの画面に実際に表示される方法に関連するいくつかの不具合がありました。これらを解決しようとして、私は多くの提案に出くわしました。 jQuerymobile。

今、これは私を混乱させます-jQueryにはフォーマットの役割がありませんでした。それが問題の原因となったモバイルCSSに関する私の初心者レベルの知識でした。

では、jQuery mobileは正確に何をするのでしょうか。また、通常のjQueryとどのように違うのでしょうか。私がすでにjQueryを知っている場合、私にとって何が新しくなるのでしょうか？

4

4 に答える 4

95

jQueryは、ブラウザー間でのスクリプト作成を単純化および標準化するために純粋に設計されています。要素の作成、DOM の操作、属性の管理、HTTP リクエストの実行など、低レベルの処理に焦点を当てています。

jQueryUIは、jQuery の上に構築されたユーザー インターフェイス コンポーネントと機能のセットです (つまり、動作するには jQuery が必要です): ボタン、ダイアログ ボックス、スライダー、タブ、より高度なアニメーション、ドラッグ アンド ドロップ機能。

jQuery と jQueryUI はどちらも、サイト (デスクトップまたはモバイル) に「追加」できるように設計されています。特定の機能を追加したい場合は、jQuery または jQueryUI が役立つ場合があります。

ただし、jQuery Mobileは完全なフレームワークです。これは、モバイル サイトの出発点となることを目的としています。jQuery を必要とし、jQuery と jQueryUI の両方の機能を利用して、モバイル フレンドリーなサイトを構築するための UI コンポーネントと API 機能の両方を提供します。好きなだけ使用することはできますが、jQuery Mobileを使用すると、モバイル フレンドリーな方法でビューポート全体を制御できます。

もう 1 つの大きな違いは、jQuery と jQueryUI が HTML と CSS の上にあるレイヤーになることを目指していることです。マークアップをそのままにして、jQuery で拡張できるはずです。ただし、jQuery Mobile には、HTML のみを使用してコンポーネントを表示する場所を定義する方法が用意されています。たとえば (jQuery Mobile サイトから):

<ul data-role="listview" data-inset="true" data-filter="true">
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Ferrari</a></li>
</ul>

このdata-role属性は jQuery Mobile に、このリストをモバイル フレンドリーな UI コンポーネントに変換するように指示し、data-insetおよびdata-filter属性はそのプロパティを設定します。JavaScript を 1 行も記述しません。一方、jQueryUI コンポーネントは通常、JavaScript を数行記述して、DOM でコンポーネントをインスタンス化することによって作成されます。

于 2012-05-01T00:15:21.667 に答える
28

jQuery モバイルとは

JQM(jQuery mobile) は、jQuery の上に構築された携帯電話用のユーザー インターフェイス システムです。JQM が機能するには jQuery が必要です。他の同様の携帯電話フレームワークとは異なり、JQM は、モバイル Webkit ブラウザーだけでなく、すべての主要なモバイル、タブレット、電子書籍リーダー、およびデスクトップ プラットフォームのサポートを対象としています。このフレームワークの最も注目すべき機能の 1 つは、アニメーション化されたページ遷移を使用する Ajax ナビゲーション システムです (非常に優れています)。

あなたにとって新しいこと

新規ユーザーに変化球を投げる JQM の 1 つの点は、ajax ナビゲーションです。jquery から来て、おそらくすべてのページに JavaScript を含め、dom ready($(function(){ ... }または$(document).ready(function(){ .... }) を使用してすべての楽しい JavaScript アクティビティを開始することに慣れているでしょう。しかし、JQM は ajax ナビゲーションを使用するため、システムは他のページを最初のページと同じ dom にプルし、<head>. 次のページが ajax 経由で読み込まれると、内部の内容$(function(){ ...}が 2 番目のページで機能しないことがわかります。これに対する解決策は、pageinit イベントにバインドすることです。これらの次の例は、旅の始まりに役立ちます。

$(document).on('pageinit', function(){ // this fires for each new page

});

特定のページをターゲットにするには、ページの ID を追加します。

$(document).on('pageinit','#page2', function(){ // this fires for #page2 only 

});

新しいページ イベントを理解すると、JQM を使い始めるときに大いに役立ちます。http://jquerymobile.com/demos/1.1.0/docs/api/events.html頑張ってください!

于 2012-05-01T00:16:15.833 に答える
6

jQueryは、DOM操作/トラバースおよびAJAXJavaScriptフレームワークです。異なるブラウザ間の多くの複雑さを自動的に抽象化します。多くのタスクを簡素化するjQueryプラグインは無数にあります。

jQuery Mobileは、jQuery上に構築されたモバイルアプリケーション向けのUIフレームワークです。テーマとUIコンポーネントがあります。

全体として、それらは無料です。jQueryを使用するためにjQueryMobileを使用する必要はありません。ただし、jQuery Mobileを使用するには、jQueryを使用する必要があります。

于 2012-04-30T23:32:41.690 に答える
2

上記のコメントに十分なポイントがないため、スレッドに追加して、依存関係に関する Andy の 2 番目の質問に回答します。

あなたが探しているものはここにあると思います: jQuery Mobile Demo

<!DOCTYPE html> 
<html>
<head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-    [version].min.css" />
    <script src="http://code.jquery.com/jquery-[version].min.js"></script>
    <script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>
</head>

<body>
    ...content goes here...
</body>
</html>
于 2014-08-16T13:21:59.573 に答える