通常は複数のウィジェットを使用するモバイルアプリケーションを作成する必要があるため、Wijmo はその目的のための特別なウィジェットである [AppView] を提供します。

モバイル専用ウィジェットである wijappview は、左側がメニュー、右側がコンテンツペインで構成されるコンテナとして機能します。AppView ウィジェットにより、メニュー項目ごとにハイパーリンクを使用したリストビューマークアップを含むメニューを作成します。

各ハイパーリンクから、特殊な HTML ファイルが表示されます。これらの HTML ファイルは通常のマークアップではなく、コンテンツを含む複数のネストされた <div> タグで構成されます。

リンクされた HTML ファイルの基本構造は次のようになります。

<div data-role="appviewpage">
    <div data-role="header">
        <a href="index.html" data-icon="back">Back</a>
        <h2>Page Title</h2>
    </div>
    <div data-role="content">
        <div data-role="WIDGETNAME" data-options="{OPTIONNAME: true}">
            <!-- ウィジェットを通常使用するように設定するマークアップ。-->
        </div>
    </div>
< /div>

AppView ウィジェットとその使用方法についての詳細は、AppViewを参照してください。

データオプション

非モバイルアプリケーションで通常どおりウィジェットを使用する場合、ウィジェットの初期化時にスクリプトでオプションを設定できます。たとえば、次のようなスクリプトを使用して LinearGauge の値オプションを設定できます。

$("#myWidget").wijlineargauge({value: 10});

しかし、モバイルアプリケーションでは、ウィジェットをスクリプトで初期化しないので、オプションの設定に使用できる data-options 属性を提供します。上記の例で実行した LinearGauge の同じ値オプションをモバイルアプリケーションで設定する場合、次のようなマークアップを使用できます。

<div data-role="wijlineargauge" data-options="{value: 10}">

中カッコ内のコード {value: 10} がどちらの場合も同じであることに注意してください。これは JSON オブジェクトであり、モバイルと非モバイルアプリケーションで変更されないので、一度確認しただけで一方から他方にコピーできます。

上記の例の data-options="{value: 10}"のように、JSON オブジェクトを二重引用符で囲む場合は、JSON オブジェクト内に含まれる文字列値は単一引用符で囲む必要があります。たとえば、非モバイルアプリケーションから次のような文字列値をコピーする場合、

$("#myWidget").wijlineargauge({orientation: "vertical"});

モバイルアプリケーションに貼り付けた後で、次のように二重引用符を単一引用符に変更する必要があります。

<div data-role="wijlineargauge" data-options="{orientation: 'vertical'}">

または、二重引用符ではなく単一引用符で JSON オブジェクトを囲む場合は、ネストされた引用符が外側の引用符と同じにならないように、その文字列値に二重引用符を使用してください。

関連トピック

モバイルウィジェット

jQuery Mobile

Copyright © GrapeCity inc. All rights reserved.