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);
    });
});