185 lines
No EOL
7.4 KiB
HTML
185 lines
No EOL
7.4 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
|
<title>YUI Container - ResizePanel: Creating a Resizable Panel (YUI Library)</title>
|
|
|
|
<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../../examples/assets/dpSyntaxHighlighter.css">
|
|
<link type="text/css" rel="stylesheet" href="../assets/style.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="doc3" class="yui-t5">
|
|
<div id="hd">
|
|
<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
|
|
<h1>YUI Container: ResizePanel: Creating a Resizable Panel</h1>
|
|
</div>
|
|
|
|
<div id="bd">
|
|
|
|
<div id="toc" class="yui-b">
|
|
<ul>
|
|
<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
|
|
|
|
<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
|
|
<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
|
|
<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
|
|
<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
|
|
<li class="item"><a href="../panel/1.html">Panel: Quickstart</a></li>
|
|
<li class="item"><a href="../skin/1.html">Panel: Skinning</a></li>
|
|
<li class="item"><a href="../panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
|
|
<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
|
|
<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
|
|
<li class="item selected"><a href="1.html">ResizePanel: Creating a Resizable Panel</a></li>
|
|
<li class="child active"><a href="1.html">Subclassing Panel to Create ResizePanel</a></li>
|
|
<li class="child"><a href="2.html">Functional Example</a></li>
|
|
<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
|
|
<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</a></li>
|
|
<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
|
|
<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
|
|
<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
|
|
</ul>
|
|
</div>
|
|
<div id="yui-main">
|
|
<div class="yui-b">
|
|
<h1 class="first">Subclassing Panel to Create ResizePanel</h1>
|
|
|
|
<p>In this tutorial, we will build a subclass for Panel called ResizePanel that will allow the Panel to be resized using a draggable handle in the bottom-right corner of the footer.</p>
|
|
|
|
<p>The first step to subclassing the Panel is writing the constructor for the new subclass (ResizePanel, in this case) and specifying its inheritance from the Panel class using <em>YAHOO.extend</em>:</p>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
YAHOO.namespace("example.container");
|
|
|
|
// BEGIN RESIZEPANEL SUBCLASS //
|
|
YAHOO.widget.ResizePanel = function(el, userConfig) {
|
|
if (arguments.length > 0) {
|
|
YAHOO.widget.ResizePanel.superclass.constructor.call(this, el, userConfig);
|
|
}
|
|
}
|
|
|
|
YAHOO.extend(YAHOO.widget.ResizePanel, YAHOO.widget.Panel);
|
|
</textarea>
|
|
|
|
<p>Next, we will define a few constants for use by the ResizePanel class: "CSS_PANEL_RESIZE", which defines the CSS class to apply to the Panel, and "CSS_RESIZE_HANDLE", the CSS class to apply to the resize handler.</p>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
|
|
YAHOO.widget.ResizePanel.CSS_PANEL_RESIZE = "resizepanel";
|
|
|
|
YAHOO.widget.ResizePanel.CSS_RESIZE_HANDLE = "resizehandle";
|
|
|
|
</textarea>
|
|
|
|
<p>Next, the initialization method for the ResizePanel is defined. The first step the initialization must perform is to call the superclass's <em>init</em> method so that the superclasses can initialize first. After that, take the following steps:</p>
|
|
<ol>
|
|
<li>We fire the <em>beforeInitEvent</em> and add the CSS class to the Panel;</li>
|
|
<li>We create the element that will serve as the resize handle in the footer;</li>
|
|
<li>We make sure that the footer is set to blank text if no footer is specified by render time, since a footer is required in order for the ResizePanel to function properly.</li>
|
|
<li>Finally, we subscribe a function to the Panel's <em>renderEvent</em> wherein we'll configure the resize handle's Drag and Drop instance (instance of <a href="http://developer.yahoo.com/yui/docs/dragdrop/YAHOO.util.DragDrop.html">YAHOO.util.DragDrop</a>). The resize is achieved by calculating the difference in position between the handle's start point and end point.</li>
|
|
</ol>
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
YAHOO.widget.ResizePanel.prototype.init = function(el, userConfig) {
|
|
YAHOO.widget.ResizePanel.superclass.init.call(this, el);
|
|
this.beforeInitEvent.fire(YAHOO.widget.ResizePanel);
|
|
|
|
YAHOO.util.Dom.addClass(this.innerElement, YAHOO.widget.ResizePanel.CSS_PANEL_RESIZE);
|
|
|
|
this.resizeHandle = document.createElement("div");
|
|
this.resizeHandle.id = this.id + "_r";
|
|
this.resizeHandle.className = YAHOO.widget.ResizePanel.CSS_RESIZE_HANDLE;
|
|
|
|
this.beforeRenderEvent.subscribe(function() {
|
|
if (! this.footer) {
|
|
this.setFooter("");
|
|
}
|
|
},
|
|
this, true
|
|
);
|
|
|
|
this.renderEvent.subscribe(function() {
|
|
var me = this;
|
|
|
|
me.innerElement.appendChild(me.resizeHandle);
|
|
|
|
this.ddResize = new YAHOO.util.DragDrop(this.resizeHandle.id, this.id);
|
|
this.ddResize.setHandleElId(this.resizeHandle.id);
|
|
|
|
var headerHeight = me.header.offsetHeight;
|
|
|
|
this.ddResize.onMouseDown = function(e) {
|
|
|
|
this.startWidth = me.innerElement.offsetWidth;
|
|
this.startHeight = me.innerElement.offsetHeight;
|
|
|
|
me.cfg.setProperty("width", this.startWidth + "px");
|
|
me.cfg.setProperty("height", this.startHeight + "px");
|
|
|
|
this.startPos = [YAHOO.util.Event.getPageX(e),
|
|
YAHOO.util.Event.getPageY(e)];
|
|
|
|
me.innerElement.style.overflow = "hidden";
|
|
me.body.style.overflow = "auto";
|
|
}
|
|
|
|
this.ddResize.onDrag = function(e) {
|
|
var newPos = [YAHOO.util.Event.getPageX(e),
|
|
YAHOO.util.Event.getPageY(e)];
|
|
|
|
var offsetX = newPos[0] - this.startPos[0];
|
|
var offsetY = newPos[1] - this.startPos[1];
|
|
|
|
var newWidth = Math.max(this.startWidth + offsetX, 10);
|
|
var newHeight = Math.max(this.startHeight + offsetY, 10);
|
|
|
|
me.cfg.setProperty("width", newWidth + "px");
|
|
me.cfg.setProperty("height", newHeight + "px");
|
|
|
|
var bodyHeight = (newHeight - 5 - me.footer.offsetHeight - me.header.offsetHeight - 3);
|
|
if (bodyHeight < 0) {
|
|
bodyHeight = 0;
|
|
}
|
|
|
|
me.body.style.height = bodyHeight + "px";
|
|
|
|
var innerHeight = me.innerElement.offsetHeight;
|
|
var innerWidth = me.innerElement.offsetWidth;
|
|
|
|
if (innerHeight < headerHeight) {
|
|
me.innerElement.style.height = headerHeight + "px";
|
|
}
|
|
|
|
if (innerWidth < 20) {
|
|
me.innerElement.style.width = "20px";
|
|
}
|
|
}
|
|
|
|
}, this, true);
|
|
|
|
if (userConfig) {
|
|
this.cfg.applyConfig(userConfig, true);
|
|
}
|
|
|
|
this.initEvent.fire(YAHOO.widget.ResizePanel);
|
|
};
|
|
</textarea>
|
|
<div id="stepnav">
|
|
<a class="next" href="2.html">Continue to <em>Functional Example</em> ></a> </div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="ft"> </div>
|
|
</div>
|
|
|
|
<script src="../../../examples/assets/dpSyntaxHighlighter.js"></script>
|
|
<script language="javascript">
|
|
dp.SyntaxHighlighter.HighlightAll('code');
|
|
</script>
|
|
|
|
</body>
|
|
</html> |