← Back to branch summary

~bac/juju-gui/trunkcopy

« back to all changes in this revision

Viewing changes to lib/yui/docs/transition/transition-view.html

  • Committer: kapil.foss at gmail
  • Date: 2012-07-13 18:45:59 UTC
  • Revision ID: kapil.foss@gmail.com-20120713184559-2xl7be17egsrz0c9
reshape

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/yui/docs/transition/transition-view.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Showing and Hiding with Transitions</title>
6
 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Maven+Pro:400,700">
7
 
    <link rel="stylesheet" href="../../build/cssgrids/grids-min.css">
8
 
    <link rel="stylesheet" href="../assets/css/main.css">
9
 
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
10
 
    <script src="../../build/yui/yui-min.js"></script>
11
 
</head>
12
 
<body>
13
 
 
14
 
<div id="doc">
15
 
    <h1>Example: Showing and Hiding with Transitions</h1>
16
 
 
17
 
    
18
 
 
19
 
    <div class="yui3-g">
20
 
        <div class="yui3-u-3-4">
21
 
            <div id="main">
22
 
                <div class="content"><style scoped>
23
 
div.demo {
24
 
    margin: 1em 0;
25
 
    width: 300px;
26
 
    background-color: #B6BFDA;
27
 
    border: 1px solid #7E869D;
28
 
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
29
 
    border-radius: 3px;
30
 
}
31
 
 
32
 
div.demo p {
33
 
    padding: 1em;
34
 
    zoom:1;
35
 
}
36
 
</style>
37
 
<div class="intro">
38
 
    <p>This example shows how to show and hide Node instances.</p>
39
 
</div>
40
 
 
41
 
<div class="example">
42
 
<button id="hide">hide</button>
43
 
<button id="show">show</button>
44
 
 
45
 
<div class="demo"><p>lorem ipsum dolor sit</p></div>
46
 
 
47
 
<script type="text/javascript">
48
 
YUI().use('transition', 'node-event-delegate', function(Y) {
49
 
    Y.delegate('click', function(e) {
50
 
        var buttonID = e.currentTarget.get('id'),
51
 
            node = Y.one('.demo');
52
 
            
53
 
        if (buttonID === 'show') {
54
 
            node.show(true);
55
 
        } else if (buttonID == 'hide') {
56
 
            node.hide(true);
57
 
        }
58
 
 
59
 
    }, document, 'button');
60
 
});
61
 
</script>
62
 
 
63
 
</div>
64
 
 
65
 
<h2>Showing a Node</h2>
66
 
<p>The view of a Node instance can be transitioned by passing <code>true</code> to the <code>show</code> and <code>hide</code> methods.</p>
67
 
 
68
 
