Markup

A wijappview is made up of a menu area defined by an unordered list of hyperlinks, and a content area with default content that is replaced by the contents of the linked pages, like this:

Sample Markup	Copy Code
<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>

Sample Markup

Copy Code

<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>

Note: Unlike widgets in non-mobile applications, we use the data-role attribute to define the AppView. We also use this attribute to define adaptive widgets for use in mobile applications. When defining widgets with the data-role attribute, there is no need to initialize the widget with script.

The linked appviewpage HTML pages do not require <html>, <head>, or <body> tags. They require only <div data-role=appviewpage> tags. (The main page containing the AppView widget does still require the usual HTML tags.

When wijappview fetches a page, it searches for data-role=appviewpage. If it does not find it, it looks for data-role=content and data-role=header, and assembles a <div data-role=appviewpage> tag. For example, you may have <body> tags with content and a header, but without appviewpage.

The data-title attribute specifies the title for the window and navigation history. If there is no header in an appviewpage, but a data-title is specified, Wijmo generates the title automatically from the data-title.

On each appviewpage that is referenced by the menu, a Back button is automatically generated to ease navigation.

Reference

wijmo.appview jQuery Mobile Widget