Example: Widget with simple Resize Plugin

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.

Full Source

YUI().use('overlay', 'resize-plugin', 'dd-plugin', function(Y) {
 var overlay = new Y.Overlay({
 width: "200px",
 srcNode: "#overlay",
 visible: false,
 zIndex:5,
 align: {node:".example", points:["tc", "bc"]}
 }),
 launchBtn = Y.one('#launchOverlay'),
 resizeBtn = Y.one("#resizeOverlay"),
 dragBtn = Y.one('#dragOverlay');
 overlay.render();
 launchBtn.on('click', function(e) {
 overlay.set('visible', true);
 this.set('disabled', true);
 resizeBtn.set('disabled', false);
 dragBtn.set('disabled', false);
 });
 resizeBtn.on('click', function(e) {
 overlay.plug(Y.Plugin.Resize);
 this.set('value', 'Overlay is now resizable!');
 this.set('disabled', true);
 });
 dragBtn.on('click', function(e) {
 overlay.plug(Y.Plugin.Drag);
 this.set('value', 'Overlay is now draggable!');
 this.set('disabled', true);
 });
});