UbuntuUI.Header

Class UbuntuUI.Header

Class defined in: 0.1/ambiance/js/header.js:23

An Ubuntu Header wraps Tabs. Together they provide the main navigation widget at the top of an Ubuntu HTML5 app.

Declare the Header and its Tabs in HTML as a direct child of the top level Page as a sibling to the content div.

Contained list provides Page navigation

A contained unordered list has list items, each of which has an anchor (<a>) whose href attribute is a hash char ("#") followed by a Page ID. Clicking the Header/Tabs allows the user to navigate to the Pages identified by these IDs.

UbuntuUI.Header ( )

0.1/ambiance/js/header.js:23

Example

 <body>
   <div data-role="page">
     <header data-role="header" id="headerID">
       <div class="tabs-inner">
         <ul data-role="tabs">
           <li class="active" data-role="tab">
             <a href="#main">Main</a>
           </li>
           <li data-role="tab">
             <a href="#page2">Two</a>
           </li>
         </ul>
       </div>
     </header>
     <div data-role="content">
       [...]
     </div>
   </div>
 </body>

 JavaScript access:
 var header = UI.header("headerID");