jQuery MobileFrameworkの簡単な紹介

世界がウェブを発見したとき、物事は刺激的で活気がありませんでした。たとえば、単純な画像のマウスオーバーアプリケーションを構築するには、数行のコードが必要であり、一部のプラットフォームでは機能しませんでした。

しかし、jQueryが導入されたとき、開発者はさまざまな場所で快適に実行できる素晴らしいJavaScriptアプリケーションを作成できるようになったため、状況は改善されました。

その後、jQueryチームはjQuery UIを開発することで物事を一段と高めました。これにより、開発者は既存のjQueryコア上に見栄えの良いWebアプリケーションを作成できるようになりました。

さらに良いことに、2010年にjQuery Mobileが導入され、開発がはるかに効率的になりました。

携帯電話への偏見を持って構築されたjQueryMobileは、UIコンポーネント、データ遷移、およびその他のエキサイティングな機能を提供する効果的な統合フレームワークです。

jQuery Mobileは、HTML5、CSS3、jQuery、およびjQuery UIの機能を単一のフレームワークに活用して、開発者がさまざまなプラットフォームやデバイス間で一貫性を実現できるようにします。

jQueryMobileの基本機能

1.優れたシンプルさと使いやすさ

jQuery Mobileフレームワークは、複雑ではなく、柔軟性があります。フレームワークの構成インターフェイスはマークアップ駆動型であるため、開発者はJavaScriptコードを最小限に抑えるか、まったく使用せずに、完全な基本的なアプリケーションインターフェイスをHTMLで簡単に構築できます。

Ajax呼び出しやDOM操作など、数行のJavaScriptコードを必要とする複雑なタスクは、モバイルjQueryの数行のコードで簡単に実現できます。

たとえば、DOMでページが作成された後、拡張が完了する前に、ユーザーがテキストをクリックして非表示にする場合は、pagecreateイベントハンドラーを使用するだけです。これは、jQueryMobileなしで実行するには数行のコードが必要になるものです。

$(document).on("pagecreate","#mypagetest",function(){ $("span").on("click",function(){ $(this).hide(); }); });

上記のコードでは、#mypagetestパラメーターはページイベントを指定するページのIDを参照します。また、on()メソッドは、イベントハンドラーをアタッチするために使用されます。

さらに、そのシンプルさにより、開発者はアプリケーションを複数のページに分割できます。このフレームワークを使用すると、開発者は「書く量を減らし、より多くのことを行う」ことができます。

2.プログレッシブエンハンスメントと優雅な劣化

プログレッシブエンハンスメントとグレースフルデグラデーションは、jQueryMobileの俊敏性を推進する重要な機能です。ハイエンドデバイスと機能の低いデバイス(JavaScriptサポートがないデバイスなど)の両方をサポートできるようにします。

このフレームワークにより、開発者は、Internet Explorer 6であれ、最新のAndroidやiPhoneであれ、最も多くのブラウザーやデバイスからアクセスできるアプリケーションを構築できます。

モバイルjQueryを使用すると、開発者は基本的なデバイスで基本的なコンテンツ(ビルドされたまま)をレンダリングすることもできます。また、より洗練されたプラットフォームとブラウザーは、外部からリンクされた追加のJavaScriptとCSSを使用してますます充実するでしょう。

3.ユーザーフレンドリーな入力のサポート

jQuery mobileの開発中に、開発者は、タッチ、マウス、およびカーソルフォーカスベースのユーザー入力機能をサポートするための単純なAPIを含めることができます。簡単にスタイル設定でき、タッチしやすいフォーム要素のいくつかのタイプもフレームワークに含まれています。

例には、チェックボックスとラジオセット、スライダー、検索フィルタリング、メニュー選択要素が含まれます。また、すべてのフォーム要素には、モバイルWebページに簡単に組み込むことができる代替の「ミニ」バージョンが含まれています。

たとえば、jQueryMobileを使用してチェックボックスボタンを作成する方法は次のとおりです。ボタンのミニバージョンを作成するために、data-mini = "true"属性が追加されていることに注意してください。

  Click here to agree 

これらすべてに加えて、モバイルデバイスでユーザーエクスペリエンスを最適化するために、フレームワークには、アニメーション化されたページ遷移をシームレスに実行できる豊富なAjax駆動型ナビゲーションシステムがあります。

jQuery Mobile遷移イベントを使用すると、現在アクティブなページから新しいページへの遷移をアニメーション化できます。

