5
<title>UbuntuUI.Toolbar - 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: UbuntuUI.Toolbar</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>
61
<div id="methods-on-page" class="sidebox on-page">
63
<h2 class="no-toc">Methods On Page</h2>
67
<li><a href="#methods_element">element</a></li>
68
<li><a href="#methods_hide">hide</a></li>
69
<li><a href="#methods_show">show</a></li>
70
<li><a href="#methods_toggle">toggle</a></li>
78
<div id="fileTree" class="sidebox">
80
<h2 class="no-toc">Files</h2>
83
<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>
89
<div id="main" class="yui3-u">
90
<div class="content"><h4>Class UbuntuUI.Toolbar</h4>
91
<span class="foundat">Class defined in: <a href="../../files/toolbars.js.html#l23"><code>toolbars.js:23</code></a></span>
92
<div class="intro"><p>A Toolbar is the JavaScript representation of an Ubuntu HTML5 app <em>footer</em>.</p>
93
<p>######Contained List provides buttons
94
The Toolbar contains a List, where each list item is treated as a Button (see below). List items (Buttons) are pushed to the right. The default Back button always exists to the left and does not need to be declared.</p>
95
<p>#####Default and custom footers
96
See the Pagestack class documentation for information about the default application-wide Footer, customizing it, and adding Page-specific Footers.</p>
99
<a name="methods_UbuntuUI.Toolbar"></a>
100
<div class="method item">
101
<strong class="name"><code>UbuntuUI.Toolbar</code></strong>( <code> </code> )
103
<span class="foundat">
105
<a href="../../files/toolbars.js.html#l23"><code>toolbars.js:23</code></a>
109
<pre class="code prettyprint"><code> <footer data-role="footer" class="revealed" id="footerID">
113
<a href="#" id="home">Home</a>
120
var toolbar = UI.toolbar("toolbarID");
121
UI.button('home').click(function () {
122
UI.pagestack.push("main");
130
<li><a href="#methods">Methods</a></li>
134
<a name="methods_element"></a>
135
<div class="method item">
136
<strong class="name"><code>element</code></strong>( <code> </code> )
138
<span class="foundat">
140
<a href="../../files/toolbars.js.html#l184"><code>toolbars.js:184</code></a>
142
<p>Returns the DOM element associated with the id this widget is bind to.</p>
145
<pre class="code prettyprint"><code> var mytoolbar = UI.toolbar("toolbarid").element();</code></pre>
148
<a name="methods_hide"></a>
149
<div class="method item">
150
<strong class="name"><code>hide</code></strong>( <code> </code> )
152
<span class="foundat">
154
<a href="../../files/toolbars.js.html#l168"><code>toolbars.js:168</code></a>
156
<p>Hide a Toolbar</p>
159
<a name="methods_show"></a>
160
<div class="method item">
161
<strong class="name"><code>show</code></strong>( <code> </code> )
163
<span class="foundat">
165
<a href="../../files/toolbars.js.html#l160"><code>toolbars.js:160</code></a>
167
<p>Display a Toolbar</p>
170
<a name="methods_toggle"></a>
171
<div class="method item">
172
<strong class="name"><code>toggle</code></strong>( <code> </code> )
174
<span class="foundat">
176
<a href="../../files/toolbars.js.html#l176"><code>toolbars.js:176</code></a>
178
<p>Toggle show/hide status of a Toolbar</p>
188
<script src="../assets/vendor/prettify/prettify-min.js"></script>
189
<script>prettyPrint();</script>
190
<script src="../assets/js/yui-prettify.js"></script>
191
<script src="../assets/js/tabs.js"></script>