Resize Node Plugin

Introduction

This example shows using the Resize Node Plugin. Grab your node and plugin the resize!

It's not a direct port of the YUI2.x version, but it does retain the config and methods of 2.x, so the documentation and examples here and the API here will be helpful.

There is one exception: wrappers. This plugin does not wrap elements for you that need it, like images or textareas. There's a good reason for this, and you can still resize these elements. See this example for discussion and a demo.

This uses drag drop, and plugs in a dd instance into the node, so most events come from the default plugin infrastructure or the drag-drop. But I might want to add some more at some point.

Simple example

This element is resizeable, with default options.
If I said I lived in one of the 50 United States in my heart would it count?

Once you've got the js on the page, getting a simple resize should be as easy as: YUI().use( "*" , function( Y ) { Y.get( "#demo" ).plug( Y.Plugin.Resize ); } ); This will give the same defaults as the YUI2.x versions. The css used is also the same (I did just copy that), but uses yui3- prefixes instead of yui-.

Config options

Config options are also the same as in YUI2.x, so you can pass an object as the second argument to plug to change the behaviour of the resize:

This Javascript was brought to you by the United Kingdom.
We're sorry we won't be seeing you at JSConf...


     
      // This will also make it draggable, zany handles, animate the final 
      // repositioning, and show a status element showing size
      Y.get( "#demo2" ).plug( Y.Plugin.Resize, 
                             { draggable: true, 
                               handles: ["tr", "b", "l"],
                               animate: true,
                               status: true } );