HTML5とCSS3プログラミングのための基本jQuery Mobileページの作成方法 - ダミー

ビデオ: HTML5オールスターズ勉強会 - htmlday 2015 - 2024

AJAXを使用してモバイルフレンドリーなウェブサイトを構築するというHTML5とCSS3のプログラマーの間では非常に一般的なアプローチがあります。 jQuery Mobile と呼ばれています。 Jquery Mobileは、ライブラリの上に構築されたJavaScriptとCSSコードの強力な組み合わせです。

jQueryライブラリは、通常のHTML5ページを使用して、ネイティブのルックアンドフィールをエミュレートする方法でそれを修正することによって動作します。コードは普通のHTMLのように見えます：

<！モバイル・デモ

JQuery Mobileのデモ

jQuery MobileのWebサイト

これは普通のリストです

モバイル・リスト
〜 >ダミーのためのオールインワン

いくつかの詳細は、このページをモバイルの不思議に変えます： <！ - 2 - >

jQueryモバイルCSSを含めます。

これは、HTML要素をモバイルの対応要素に変換するために設計された特別なCSSファイルです。自分でダウンロードすることはできますが、ほとんどの開発者はjQueryサイトに直接リンクしています。

標準のjQueryライブラリを含めます。

コードの多くはjQueryに基づいているため、jQueryライブラリも統合します。もう一度、メインのjQuery WebサイトからjQueryを取得する必要があります。
<！ - 3 - >

jQueryモバイルライブラリを組み込みます。
これはライブラリを拡張して新しいモバイル固有の動作を追加するJavaScriptライブラリです。
main-divにdata-role = "page"属性を追加します。

あなたのページにメインdivを作成し、属性を与えます。これは、jQueryモバイルによって追加されたカスタムのデータロール属性です。 jQueryは、さまざまな要素のデータの役割を調べ、スタイルや動作の変更をこれらの要素に自動的に適用します。メインのdivにデータロールページを割り当てます。これは、ページ全体としてdivを扱うようにブラウザに指示します。
データテーマを指定します。

任意の要素にデータテーマを適用できますが、ほとんどの場合、テーマはページに適用されます。 jquery mobileには、 "a"から "e"という多数のデフォルトテーマが組み込まれています。あなたが好きなものを見つけるために試してみるか、ThemeRollerの特別なモバイル版であなた自身のものを作ることができます。
ページ内にdivを追加します。

ページdivの中にさらにいくつかのdivを追加します。一般的に、ヘッダー、コンテンツ、フッターの3つがあります。
ヘッダdivをdata-role = "header"で指定します。
データロールを持つdiv内にヘッダー情報を置くことによって、jQueryはこの要素をモバイルヘッダーとして扱い、適切なスタイルを適用するように指示します。ヘッダーには通常

タグが含まれます。
通常は、固定するヘッダーをdata-position = "fixed"属性で指定します。これにより、コンテンツの残りの部分がスクロールされる場合、ヘッダーが適切に維持されます。これは、モバイルアプリケーションの典型的な動作です。

コンテンツ部門を設定します。
data-role = "content"を含むdivを追加して、ページのメインコンテンツ領域を設定します。サイトの主な要素のいずれかがこのセグメントに入る必要があります。

任意のリンクをボタンに変換できます。
Webアプリケーションの標準的な取り決めは、マウスベースの入力よりも大きなターゲットを持つボタンにリンクを切り替えることです。 anchorタグにdata-role = "button"属性を追加すると、ボタンへのリンクを簡単に変換できます。

リストをモバイルリストビューに変換します。
リストには、モバイル業界でも特別な慣習があります。 data-role属性を使用すると、任意のリストをlistViewにすることができます。

フッターを作成します。
データロールを "footer"に設定してdivをもう1つ追加します。通常、ヘッダーのようなフッターはdata-position属性で固定されます。