← Back to branch summary

~bac/juju-gui/trunkcopy

« back to all changes in this revision

Viewing changes to lib/yui/docs/resize/constrain-resize.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/resize/constrain-resize.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Constrain a Resize</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: Constrain a Resize</h1>
16
 
 
17
 
    
18
 
        <a href="#toc" class="jump">Jump to Table of Contents</a>
19
 
    
20
 
 
21
 
    <div class="yui3-g">
22
 
        <div class="yui3-u-3-4">
23
 
            <div id="main">
24
 
                <div class="content"><div class="intro">
25
 
<p>This example shows how to create a resizable element where the resize operation is constrained to a specific aspect ratio.</p>
26
 
</div>
27
 
 
28
 
<div class="example">
29
 
    <style>
30
 
    #demo {
31
 
        height: 100px;
32
 
        width: 100px;
33
 
        border: 1px solid black;
34
 
        background-color: #8DD5E7;
35
 
        position: relative;
36
 
        padding: 1em;
37
 
        margin: 2em;
38
 
    }
39
 
 
40
 
 
41
 
</style>
42
 
 
43
 
<div id="demo">Resize Me</div>
44
 
 
45
 
 
46
 
 
47
 
<script>
48
 
YUI().use('resize', function(Y) {
49
 
    var resize = new Y.Resize({
50
 
        //Selector of the node to resize
51
 
        node: '#demo'
52
 
    });
53
 
    resize.plug(Y.Plugin.ResizeConstrained, {
54
 
        minWidth: 50,
55
 
        minHeight: 50,
56
 
        maxWidth: 300,
57
 
        maxHeight: 300,
58
 
        preserveRatio: true
59
 
    });    
60
 
});
61
 
 
62
 
 
63
 
</script>
64
 
 
65
 
 
66
 
</div>
67
 
<h3 id="setting-up-the-node">Setting up the Node</h3>
68
 
<p>First we need to create an HTML element to make resizable.</p>
69
 
 
70
 
<pre class="code prettyprint">&lt;div id=&quot;demo&quot;&gt;Resize Me&lt;&#x2F;div&gt;</pre>
71
 
 
72
 
 
73
 
<p>Next, we'll give that element some CSS to make it visible.</p>
74
 
 
75
 
<pre class="code prettyprint">#demo {
76
 
    height: 100px;
77
 
    width: 100px;
78
 
    border: 1px solid black;
79
 
    background-color: #8DD5E7;
80
 
    position: relative;
81
 
    padding: 1em;
82
 
    margin: 2em;
83
 
}</pre>
84
 
 
85
 
 
86
 
<h3 id="setting-up-the-yui-instance">Setting up the YUI Instance</h3>
87
 
 
88
 
<p>Now we need to create our YUI instance and tell it to load the <code>resize</code> module.  This module is a rollup that includes the <code>resize-constrain</code> submodule; that means we have access to the <code>ResizeConstrained</code> plugin.</p>
89
 
 
90
 
<pre class="code prettyprint">YUI().use(&#x27;resize&#x27;);</pre>
91
 
 
92
 
 
93
 
 
94
 
<h3 id="making-the-node-resizable">Making the Node resizable</h3>
95
 
<p>Now that we have a YUI instance with the <code>resize</code> module, we need to instantiate the <code>Resize</code> instance on this Node.</p>
96
 
 
97
 
<pre class="code prettyprint">YUI().use(&#x27;resize&#x27;, function(Y) {
98
 
    var resize = new Y.Resize({
99
 
        &#x2F;&#x2F;Selector of the node to resize
100
 
        node: &#x27;#demo&#x27;
101
 
    });   
102
 
});</pre>
103
 
 
104
 
 
105
 
<h3 id="adding-the-constrained-plugin">Adding the Constrained Plugin</h3>
106
 
 
107
 
<p>Now we will plug <code>ResizeConstrained</code> into our Resize instance. This plugin will allow you to limit the resize dimensions in special ways.</p>
108
 
 
109
 
