Resizable

Creates new resizables on the nodeset supplied by the query. Options will vary by framework. The following example assumes jQuery as the selected framework.

<style>
	.box
	{
		border:1px solid #ccc;
		width:400px;
		height:40px;
		background-color:#eee;
		margin:10px;
		padding:10px;
	}
	.resize
	{
		background-color:#ffffcc !important;
	}
	.resize_border
	{
		border:1px solid #ff0000;
	}
</style>
 
<div behavior="resizable[ghost=true, animate=true]" class="box">
	Resize (ghost true,animate true)
</div>
 
<div behavior="resizable[knobHandles=true]"  class="box">
	Resize  (knobHandles true)
</div>
 
<div behavior="resizable" class="box"
	on="resizestart then add[class=resize] or resizeend then remove[class=resize]">
	Resize  (turn yellow while resize, normal on stop)
</div>
 
<div behavior="resizable" class="box"
	on="resize then add[class=resize_border]">
	Resize  (border turns red - stays red)
</div>
 
<div id="js_resize" behavior="resizable[start=expr(resizeStart),stop=expr(resizeStop)]" class="box">
	JS callback for start and stop (red border on/off)
</div>
 
<div class="box" id="resize">
	Created via API
</div>
 
<script>
	App.addBehavior('resize','resizable',{},null);
 
	function resizeStart()
	{
		swiss('#js_resize').addClass('resize_border')
	}
	function resizeStop()
	{
		swiss('#js_resize').removeClass('resize_border')
	}
</script>