マークアップ

wijappview は、次に示すように、ハイパーリンクの順序付けられていないリストで定義されたメニュー領域とリンク付けされたページのコンテンツによって置き換えられるデフォルトコンテンツを含むコンテンツ領域で構成されます。

サンプルマークアップ	コードのコピー
<div data-role="page" data-theme="b"> <div data-role="wijappview"> <div data-role="appviewpage" data-title="Explore"> <div data-role="header" data-position="fixed"> <h2>Explore</h2> </div> <div data-role="content"> Explore widgets! </div> </div> <div data-role="menu" class="ui-body-a"> <ul data-role="listview" data-theme="a"> <li><a href="barchart/index.html">Bar Chart</a></li> <li><a href="radialgauge/index.html">Radial Gauge</a></li> <li><a href="calendar/index.html">Calendar</a></li> <li><a href="carousel/index.html">Carousel</a></li> <li><a href="lightbox/index.html">LightBox</a></li> <li><a href="editor/index.html">Editor</a></li> </ul> </div> </div> </div>

サンプルマークアップ

コードのコピー

<div data-role="page" data-theme="b">
    <div data-role="wijappview">
        <div data-role="appviewpage" data-title="Explore">
            <div data-role="header" data-position="fixed">
                <h2>Explore</h2>
            </div>
            <div data-role="content">
                Explore widgets!
            </div>
        </div>
        <div data-role="menu" class="ui-body-a">
            <ul data-role="listview" data-theme="a">
                <li><a href="barchart/index.html">Bar Chart</a></li>
                <li><a href="radialgauge/index.html">Radial Gauge</a></li>
                <li><a href="calendar/index.html">Calendar</a></li>
                <li><a href="carousel/index.html">Carousel</a></li>
                <li><a href="lightbox/index.html">LightBox</a></li>
                <li><a href="editor/index.html">Editor</a></li>
            </ul>
        </div>
    </div>
</div>

注意：非モバイルアプリケーションのウィジェットとは異なり、data-role 属性を使用して AppView を定義します。また、この属性を使用して、モバイルアプリケーションで使用するアダプティブウィジェットも定義します。data-role 属性を使用してウィジェットを定義する場合、スクリプトを使用してウィジェットを初期化する必要はありません。

リンク付けされた appviewpage HTML ページには、<html>、<head>、または <body> タグは必要はありません。<div data-role=appviewpage> タグのみが必要になります。（AppView ウィジェットを含むメインページには、引き続き通常の HTML タグが必要になります。）

wijappview がページを取得する際に、data-role=appviewpage を検索します。この属性が見つからない場合、data-role=content と data-role=header を検索して、<div data-role=appviewpage> タグをアセンブルします。たとえば、コンテンツとヘッダーは含まれているが、appviewpage が含まれていない <body> タグがある場合があります。

data-title 属性は、ウィンドウと移動履歴のタイトルを指定します。appviewpage 内にヘッダーは存在しないが、data-title が指定されている場合、Wijmo は data-title からタイトルを自動的に生成します。

メニューによって参照される各 appviewpage には、簡単に移動できるように〈戻る〉ボタンが自動的に生成されます。

関連トピック

参照