Authors:Yoshiroh Kamiyama
Developers:Yoshiroh Kamiyama

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


Constructor Parameters

Parameter Type Default Description
back String “” A label for the navigational control to return to the previous View.
href String “” A URL to open when the navigational control is pressed.
moveTo String “” The id of the transition destination view which resides in the current page. If the value has a hash sign (‘#’) before the id (e.g. #view1) and the dojo.hash module is loaded by the user application, the view transition updates the hash in the browser URL so that the user can bookmark the destination view. In this case, the user can also use the browser’s back/forward button to navigate through the views in the browser history. If null, transitions to a blank view. If ‘#’, returns immediately without transition.
transition String “slide” A type of animated transition effect. You can choose from the standard transition types, “slide”, “fade”, “flip”, or from the extended transition types, “cover”, “coverv”, “dissolve”, “reveal”, “revealv”, “scaleIn”, “scaleOut”, “slidev”, “swirl”, “zoomIn”, “zoomOut”. If “none” is specified, transition occurs immediately without animation.
label String “” A title text of the heading. If the label is not specified, the innerHTML of the node is used as a label.
iconBase String “” The default icon path for child items. If a child item does not have its own icon parameter specified, this value is used as its icon path. This parameter is especially useful when all or most of the icons are the same, or you use CSS sprite icons, where you specify an aggregated icon image with this parameter and an icon position for each icon.


Example 1

<h1 data-dojo-type="" back="Settings" moveTo="settings">General</h1>

Example 2

<h1 data-dojo-type="" label="World Clock">
  <div data-dojo-type="" style="padding: 0px 14px">Edit</div>
  <div data-dojo-type="" class="mblDomButtonWhitePlus" style="float:right;"></div>

Example 3

<h1 data-dojo-type="" label="Voice Memos">
  <div data-dojo-type="" label="Speaker"></div>
  <div data-dojo-type="" label="Done" class="mblColorBlue" style="width:45px;float:right;"></div>

Example 4

<h1 data-dojo-type="" label="Updates">
  <div data-dojo-type="" label="Update All" style="float:right;"></div>

Example 5

<h1 data-dojo-type="" label="News" back="Bookmarks" moveTo="bookmarks">
  <div data-dojo-type="" label="Done" class="mblColorBlue" style="width:45px;float:right;"></div>

Example 6

<h1 data-dojo-type="">
  <div data-dojo-type="" label="Done" class="mblColorBlue"></div>
  <div data-dojo-type="" label="New Folder" style="float:right;"></div>

Example 7

<div data-dojo-type="">
  <div data-dojo-type="" toggle="true">New</div>
  <div data-dojo-type="" toggle="true">Toggle</div>
  <div data-dojo-type="" icon="images/a-icon-12.png" moveTo="view3"></div>
  <div data-dojo-type="" icon="images/tab-icons.png" iconPos="29,0,29,29" moveTo="view3"></div>
  <div data-dojo-type="" class="mblDomButtonWhitePlus" moveTo="view3" style="float:right;"></div>

Example 8

<h1 data-dojo-type="">
  <ul data-dojo-type="" barType="segmentedControl" style="float:left;margin-left:6px;">
    <li data-dojo-type="" style="width:80px" selected="true">Catalog</li>
    <li data-dojo-type="" style="width:80px">Share</li>
    <li data-dojo-type="" style="width:80px">Download</li>
  <div data-dojo-type="" class="mblDomButtonWhiteSearch" style="float:right;"></div>

Example 9

<h1 data-dojo-type="" align="center">
  <table cellpadding="0" cellspacing="0" style="width:100%;"><tr>
  <td><div data-dojo-type="" class="mblDomButtonWhitePlus"></div></td>
  <td align="center"><div data-dojo-type="" barType="segmentedControl" style="margin:auto;">
    <div data-dojo-type="" selected="true" style="width:80px">Search</div>
    <div data-dojo-type="" style="width:80px">Directions</div>
  <td align="right"><div data-dojo-type="" icon="images/tab-icon-15h.png" style="float:right;"></div></td>

Example 10

<h1 data-dojo-type="" back="Inbox" label="1 of 10">
  <ul data-dojo-type="" barType="segmentedControl" style="float:right;margin-right:6px;">
    <li data-dojo-type="" class="mblDomButtonWhiteUpArrow" selectOne="false"></li>
    <li data-dojo-type="" class="mblDomButtonWhiteDownArrow" selectOne="false"></li>

Example 11

<h1 data-dojo-type="" back="Top" label="Inbox(32)">
  <div data-dojo-type="" class="mblDomButtonWhiteSearch" style="float:right;"></div>
  <div data-dojo-type="" class="mblDomButtonWhiteUpArrow" style="float:right;"></div>
  <div data-dojo-type="" class="mblDomButtonWhiteDownArrow" style="float:right;"></div>
Error in the documentation? Can’t find what you are looking for? Let us know!