This example shows the simple use case where we make an overlay resizable.
Did you know that the YUI Team tweets regularly under the handle @yuilibrary?
You can also follow some team members directly: @allenr, @ls_n, @yaypie, @tilomitra, @reid and @davglass.
YUI 3 is Yahoo!'s next-generation JavaScript and CSS library. It powers the new Yahoo! homepage, Yahoo! Mail, and many other Yahoo! sites. The YUI 3 Library has been redesigned and rewritten from the ground up incorporating what we've learned in five years of dedicated library development. The library includes the core components, a full suite of utilities, the Widget Infrastructure, a growing collection of widgets, CSS resources, and tools.
Setting up the Node
First we create the HTML for an overlay along with the other content ont he page
<div id="overlay">
<p>Did you know that the YUI Team tweets regularly under the handle <a href="http://www.twitter.com/yuilibrary" alt="yuilibrary">@yuilibrary</a>?</p>
<p>You can also follow some team members directly: <a href="http://www.twitter.com/allenr" alt="Allen R.">@allenr</a>, <a href="http://www.twitter.com/ls_n" alt="Luke S.">@ls_n</a>, <a href="http://www.twitter.com/yaypie" alt="Ryan G.">@yaypie</a>, <a href="http://www.twitter.com/tilomitra" alt="Tilo M.">@tilomitra</a>, <a href="http://www.twitter.com/reid" alt="Reid B.">@reid</a> and <a href="http://www.twitter.com/davglass" alt="Dav G.">@davglass</a>.</p>
</div>
<p><strong>YUI 3 is Yahoo!'s next-generation JavaScript and CSS library.</strong> It powers the new Yahoo! homepage, Yahoo! Mail, and many other Yahoo! sites. The YUI 3 Library has been redesigned and rewritten from the ground up incorporating what we've learned in five years of dedicated library development. The library includes the core components, a full suite of utilities, the Widget Infrastructure, a growing collection of widgets, CSS resources, and tools. </p>
<p>
<input type='button' class=".exampleBtn" id='launchOverlay' value="Show Overlay">
<input type='button' class=".exampleBtn" id='resizeOverlay' value='Allow Resizing' disabled>
<input type='button' class=".exampleBtn" id='dragOverlay' value='Allow Dragging' disabled>
</p>
Next, we give that element some CSS to make it visible.
.example .yui3-overlay {
background:#161e31;
color:white;
padding:10px;
border-radius:3px;
box-shadow: 0px 0px 5px rgba(0,0,0,0.8);
overflow:hidden;
}
.example .yui3-overlay a {
text-decoration:none;
color: #30bef2;
}
.example .yui3-overlay a:hover {
color: #8cd7f2;
}
Setting up the YUI Instance
We need to create our YUI instance and tell it to load the resize-plugin module, along with the 'overlay' module; If we wanted the resize to be constrained, we would also need to include the 'resize-constrain' plugin.
YUI().use('resize-plugin');
Making the Widget Resizable
When the resizable button is pressed, we plug the Y.Overlay instance with Y.Plugin.Resize.
overlay.plug(Y.Plugin.Resize);
Upon instantiation, the widget's drag handles will appear and the element is resizable via drag-and-drop. The widget will be notified of x, y, width and height changes.