<pre class="code prettyprint">YUI().use(&#x27;resize&#x27;, function(Y) {
110
 
    var resize = new Y.Resize({
111
 
        &#x2F;&#x2F;Selector of the node to resize
112
 
        node: &#x27;#demo&#x27;
113
 
    });
114
 
    resize.plug(Y.Plugin.ResizeConstrained, {
115
 
        minWidth: 50,
116
 
        minHeight: 50,
117
 
        maxWidth: 300,
118
 
        maxHeight: 300,
119
 
        preserveRatio: true
120
 
    });    
121
 
});</pre>
122
 
 
123
 
 
124
 
<p>In this case, we've used the constraint feature to specify minimum height and width for the element while setting <code>preserveRatio</code> to <code>true</code>, locking in the original aspect ratio for the element.</p>
125
 
 
126
 
</div>
127
 
            </div>
128
 
        </div>
129
 
 
130
 
        <div class="yui3-u-1-4">
131
 
            <div class="sidebar">
132
 
                
133
 
                    <div id="toc" class="sidebox">
134
 
                        <div class="hd">
135
 
                            <h2 class="no-toc">Table of Contents</h2>
136
 
                        </div>
137
 
 
138
 
                        <div class="bd">
139
 
                            <ul class="toc">
140
 
<li>
141
 
<a href="#setting-up-the-node">Setting up the Node</a>
142
 
</li>
143
 
<li>
144
 
<a href="#setting-up-the-yui-instance">Setting up the YUI Instance</a>
145
 
</li>
146
 
<li>
147
 
<a href="#making-the-node-resizable">Making the Node resizable</a>
148
 
</li>
149
 
<li>
150
 
<a href="#adding-the-constrained-plugin">Adding the Constrained Plugin</a>
151
 
</li>
152
 
</ul>
153
 
                        </div>
154
 
                    </div>
155
 
                
156
 
 
157
 
                
158
 
                    <div class="sidebox">
159
 
                        <div class="hd">
160
 
                            <h2 class="no-toc">Examples</h2>
161
 
                        </div>
162
 
 
163
 
                        <div class="bd">
164
 
                            <ul class="examples">
165
 
                                
166
 
                                    
167
 
                                        <li data-description="Resize a node.">
168
 
                                            <a href="simple-resize.html">Simple Resize</a>
169
 
                                        </li>
170
 
                                    
171
 
                                
172
 
                                    
173
 
                                        <li data-description="A simple resize implementation that utilizes the ResizeConstrained plugin to set min/max dimensions and to lock in the resized element&#x27;s aspect ratio.">
174
 
                                            <a href="constrain-resize.html">Constrain a Resize</a>
175
 
                                        </li>
176
 
                                    
177
 
                                
178
 
                                    
179
 
                                        <li data-description="This example shows an 8-way image resize, providing the CSS needed for a common image-resize visual treatment.">
180
 
                                            <a href="image-resize.html">8-way Image Resize</a>
181
 
                                        </li>
182
 
                                    
183
 
                                
184
 
                                    
185
 
                                        <li data-description="Plugs a widget with resize functionality.">
186
 
                                            <a href="simple-resize-plugin.html">Widget with simple Resize Plugin</a>
187
 
                                        </li>
188
 
                                    
189
 
                                
190
 
                                    
191
 
                                        <li data-description="Plugs a widget with resize functionality, and implements ResizeConstrained">
192
 
                                            <a href="constrain-resize-plugin.html">Widget with Resize Plugin under constraints</a>
193
 
                                        </li>
194
 
                                    
195
 
                                
196
 
                            </ul>
197
 
                        </div>
198
 
                    </div>
199
 
                
200
 
 
201
 
                
202
 
            </div>
203
 
        </div>
204
 
    </div>
205
 
</div>
206
 
 
207
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
208
 
<script>prettyPrint();</script>
209
 
 
210
 
</body>
211
 
</html>