たとえば、あなたが使用することができますpagebeforeshow(ページ「を」ONトリガー)イベントとpagebeforehideの次のページへ移行する際(ページ「から」でトリガ)イベントを。両方のイベントは、遷移アニメーションが始まる前にトリガーされます。

それらをどのように適用できるか見てみましょう。

$(document).on("pagebeforeshow","#myfirstpage",function(){ // When entering myfirstpage alert("myfirstpage is about to appear"); }); $(document).on("pagebeforehide","#myfirstpage",function(){ // When leaving myfirstpage alert("myfirstpage is about to disappear"); });

4.アクセシビリティ

クロスプラットフォーム機能に加えて、jQuery for mobileアクセシビリティを重視して作成されました。

The framework comes with support for Accessible Rich Internet Applications (WAI-ARIA) to assist disabled persons using screen readers and other assistive technologies easily access web pages.

5. Lightweight size

Mobile jQuery's lightweight size (about 40KB when minified) adds to its swiftness. Additionally, the fact that it employs minimal image dependencies also vastly accelerates its capabilities.

6. Theming and UI widgets

jQuery Mobile has an in-built theme system that enables developers to determine their own application styling. With the jQuery Mobile Themeroller, developers can effectively customize their applications to fit their color, tastes, and preferences.

The framework also comes with various innovative, cross-platform widgets that enable developers to create applications that are better customized.

Some of the available widgets are persistent toolbars, buttons, dialogs, and the commonly used popup widget.

7. Responsiveness

The framework's full responsiveness enables the same underlying codebases to fit comfortably in different types of screens, from mobile devices to desktop-sized screens.

Basic Page Structure of jQuery Mobile

jQuery Mobile's structure has all the UI components and attributes required for creating user-friendly and feature-rich mobile web applications and websites of all kinds—whether basic or advanced.

You can use jQuery mobile to build web pages, various types of list views, toolbars, a wide range of form elements and buttons, dialogs, as well as other functionalities.

Importantly, since jQuery Mobile is created on top of jQuery core, it lets developers leverage jQuery UI code and access key facilities. These include robust animation and image effects for web pages, DOM manipulation, event handling, and Ajax for server communication.

Let's get a feel for how jQuery mobile development code looks.

For example, in this time of the COVID-19 pandemic when most people are working from home or from co-working spaces, let's create a simple web page that demonstrates some team management mistakes that people make.

Here is the code:

   jQuery Mobile Example 

fCC jQuery Mobile Sample

COVID-19 Work-From-Home Team Management Mistakes To Avoid

    • Using Unnecessary Tools
    • Foregoing Team Evaluations
    • Micromanaging
    • Hiring Too Quickly
    • Not Having Contingencies

    alfrickopidi.com, 2020 - Copyright

    Here is the output when the above mobile jQuery lines of code are opened on a browser:

    Notably, when the browser is decreased or increased, the size of the items in the list also adjusts appropriately. Therefore, the web page can be easily accessed in various devices with different screen resolutions without worrying about lack of consistency. The size of the items will change accordingly to suit the type of device.

    As you can see in the above code sample, the document is a simple HTML5 that includes the following three things:

    • Files from the jQuery Mobile CSS (jquery.mobile-1.4.5.min.css)
    • Files from the jQuery repository (jquery-1.11.1.min.js)
    • Files from the jQuery Mobile repository (jquery.mobile-1.4.5.min.js)

    These files are directly linked to the jQuery CDN. Another alternative is to head over to the download page to get these files and host them on a private server.

    Importantly, including the "viewport" metatag during jQuery mobile developmentinstructs devices that the page width and the device screen width are equivalent (width=device-width).

    The tag also instructs the browser to zoom in to 100 per cent (scale=1). If the scale is changed to 2, for instance, the browser will zoom the web page by 50 per cent.

    A closer examination of the code reveals some strange "data-"attributes scattered throughout it. This is an improved feature of HTML5 that enables developers to pass organized data across an application – for example, the data-role="header" attribute defines the head section of the web page.

    The above example just scratches the surface of the things developers can achieve using jQuery Mobile. The framework's documentation is easy to follow and describes its many features, including linking pages, incorporating animated page transitions, and designing buttons.

    Conclusion

    jQuery for mobile is a resource-rich framework built with jQuery, HTML5, and CSS capabilities to handle certain cross-platform, cross-device and cross-browser compatibility issues effectively.

    The framework offers great opportunities for creating mobile and web applications that are powerful, fully responsive, and future-ready.

    Will you give it a try?