~ci-train-bot/ubuntu-html5-theme/ubuntu-html5-theme-ubuntu-yakkety-landing-067

« back to all changes in this revision

Viewing changes to 0.1/ambiance/js/docsbuild/files/header.js.html

  • Committer: CI Train Bot
  • Author(s): Michael Hall, Alexandre Abreu
  • Date: 2015-04-09 14:26:31 UTC
  • mfrom: (200.2.3 ubuntu-html5-theme)
  • Revision ID: ci-train-bot@canonical.com-20150409142631-5axmx6p7x08ej1im
Add -doc package, whose contents have to be generated locally (use the ./update-docs command) because not all of its node dependencies are in the archive. This is done, so we can more easily update developer.ubuntu.com/api
Approved by: David Barth

Show diffs side-by-side

added added

removed removed

Lines of Context:
 
1
<!DOCTYPE html>
 
2
<html lang="en">
 
3
<head>
 
4
    <meta charset="utf-8">
 
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>
 
10
</head>
 
11
<body class="yui3-skin-sam">
 
12
 
 
13
<div id="doc">
 
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>
 
17
        </div>
 
18
        <div class="yui3-u-1-4 version">
 
19
            <em>API Docs for: HTML-14.04-dev~bzr202</em>
 
20
        </div>
 
21
    </div>
 
22
    <div class="yui3-g">
 
23
 
 
24
        <div id="sidebar" class="yui3-u">
 
25
            <div id="modules" class="sidebox">
 
26
                <div class="hd">
 
27
                    <h2 class="no-toc">Modules</h2>
 
28
                </div>
 
29
                <div class="bd">
 
30
                    <ul>
 
31
                            <li><a href="../modules/UbuntuUI.html">UbuntuUI</a>
 
32
                            </li>
 
33
                    </ul>
 
34
                </div>
 
35
            </div>
 
36
            
 
37
            <div id="classes" class="sidebox">
 
38
                <div class="hd">
 
39
                    <h2 class="no-toc">Classes</h2>
 
40
                </div>
 
41
                <div class="bd">
 
42
                    <ul>
 
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>
 
57
                    </ul>
 
58
                </div>
 
59
            </div>
 
60
            
 
61
            
 
62
            
 
63
            
 
64
            
 
65
            <div id="fileTree" class="sidebox">
 
66
                <div class="hd">
 
67
                    <h2 class="no-toc">Files</h2>
 
68
                </div>
 
69
                <div class="bd">
 
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>
 
71
                </div>
 
72
            </div>
 
73
            
 
74
        </div>
 
75
 
 
76
        <div id="main" class="yui3-u">
 
77
            <div class="content"><h4>header.js</h4>
 
78
 
 
79
<pre class="code prettyprint linenums">
 
80
/*
 
81
 * Copyright (C) 2013 Adnane Belmadiaf &lt;daker@ubuntu.com&gt;
 
82
 * License granted by Canonical Limited
 
83
 *
 
84
 * This file is part of ubuntu-html5-ui-toolkit.
 
85
 *
 
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
 
89
 * License, or
 
90
 * (at your option) any later version.
 
91
 
 
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.
 
96
 
 
97
 * You should have received a copy of the GNU Lesser General Public
 
98
 * License along with this program. If not, see
 
99
 * &lt;http://www.gnu.org/licenses/&gt;.
 
100
 */
 
101
 
 
102
/**
 
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.
 
105
 
 
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 &lt;em&gt;content&lt;/em&gt; div.
 
108
 
 
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()).
 
113
 
 
114
######Contained list provides Page navigation
 
115
A contained unordered list has list items, each of which has &quot;data-page&quot; 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.
 
116
 
 
117
 * @class Header
 
118
 * @constructor
 
119
 * @namespace UbuntuUI
 
120
 * @example
 
121
      &lt;body&gt;
 
122
        &lt;div data-role=&quot;mainview&quot;&gt;
 
123
 
 
124
          &lt;header data-role=&quot;header&quot; id=&quot;headerID&quot;&gt;
 
125
            &lt;ul data-role=&quot;tabs&quot;&gt;
 
126
              &lt;li data-role=&quot;tabitem&quot; data-page=&quot;main&quot;&gt;Main&lt;/li&gt;
 
127
              &lt;li data-role=&quot;tabitem&quot; data-page=&quot;two&quot;&gt;Two&lt;/li&gt;
 
128
            &lt;/ul&gt;
 
129
          &lt;/header&gt;
 
130
 
 
131
          &lt;div data-role=&quot;content&quot;&gt;
 
132
            &lt;div data-role=&quot;tab&quot; id=&quot;main&quot;&gt;
 
133
                [...]
 
134
            &lt;/div&gt;
 
135
            &lt;div data-role=&quot;tab&quot; id=&quot;two&quot;&gt;
 
136
                [...]
 
137
            &lt;/div&gt;
 
138
          &lt;/div&gt;
 
139
 
 
140
        &lt;/div&gt;
 
141
      &lt;/body&gt;
 
142
 
 
143
      JavaScript access:
 
144
      var header = UI.header(&quot;headerID&quot;);
 
145
 */
 
146
var Header= function (id) {
 
147
    this.id =  id;
 
148
};
 
149
 
 
150
Header.prototype = {
 
151
    /**
 
152
     * Returns the DOM element associated with the id this widget is bind to.
 
153
     * @method element
 
154
     * @return {DOMElement}
 
155
     * @example
 
156
        var myheader = UI.header(&quot;headerid&quot;).element();
 
157
     */
 
158
    element: function () {
 
159
        return document.getElementById(this.id);
 
160
    }
 
161
};
 
162
 
 
163
</pre>
 
164
 
 
165
</div>
 
166
        </div>
 
167
    </div>
 
168
</div>
 
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>
 
173
</body>
 
174
</html>