5
<title>header.js - Ubuntu HTML5 API</title>
6
<link rel="stylesheet" href="http://yui.yahooapis.com/3.8.0pr2/build/cssgrids/cssgrids-min.css">
7
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
8
<link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
9
<script src="http://yui.yahooapis.com/combo?3.8.0pr2/build/yui/yui-min.js"></script>
11
<body class="yui3-skin-sam">
14
<div id="hd" class="yui3-g header">
15
<div class="yui3-u-3-4">
16
<h1><a href="../index.html"><img src="../assets/css/logo.png">Ubuntu HTML5 API: header.js</a></h1>
18
<div class="yui3-u-1-4 version">
19
<em>API Docs for: HTML-14.04-dev~bzr202</em>
24
<div id="sidebar" class="yui3-u">
25
<div id="modules" class="sidebox">
27
<h2 class="no-toc">Modules</h2>
31
<li><a href="../modules/UbuntuUI.html">UbuntuUI</a>
37
<div id="classes" class="sidebox">
39
<h2 class="no-toc">Classes</h2>
43
<li><a href="../classes/UbuntuUI.html">UbuntuUI</a></li>
44
<li><a href="../classes/UbuntuUI.Button.html">UbuntuUI.Button</a></li>
45
<li><a href="../classes/UbuntuUI.Dialog.html">UbuntuUI.Dialog</a></li>
46
<li><a href="../classes/UbuntuUI.Header.html">UbuntuUI.Header</a></li>
47
<li><a href="../classes/UbuntuUI.List.html">UbuntuUI.List</a></li>
48
<li><a href="../classes/UbuntuUI.OptionSelector.html">UbuntuUI.OptionSelector</a></li>
49
<li><a href="../classes/UbuntuUI.Page.html">UbuntuUI.Page</a></li>
50
<li><a href="../classes/UbuntuUI.Pagestack.html">UbuntuUI.Pagestack</a></li>
51
<li><a href="../classes/UbuntuUI.Popover.html">UbuntuUI.Popover</a></li>
52
<li><a href="../classes/UbuntuUI.Progress.html">UbuntuUI.Progress</a></li>
53
<li><a href="../classes/UbuntuUI.Shape.html">UbuntuUI.Shape</a></li>
54
<li><a href="../classes/UbuntuUI.Tab.html">UbuntuUI.Tab</a></li>
55
<li><a href="../classes/UbuntuUI.Tabs.html">UbuntuUI.Tabs</a></li>
56
<li><a href="../classes/UbuntuUI.Toolbar.html">UbuntuUI.Toolbar</a></li>
65
<div id="fileTree" class="sidebox">
67
<h2 class="no-toc">Files</h2>
70
<ul><li>buttons.js/<ul></ul></li><li>core.js/<ul></ul></li><li>dialogs.js/<ul></ul></li><li>fast-buttons.js/<ul></ul></li><li>header.js/<ul></ul></li><li>list.js/<ul></ul></li><li>option-selector.js/<ul></ul></li><li>page.js/<ul></ul></li><li>pagestacks.js/<ul></ul></li><li>popovers.js/<ul></ul></li><li>progress.js/<ul></ul></li><li>shape.js/<ul></ul></li><li>tab.js/<ul></ul></li><li>tabs.js/<ul></ul></li><li>toolbars.js/<ul></ul></li></ul>
76
<div id="main" class="yui3-u">
77
<div class="content"><h4>header.js</h4>
79
<pre class="code prettyprint linenums">
81
* Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com>
82
* License granted by Canonical Limited
84
* This file is part of ubuntu-html5-ui-toolkit.
86
* This package is free software; you can redistribute it and/or modify
87
* it under the terms of the GNU Lesser General Public License as
88
* published by the Free Software Foundation; either version 3 of the
90
* (at your option) any later version.
92
* This package is distributed in the hope that it will be useful,
93
* but WITHOUT ANY WARRANTY; without even the implied warranty of
94
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
95
* GNU General Public License for more details.
97
* You should have received a copy of the GNU Lesser General Public
98
* License along with this program. If not, see
99
* <http://www.gnu.org/licenses/>.
103
* An Ubuntu Header wraps the general Tabs definitions and interaction in the case of a Tab
104
navigation pattern or is used to display the title of the current page when using a PageStack navigation pattern.
106
In the case of a Tab navigation pattern, declare the Header and its Tabs in HTML as a direct child
107
of the top level MainView as a sibling to the <em>content</em> div.
109
In the case of a PageStack navigation pattern, the Ubuntu Header HTML element should be present
110
and can be left empty. It will be automatically updated to hold the Title of the current Page being
111
visited. The value of such a title is taken from the data-title attribute of the currently visited
112
Page as it is being pushed at the top of the stack (see PageStack.push()).
114
######Contained list provides Page navigation
115
A contained unordered list has list items, each of which has "data-page" data attribute whose value of a Page ID that it targets. Clicking the Header/Tabs allows the user to navigate to the Pages identified by these IDs.
119
* @namespace UbuntuUI
122
<div data-role="mainview">
124
<header data-role="header" id="headerID">
125
<ul data-role="tabs">
126
<li data-role="tabitem" data-page="main">Main</li>
127
<li data-role="tabitem" data-page="two">Two</li>
131
<div data-role="content">
132
<div data-role="tab" id="main">
135
<div data-role="tab" id="two">
144
var header = UI.header("headerID");
146
var Header= function (id) {
152
* Returns the DOM element associated with the id this widget is bind to.
154
* @return {DOMElement}
156
var myheader = UI.header("headerid").element();
158
element: function () {
159
return document.getElementById(this.id);
169
<script src="../assets/vendor/prettify/prettify-min.js"></script>
170
<script>prettyPrint();</script>
171
<script src="../assets/js/yui-prettify.js"></script>
172
<script src="../assets/js/tabs.js"></script>