jQuery Mobile 対応アダプティブウィジェット

アダプティブウィジェット

アダプティブウィジェットは、モバイル Web アプリケーションと非モバイル Web アプリケーションの両方で使用できる点が jQuery UI とは異なります。非モバイルアプリケーションでアダプティブウィジェットを使用するには、各ウィジェットの標準ヘルプを参照してください。ウィジェットページでは、アダプティブウィジェットにアスタリスク * が付いています。

モバイルアプリケーションで使用する場合は、以下の指示に従ってください。

jQuery UI 参照ではなく jQuery Mobile 参照を使用する
スクリプトでウィジェットを初期化しない（グラフなどの複雑なウィジェットが必要でない限り）
マークアップで '''data-role''' 属性を使用してウィジェットを作成する

以下の「クイックスタート」セクションで、これらの手順について説明します。

メモ:Android 上でモバイルアプリケーションを実行する場合は、SVG（Scalable Vector Graphics）を使用しているため、レンダリングするためにすべてのグラフウィジェットで Ice Cream Sandwich バージョン以降の Android が必要です。

クイックスタート

このクイックスタートでは、モバイルアプリケーション用の Web ページの作成、アダプティブウィジェットの追加、およびウィジェットの外観と動作のカスタマイズを行うことができます。

テキストエディタで新規の HTML ページを作成するには、下記コードを追加して文章を .html の拡張子で保存します。
ドロップダウンしてマークアップをコピーします
テキストエディタに張り付けます
コードのコピー

<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

テキストエディタに張り付けます	コードのコピー
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

依存ファイルへのリンクを HTML ページの <head> タグ内に追加します。最新の依存ファイルについては、「Mobile Wijmo CDN」にある CDN ファイルを参照してください。

ドロップダウンから参照コードをコピーして head タグ内に貼り付けます

次のマークアップを <body> タグ内に追加して、ウィジェットを作成します。最初の <div> 要素は jQuery モバイルページを作成し、２番目の要素は jQuery Mobile コンテンツ領域を作成します。３番目の要素は Wijmo Calendar ウィジェットを作成し、その data-role 属性がそれを初期化します。
ドロップダウンからマークアップをコピーして body タグ内に貼り付けます
マークアップ
コードのコピー

<div data-role="page"> <div data-role="content"> <div data-role="wijcalendar"></div> </div> </div>
<head> タグ内に、ウィジェットを初期化するためのスクリプトを追加する必要はありません。これは、マークアップで data-role 属性を使用して行われます。
HTML ファイルを保存し、それをブラウザで開きます。ウィジェットは次のように表示されます。

アダプティブウィジェット

クイックスタート

関連トピック

概念

モバイルウィジェット