Modules
Classes
- UbuntuUI
- UbuntuUI.Button
- UbuntuUI.Dialog
- UbuntuUI.Header
- UbuntuUI.List
- UbuntuUI.Page
- UbuntuUI.Pagestack
- UbuntuUI.Popover
- UbuntuUI.Shape
- UbuntuUI.Tabs
- UbuntuUI.Toolbar
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");