index.mustache revision 046ea4d1ee0f22d956cd360e1e0c0b275aa4bbd0
35d039da10970deb9abb779286f19907ec86350cDav Glass<div class="intro">
35d039da10970deb9abb779286f19907ec86350cDav Glass<p>The Resize Utility allows you to make an HTML element resizable.</p>
35d039da10970deb9abb779286f19907ec86350cDav Glass{{>getting-started}}
046ea4d1ee0f22d956cd360e1e0c0b275aa4bbd0Dav Glass<h2 id="simple">Simple Resize</h2>
35d039da10970deb9abb779286f19907ec86350cDav Glass<p>You can create a simple Resize instance by including the `resize` module or `base-resize` submodule and using the following code:</p>
35d039da10970deb9abb779286f19907ec86350cDav GlassYUI().use('resize', function(Y) {
35d039da10970deb9abb779286f19907ec86350cDav Glass var resize = new Y.Resize({
35d039da10970deb9abb779286f19907ec86350cDav Glass //Selector of the node to resize
35d039da10970deb9abb779286f19907ec86350cDav Glass node: '#demo'
046ea4d1ee0f22d956cd360e1e0c0b275aa4bbd0Dav Glass<h2 id="events">Events</h2>
35d039da10970deb9abb779286f19907ec86350cDav Glass<p>Resize provides useful events to allow the implementer to control the end-user experience.</p>
35d039da10970deb9abb779286f19907ec86350cDav Glass <th>Event</th>
35d039da10970deb9abb779286f19907ec86350cDav Glass <th>Preventable</th>
35d039da10970deb9abb779286f19907ec86350cDav Glass <th>Stoppable</th>
35d039da10970deb9abb779286f19907ec86350cDav Glass <th>Bubbles</th>
35d039da10970deb9abb779286f19907ec86350cDav Glass <th>Description</th>
35d039da10970deb9abb779286f19907ec86350cDav Glass <td>`resize:start`</td>
35d039da10970deb9abb779286f19907ec86350cDav Glass <td>yes</td>
35d039da10970deb9abb779286f19907ec86350cDav Glass <td>yes</td>
35d039da10970deb9abb779286f19907ec86350cDav Glass <td>yes</td>
35d039da10970deb9abb779286f19907ec86350cDav Glass <td>Handles the resize start event. Fired when the user begins dragging a handle.</td>
35d039da10970deb9abb779286f19907ec86350cDav Glass <td>`resize:resize`</td>
35d039da10970deb9abb779286f19907ec86350cDav Glass <td>yes</td>
35d039da10970deb9abb779286f19907ec86350cDav Glass <td>yes</td>
35d039da10970deb9abb779286f19907ec86350cDav Glass <td>yes</td>
35d039da10970deb9abb779286f19907ec86350cDav Glass <td>Handles the resize event. Fired with every native `mousemove` event when the handle is being dragged; this could be as often as once for every pixel of movement.</td>
35d039da10970deb9abb779286f19907ec86350cDav Glass <td>`resize:align`</td>
35d039da10970deb9abb779286f19907ec86350cDav Glass <td>yes</td>
35d039da10970deb9abb779286f19907ec86350cDav Glass <td>yes</td>
35d039da10970deb9abb779286f19907ec86350cDav Glass <td>yes</td>
35d039da10970deb9abb779286f19907ec86350cDav Glass <td>Handles the resize align event.</td>
35d039da10970deb9abb779286f19907ec86350cDav Glass <td>`resize:end`</td>
35d039da10970deb9abb779286f19907ec86350cDav Glass <td>yes</td>
35d039da10970deb9abb779286f19907ec86350cDav Glass <td>yes</td>
35d039da10970deb9abb779286f19907ec86350cDav Glass <td>yes</td>
35d039da10970deb9abb779286f19907ec86350cDav Glass <td>Handles the resize end event. Fired when the user releases the handle from the drag operation.</td>
35d039da10970deb9abb779286f19907ec86350cDav Glass <td>`resize:mouseUp`</td>
35d039da10970deb9abb779286f19907ec86350cDav Glass <td>yes</td>
35d039da10970deb9abb779286f19907ec86350cDav Glass <td>yes</td>
35d039da10970deb9abb779286f19907ec86350cDav Glass <td>yes</td>
35d039da10970deb9abb779286f19907ec86350cDav Glass <td>Handles the resize `mouseup` event. Fired when a `mouseup` event happens on a handle.</td>
046ea4d1ee0f22d956cd360e1e0c0b275aa4bbd0Dav Glass<h2 id="modules">Module Descriptions</h2>
35d039da10970deb9abb779286f19907ec86350cDav Glass<p>Resize for YUI 3 has been broken up into several modules to allow you, as the implementer, to target the specific functionality you want — and omit the functionality you're not using.</p>
35d039da10970deb9abb779286f19907ec86350cDav Glass <th>Module Name</th>
35d039da10970deb9abb779286f19907ec86350cDav Glass <th>Description</th>
35d039da10970deb9abb779286f19907ec86350cDav Glass <td nowrap="nowrap">`resize-base`</td>
35d039da10970deb9abb779286f19907ec86350cDav Glass <td>This is the base Resize class; use this submodule for your simplest use case, where constraints, ratios, and proxies are not required.</td>
35d039da10970deb9abb779286f19907ec86350cDav Glass <td nowrap="nowrap">`resize-constrain`</td>
35d039da10970deb9abb779286f19907ec86350cDav Glass <td>Adds constraining & ratio support.</td>
35d039da10970deb9abb779286f19907ec86350cDav Glass <td nowrap="nowrap">`resize-proxy`</td>
35d039da10970deb9abb779286f19907ec86350cDav Glass <td>Adds proxy support, via `dd-proxy`.</td>
046ea4d1ee0f22d956cd360e1e0c0b275aa4bbd0Dav Glass<h2 id="resize-plugins">Resize Plugin for Widgets</h2>
e1f06d991f359a17d51ffceed889ebd88e800fadTilo Mitra<p>Along with the standalone utility, a Resize plugin is available and can be plugged into Y.Node or Y.Widget instances. The plugin can be created by adding `resize-plugin` in your use statement, and then plugging in `Y.Plugin.Resize`.</p>
e1f06d991f359a17d51ffceed889ebd88e800fadTilo MitraYUI().use('overlay', 'resize-plugin', function(Y) {
e1f06d991f359a17d51ffceed889ebd88e800fadTilo Mitra var overlay = new Y.Overlay({
e1f06d991f359a17d51ffceed889ebd88e800fadTilo Mitra width: "200px",
e1f06d991f359a17d51ffceed889ebd88e800fadTilo Mitra height: "300px",
e1f06d991f359a17d51ffceed889ebd88e800fadTilo Mitra srcNode: "#overlay",
e1f06d991f359a17d51ffceed889ebd88e800fadTilo Mitra visible: "true",
e1f06d991f359a17d51ffceed889ebd88e800fadTilo Mitra centered: "true"
e1f06d991f359a17d51ffceed889ebd88e800fadTilo Mitra //Plug in the resizability plugin
046ea4d1ee0f22d956cd360e1e0c0b275aa4bbd0Dav Glass<h3>Listening to events on a widget</h3>
e1f06d991f359a17d51ffceed889ebd88e800fadTilo Mitra<p>With the resize plugin being plugged into a Y.Widget instance, resize events can be listened to under the `resize` namespace. The resize plugin will automatically change `width` and `height` attributes on the widget (and the `x` , `y` attributes if your widget uses `Y.WidgetPosition`).</p>
e1f06d991f359a17d51ffceed889ebd88e800fadTilo MitraYUI().use('overlay', 'resize-plugin', function(Y) {
e1f06d991f359a17d51ffceed889ebd88e800fadTilo Mitra overlay.resize.on('resize:resize', function(event) {
e1f06d991f359a17d51ffceed889ebd88e800fadTilo Mitra //this function will be called on resize.