Heading is a widget that represents a navigation bar, which usually appears at the top of an application. It usually displays the title of the current view and can contain a navigational control.
If you use it with dojox.mobile.ScrollableView, it can also be used as a fixed header bar or a fixed footer bar. In such cases, specify the fixed=”top” attribute to be a fixed header bar or the fixed=”bottom” attribute to be a fixed footer bar.
Heading can have one or more ToolBarButton widgets as its children.
Example 1
<h1 data-dojo-type="dojox.mobile.Heading" back="Settings" moveTo="settings">General</h1>
Example 2
<h1 data-dojo-type="dojox.mobile.Heading" label="World Clock">
<div data-dojo-type="dojox.mobile.ToolBarButton" style="padding: 0px 14px">Edit</div>
<div data-dojo-type="dojox.mobile.ToolBarButton" class="mblDomButtonWhitePlus" style="float:right;"></div>
</h1>
Example 3
<h1 data-dojo-type="dojox.mobile.Heading" label="Voice Memos">
<div data-dojo-type="dojox.mobile.ToolBarButton" label="Speaker"></div>
<div data-dojo-type="dojox.mobile.ToolBarButton" label="Done" class="mblColorBlue" style="width:45px;float:right;"></div>
</h1>
Example 4
<h1 data-dojo-type="dojox.mobile.Heading" label="Updates">
<div data-dojo-type="dojox.mobile.ToolBarButton" label="Update All" style="float:right;"></div>
</h1>
Example 5
<h1 data-dojo-type="dojox.mobile.Heading" label="News" back="Bookmarks" moveTo="bookmarks">
<div data-dojo-type="dojox.mobile.ToolBarButton" label="Done" class="mblColorBlue" style="width:45px;float:right;"></div>
</h1>
Example 6
<h1 data-dojo-type="dojox.mobile.Heading">
<div data-dojo-type="dojox.mobile.ToolBarButton" label="Done" class="mblColorBlue"></div>
<div data-dojo-type="dojox.mobile.ToolBarButton" label="New Folder" style="float:right;"></div>
</h1>
Example 7
<div data-dojo-type="dojox.mobile.Heading">
<div data-dojo-type="dojox.mobile.ToolBarButton" toggle="true">New</div>
<div data-dojo-type="dojox.mobile.ToolBarButton" toggle="true">Toggle</div>
<div data-dojo-type="dojox.mobile.ToolBarButton" icon="images/a-icon-12.png" moveTo="view3"></div>
<div data-dojo-type="dojox.mobile.ToolBarButton" icon="images/tab-icons.png" iconPos="29,0,29,29" moveTo="view3"></div>
<div data-dojo-type="dojox.mobile.ToolBarButton" class="mblDomButtonWhitePlus" moveTo="view3" style="float:right;"></div>
</div>
Example 8
<h1 data-dojo-type="dojox.mobile.Heading">
<ul data-dojo-type="dojox.mobile.TabBar" barType="segmentedControl" style="float:left;margin-left:6px;">
<li data-dojo-type="dojox.mobile.TabBarButton" style="width:80px" selected="true">Catalog</li>
<li data-dojo-type="dojox.mobile.TabBarButton" style="width:80px">Share</li>
<li data-dojo-type="dojox.mobile.TabBarButton" style="width:80px">Download</li>
</ul>
<div data-dojo-type="dojox.mobile.ToolBarButton" class="mblDomButtonWhiteSearch" style="float:right;"></div>
</h1>
Example 9
<h1 data-dojo-type="dojox.mobile.Heading" align="center">
<table cellpadding="0" cellspacing="0" style="width:100%;"><tr>
<td><div data-dojo-type="dojox.mobile.ToolBarButton" class="mblDomButtonWhitePlus"></div></td>
<td align="center"><div data-dojo-type="dojox.mobile.TabBar" barType="segmentedControl" style="margin:auto;">
<div data-dojo-type="dojox.mobile.TabBarButton" selected="true" style="width:80px">Search</div>
<div data-dojo-type="dojox.mobile.TabBarButton" style="width:80px">Directions</div>
</div></td>
<td align="right"><div data-dojo-type="dojox.mobile.ToolBarButton" icon="images/tab-icon-15h.png" style="float:right;"></div></td>
</tr></table>
</h1>
Example 10
<h1 data-dojo-type="dojox.mobile.Heading" back="Inbox" label="1 of 10">
<ul data-dojo-type="dojox.mobile.TabBar" barType="segmentedControl" style="float:right;margin-right:6px;">
<li data-dojo-type="dojox.mobile.TabBarButton" class="mblDomButtonWhiteUpArrow" selectOne="false"></li>
<li data-dojo-type="dojox.mobile.TabBarButton" class="mblDomButtonWhiteDownArrow" selectOne="false"></li>
</ul>
</h1>
Example 11
<h1 data-dojo-type="dojox.mobile.Heading" back="Top" label="Inbox(32)">
<div data-dojo-type="dojox.mobile.ToolBarButton" class="mblDomButtonWhiteSearch" style="float:right;"></div>
<div data-dojo-type="dojox.mobile.ToolBarButton" class="mblDomButtonWhiteUpArrow" style="float:right;"></div>
<div data-dojo-type="dojox.mobile.ToolBarButton" class="mblDomButtonWhiteDownArrow" style="float:right;"></div>
</h1>