← Back to branch summary

~ubuntu-branches/ubuntu/raring/maas/raring-updates

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/docs/node-menunav/menunav-leftnav.html

  • Committer: Package Import Robot
  • Author(s): Andres Rodriguez
  • Date: 2012-07-03 17:42:37 UTC
  • mfrom: (1.1.13)
  • Revision ID: package-import@ubuntu.com-20120703174237-p8l0keuuznfg721k
Tags: 0.1+bzr709+dfsg-0ubuntu1
* New Upstream release
* debian/control:
  - Depends on python-celery, python-tempita, libjs-yui3-{full,min},
    libjs-raphael
* debian/maas.install:
  - Install apiclient, celeryconfig.py, maas-import-pxe-files, preseeds_v2.
  - Update to install various files from chroot, rather tha manually copy
    them from the source.
* debian/maas.links: symlink celeryconfig.py
* debian/maas.maas-celery.upstart: Add job.
* debian/rules:
  - Install celery upstart job.
  - Do not install jslibs as packages are now used.
  - Drop copying of maas_local_settings_sample.py as source now ships
    a maas_local_settings.py
* debian/patches:
  - 04-maas-http-fix.patch: Drop. Merged upstream.
  - 01-fix-database-settings.patch: Refreshed.
  - 99_enums_js.patch: Added until creation of enum.js / build process
    is fixed.
* debian/maas.postinst: Update bzr version to correctly handle upgrades.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/jslibs/yui/3.4.1/docs/node-menunav/menunav-leftnav.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Basic Left Nav</title>
6
 
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
7
 
    <link rel="stylesheet" href="../assets/css/main.css">
8
 
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
9
 
    <script src="../../build/yui/yui-min.js"></script>
10
 
</head>
11
 
<body>
12
 
 
13
 
<div id="doc">
14
 
    <h1>Example: Basic Left Nav</h1>
15
 
 
16
 
    
17
 
 
18
 
    <div class="yui3-g">
19
 
        <div id="main" class="yui3-u">
20
 
            <div class="content"><div class="intro">
21
 
<p>
22
 
This example demonstrates how to create a traditional, two-column page layout
23
 
(<a href="../cssgrids/index.html">using Grids</a>) with a set of fly-out menu navigation 
24
 
in the left column.
25
 
</p>
26
 
</div>
27
 
 
28
 
<div class="example newwindow">
29
 
    <a href="menunav-leftnav-example.html" target="_blank" class="button">
30
 
        View Example in New Window
31
 
    </a>
32
 
</div>
33
 
 
34
 
<h2>Setting Up the HTML</h2>
35
 
 
36
 
<p>
37
 
Begin by including the <a href="../cssgrids/index.html#dependencies">CSS Grids dependencies</a> and grid
38
 
markup (this example uses a 2 column version of the
39
 
<a href="../cssgrids/cssgrids-fluid.html">Fluid Page Template</a> with a 160px left column).
40
 
Add the markup for the menu to the left column of the grid, and the class <code>yui3-skin-sam</code>
41
 
to the <code>&lt;body&gt;</code>.
42
 
</p>
43
 
 
44
 
<p>
45
 
The root menu of menus built using the MenuNav Node Plugin can have a verical or horizontal
46
 
orientation.  The default orientation for menus is vertical, but can be easily switched to
47
 
horizontal by applying a class of <code>yui3-menu-horizontal</code> to the node representing the
48
 
root menu's bounding box, as illustrated below:
49
 
</p>
50
 
 
51
 
<pre class="code prettyprint">&lt;div id=&quot;productsandservices&quot; class=&quot;yui3-menu yui3-menu-horizontal&quot;&gt;&lt;!-- Bounding box --&gt;
52
 
    &lt;div class=&quot;yui3-menu-content&quot;&gt;&lt;!-- Content box --&gt;
53
 
        &lt;ul&gt;
54
 
            &lt;!-- Menu items --&gt;
55
 
        &lt;&#x2F;ul&gt;
56
 
    &lt;&#x2F;div&gt;
57
 
&lt;&#x2F;div&gt;</pre>
58
 
 
59
 
 
60
 
<h2>Initializing the Menu</h2>
61
 
 
62
 
<p>
63
 
With the menu markup in place, retrieve the Node instance representing the root
64
 
menu (<code>&lt;div id=&quot;productsandservices&quot;&gt;</code>) and call the
65
 