<pre class="code prettyprint">Y.one(&#x27;.demo&#x27;).show(true);</pre>
69
 
 
70
 
 
71
 
<h2>Hiding a Node</h2>
72
 
<p>The opposite of <code>show</code>, the <code>hide</code> method sets the node's CSS <code>display</code> property to <code>none</code>.</p>
73
 
 
74
 
<pre class="code prettyprint">Y.one(&#x27;.demo&#x27;).hide(true);</pre>
75
 
 
76
 
 
77
 
<h2>Complete Example Source</h2>
78
 
<pre class="code prettyprint">&lt;button id=&quot;hide&quot;&gt;hide&lt;&#x2F;button&gt;
79
 
&lt;button id=&quot;show&quot;&gt;show&lt;&#x2F;button&gt;
80
 
 
81
 
&lt;div class=&quot;demo&quot;&gt;&lt;p&gt;lorem ipsum dolor sit&lt;&#x2F;p&gt;&lt;&#x2F;div&gt;
82
 
 
83
 
&lt;script type=&quot;text&#x2F;javascript&quot;&gt;
84
 
YUI().use(&#x27;transition&#x27;, &#x27;node-event-delegate&#x27;, function(Y) {
85
 
    Y.delegate(&#x27;click&#x27;, function(e) {
86
 
        var buttonID = e.currentTarget.get(&#x27;id&#x27;),
87
 
            node = Y.one(&#x27;.demo&#x27;);
88
 
            
89
 
        if (buttonID === &#x27;show&#x27;) {
90
 
            node.show(true);
91
 
        } else if (buttonID == &#x27;hide&#x27;) {
92
 
            node.hide(true);
93
 
        }
94
 
 
95
 
    }, document, &#x27;button&#x27;);
96
 
});
97
 
&lt;&#x2F;script&gt;</pre>
98
 
 
99
 
</div>
100
 
            </div>
101
 
        </div>
102
 
 
103
 
        <div class="yui3-u-1-4">
104
 
            <div class="sidebar">
105
 
                
106
 
 
107
 
                
108
 
                    <div class="sidebox">
109
 
                        <div class="hd">
110
 
                            <h2 class="no-toc">Examples</h2>
111
 
                        </div>
112
 
 
113
 
                        <div class="bd">
114
 
                            <ul class="examples">
115
 
                                
116
 
                                    
117
 
                                        <li data-description="Demonstrates the basic usage of Transitions.">
118
 
                                            <a href="transition-basic.html">Basic Node Transitions</a>
119
 
                                        </li>
120
 
                                    
121
 
                                
122
 
                                    
123
 
                                        <li data-description="Demonstrates more advanced usage of Transitions.">
124
 
                                            <a href="transition-usage.html">Using Transitions</a>
125
 
                                        </li>
126
 
                                    
127
 
                                
128
 
                                    
129
 
                                        <li data-description="Demonstrates how to animate Node&#x27;s show and hide methods.">
130
 
                                            <a href="transition-view.html">Showing and Hiding with Transitions</a>
131
 
                                        </li>
132
 
                                    
133
 
                                
134
 
                                    
135
 
                                
136
 
                                    
137
 
                                
138
 
                                    
139
 
                                
140
 
                                    
141
 
                                
142
 
                                    
143
 
                                
144
 
                            </ul>
145
 
                        </div>
146
 
                    </div>
147
 
                
148
 
 
149
 
                
150
 
                    <div class="sidebox">
151
 
                        <div class="hd">
152
 
                            <h2 class="no-toc">Examples That Use This Component</h2>
153
 
                        </div>
154
 
 
155
 
                        <div class="bd">
156
 
                            <ul class="examples">
157
 
                                
158
 
                                    
159
 
                                
160
 
                                    
161
 
                                
162
 
                                    
163
 
                                
164
 
                                    
165
 
                                        <li data-description="Shows how to create a panel that animates as it is shown and hidden">
166
 
                                            <a href="../panel/panel-animate.html">Creating an Animated Panel</a>
167
 
                                        </li>
168
 
                                    
169
 
                                
170
 
                                    
171
 
                                        <li data-description="NodeList provides Node functionality for manipulating multiple nodes at once.">
172
 
                                            <a href="../node/nodelist.html">Using NodeList - Simple</a>
173
 
                                        </li>
174
 
                                    
175
 
                                
176
 
                                    
177
 
                                        <li data-description="How to use multiple NodeList features to build a simple game.">
178
 
                                            <a href="../node/ducks.html">Using NodeList - Ducks Game</a>
179
 
                                        </li>
180
 
                                    
181
 
                                
182
 
                                    
183
 
                                        <li data-description="This example employs AsyncQueue to incrementally construct an application interface; this illustrates the approach you&#x27;d take to allow chunked rendering of the UI in a process-intensive application.">
184
 
                                            <a href="../async-queue/queue-app.html">Building a UI with AsyncQueue</a>
185
 
                                        </li>
186
 
                                    
187
 
                                
188
 
                                    
189
 
                                        <li data-description="Create a reusable JSONPRequest object to poll the YUILibrary.com Gallery web service, fetching info on a random Gallery module.">
190
 
                                            <a href="../jsonp/jsonp-gallery.html">Reusing a JSONPRequest Instance to Poll a Remote Server</a>
191
 
                                        </li>
192
 
                                    
193
 
                                
194
 
                            </ul>
195
 
                        </div>
196
 
                    </div>
197
 
                
198
 
            </div>
199
 
        </div>
200
 
    </div>
201
 
</div>
202
 
 
203
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
204
 
<script>prettyPrint();</script>
205
 
 
206
 
</body>
207
 
</html>