<a href="http://yuilibrary.com/yui/docs/api/classes/Node.html#method_plug"><code>plug</code></a>
66
 
passing in a reference to the MenuNav Node Plugin.
67
 
</p>
68
 
 
69
 
<pre class="code prettyprint">&#x2F;&#x2F;  Call the &quot;use&quot; method, passing in &quot;node-menunav&quot;.  This will load the
70
 
&#x2F;&#x2F;  script and CSS for the MenuNav Node Plugin and all of the required
71
 
&#x2F;&#x2F;  dependencies.
72
 
 
73
 
YUI().use(&#x27;node-menunav&#x27;, function(Y) {
74
 
 
75
 
    &#x2F;&#x2F;  Retrieve the Node instance representing the root menu
76
 
    &#x2F;&#x2F;  (&lt;div id=&quot;productsandservices&quot;&gt;) and call the &quot;plug&quot; method
77
 
    &#x2F;&#x2F;  passing in a reference to the MenuNav Node Plugin.
78
 
 
79
 
    var menu = Y.one(&quot;#productsandservices&quot;);
80
 
 
81
 
    menu.plug(Y.Plugin.NodeMenuNav);
82
 
 
83
 
});</pre>
84
 
 
85
 
 
86
 
<p>
87
 
<em>Note:</em> In keeping with the
88
 
<a href="http://developer.yahoo.com/performance/">Exceptional Performance</a>
89
 
team's recommendation, the script block used to instantiate the menu will be
90
 
<a href="http://developer.yahoo.com/performance/rules.html#js_bottom">placed at the bottom of the page</a>.
91
 
This not only improves performance, it helps ensure that the DOM subtree of the
92
 
element representing the root menu
93
 
(<code>&lt;div id=&quot;productsandservices&quot;&gt;</code>) is ready to be scripted.
94
 
</p>
95
 
</div>
96
 
        </div>
97
 
 
98
 
        <div id="sidebar" class="yui3-u">
99
 
            
100
 
 
101
 
            
102
 
                <div class="sidebox">
103
 
                    <div class="hd">
104
 
                        <h2 class="no-toc">Examples</h2>
105
 
                    </div>
106
 
 
107
 
                    <div class="bd">
108
 
                        <ul class="examples">
109
 
                            
110
 
                                
111
 
                                    <li data-description="Creating left navigation using the MenuNav Node Plugin.">
112
 
                                        <a href="menunav-leftnav.html">Basic Left Nav</a>
113
 
                                    </li>
114
 
                                
115
 
                            
116
 
                                
117
 
                                    <li data-description="Creating top navigation using the MenuNav Node Plugin">
118
 
                                        <a href="node-menunav-2.html">Basic Top Nav</a>
119
 
                                    </li>
120
 
                                
121
 
                            
122
 
                                
123
 
                                    <li data-description="Creating menu button navigation using the MenuNav Node Plugin">
124
 
                                        <a href="node-menunav-3.html">Menu Button Top Nav</a>
125
 
                                    </li>
126
 
                                
127
 
                            
128
 
                                
129
 
                                    <li data-description="Creating split button navigation using the MenuNav Node Plugin">
130
 
                                        <a href="node-menunav-4.html">Split Button Top Nav</a>
131
 
                                    </li>
132
 
                                
133
 
                            
134
 
                                
135
 
                                    <li data-description="Adding shadows to submenus of a left nav using the MenuNav Node Plugin">
136
 
                                        <a href="node-menunav-5.html">Left Nav with Submenus with Shadows</a>
137
 
                                    </li>
138
 
                                
139
 
                            
140
 
                                
141
 
                                    <li data-description="Adding rounded corners to submenus of a left nav using the MenuNav Node Plugin">
142
 
                                        <a href="node-menunav-6.html">Left Nav With Submenus With Rounded Corners</a>
143
 
                                    </li>
144
 
                                
145
 
                            
146
 
                                
147
 
                                    <li data-description="Skining a menu built using the MenuNav Node Plugin to look like the menus on Flickr">
148
 
                                        <a href="node-menunav-7.html">Skinning Menus Created Using the MenuNav Node Plugin</a>
149
 
                                    </li>
150
 
                                
151
 
                            
152
 
                        </ul>
153
 
                    </div>
154
 
                </div>
155
 
            
156
 
 
157
 
            
158
 
        </div>
159
 
    </div>
160
 
</div>
161
 
 
162
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
163
 
<script>prettyPrint();</script>
164
 
 
165
 
</body>
166
 
</html>