Print Friendly

# Class YAHOO.ext.SplitBar

Package: | YAHOO.ext
Class: | SplitBar
Extends: | Observable
Defined In: | SplitBar.js

Creates draggable splitter bar functionality from two elements.
Usage:

    var split = new YAHOO.ext.SplitBar('elementToDrag', 'elementToSize',
                       YAHOO.ext.SplitBar.HORIZONTAL, YAHOO.ext.SplitBar.LEFT);
    split.setAdapter(new YAHOO.ext.SplitBar.AbsoluteLayoutAdapter("container"));
    split.minSize = 100;
    split.maxSize = 600;
    split.animate = true;
    split.onMoved.subscribe(splitterMoved);

## Public Properties

Property | Defined By
--- | ---
| animate : Boolean | SplitBar
Whether to animate the transition to the new size
| maxSize : Number | SplitBar
The maximum size of the resizing element. (Defaults to 2000)
| minSize : Number | SplitBar
The minimum size of the resizing element. (Defaults to 0)
| useShim : Boolean | SplitBar
Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.

## Public Methods

Method | Defined By
--- | ---
| SplitBar(`String/HTMLElement/Element dragElement`, `String/HTMLElement/Element resizingElement`, [`Number orientation`], [`Number placement`]) | SplitBar
Create a new SplitBar
| addListener(`String eventName`, `Function handler`, [`Object scope`], [`boolean override`]) : void | Observable
Appends an event handler to this component
| bufferedListener(`String eventName`, `Function handler`, [`Object scope`], [`Number millis`]) : Function | Observable
Appends an event handler to this component that is buffered. If the event is triggered more than once in the specifie...
| delayedListener(`String eventName`, `Function handler`, [`Object scope`], [`Number delay`]) : Function | Observable
Appends an event handler to this component that is delayed the specified number of milliseconds. This is useful for e...
| destroy(`Boolean removeEl`) : void | SplitBar
Destroy this splitbar.
| fireEvent(`String eventName`, `Object... args`) : Boolean | Observable
Fires the specified event with the passed parameters (minus the event name).
| getAdapter() : The | SplitBar
Get the adapter this SplitBar uses
| getMaximumSize() : Number | SplitBar
Gets the maximum size for the resizing element
| getMinimumSize() : Number | SplitBar
Gets the minimum size for the resizing element
| on(`String eventName`, `Function handler`, [`Object scope`], [`boolean override`]) : void | Observable
Appends an event handler to this element (shorthand for addListener)
| purgeListeners() : void | Observable
Removes all listeners for this object
| removeListener(`String eventName`, `Function handler`, [`Object scope`]) : void | Observable
Removes a listener
| setAdapter(`Object adapter`) : void | SplitBar
Set the adapter this SplitBar uses
| setCurrentSize(`Number size`) : void | SplitBar
Sets the initialize size for the resizing element
| setMaximumSize(`Number maxSize`) : void | SplitBar
Sets the maximum size for the resizing element
| setMinimumSize(`Number minSize`) : void | SplitBar
Sets the minimum size for the resizing element

## Public Events

Event | Defined By
--- | ---
| beforeresize : (`YAHOO.ext.SplitBar this`) | SplitBar
Fires before the splitter is dragged
| moved : (`YAHOO.ext.SplitBar this`, `Number newSize`) | SplitBar
Fires when the splitter is moved
| resize : (`YAHOO.ext.SplitBar this`, `Number newSize`) | SplitBar
Fires when the splitter is moved (alias for moved)

## Property Details

### animate

`public Boolean animate`
Whether to animate the transition to the new size
This property is defined by SplitBar.

### maxSize

`public Number maxSize`
The maximum size of the resizing element. (Defaults to 2000)
This property is defined by SplitBar.

### minSize

`public Number minSize`
The minimum size of the resizing element. (Defaults to 0)
This property is defined by SplitBar.

### useShim

`public Boolean useShim`
Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.
This property is defined by SplitBar.

## Constructor Details

### SplitBar

`public function SplitBar(`String/HTMLElement/Element dragElement`, `String/HTMLElement/Element resizingElement`, [`Number orientation`], [`Number placement`])`
Create a new SplitBar
Parameters:

- `dragElement` : String/HTMLElement/Element
  The element to be dragged and act as the SplitBar.
- `resizingElement` : String/HTMLElement/Element
  The element to be resized based on where the SplitBar element is dragged
- `orientation` : Number
  (optional) Either YAHOO.ext.SplitBar.HORIZONTAL or YAHOO.ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
- `placement` : Number
  (optional) Either YAHOO.ext.SplitBar.LEFT or YAHOO.ext.SplitBar.RIGHT for horizontal or YAHOO.ext.SplitBar.TOP or YAHOO.ext.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the intial position position of the SplitBar).

## Method Details

### addListener

`public function addListener(`String eventName`, `Function handler`, [`Object scope`], [`boolean override`])`
Appends an event handler to this component
Parameters:

- `eventName` : String
  The type of event to listen for
- `handler` : Function
  The method the event invokes
- `scope` : Object
  (optional) The scope (this object) for the handler
- `override` : boolean
  (optional) If true, scope becomes the scope

Returns:

- `void`

This method is defined by Observable.

### bufferedListener

`public function bufferedListener(`String eventName`, `Function handler`, [`Object scope`], [`Number millis`])`
Appends an event handler to this component that is buffered. If the event is triggered more than once in the specified time-frame, only the last one actually fires.
Parameters:

- `eventName` : String
  The type of event to listen for
- `handler` : Function
  The method the event invokes
- `scope` : Object
  (optional) The scope (this object) for the handler
- `millis` : Number
  (optional) The number of milliseconds to buffer (defaults to 250)

Returns:

- `Function`
  The wrapped function that was created (can be used to remove the listener)

This method is defined by Observable.

### delayedListener

`public function delayedListener(`String eventName`, `Function handler`, [`Object scope`], [`Number delay`])`
Appends an event handler to this component that is delayed the specified number of milliseconds. This is useful for events that modify the DOM and need to wait for the browser to catch up.
Parameters:

- `eventName` : String
  The type of event to listen for
- `handler` : Function
  The method the event invokes
- `scope` : Object
  (optional) The scope (this object) for the handler
- `delay` : Number
  (optional) The number of milliseconds to delay (defaults to 1 millisecond)

Returns:

- `Function`
  The wrapped function that was created (can be used to remove the listener)

This method is defined by Observable.

### destroy

`public function destroy(`Boolean removeEl`)`
Destroy this splitbar.
Parameters:

- `removeEl` : Boolean
  True to remove the element

Returns:

- `void`

This method is defined by SplitBar.

### fireEvent

`public function fireEvent(`String eventName`, `Object... args`)`
Fires the specified event with the passed parameters (minus the event name).
Parameters:

- `eventName` : String
- `args` : Object...
  Variable number of parameters are passed to handlers

Returns:

- `Boolean`
  returns false if any of the handlers return false otherwise it returns true

This method is defined by Observable.

### getAdapter

`public function getAdapter()`
Get the adapter this SplitBar uses
Parameters:

- None.

Returns:

- `The`
  adapter object

This method is defined by SplitBar.

### getMaximumSize

`public function getMaximumSize()`
Gets the maximum size for the resizing element
Parameters:

- None.

Returns:

- `Number`
  The maximum size

This method is defined by SplitBar.

### getMinimumSize

`public function getMinimumSize()`
Gets the minimum size for the resizing element
Parameters:

- None.

Returns:

- `Number`
  The minimum size

This method is defined by SplitBar.

### on

`public function on(`String eventName`, `Function handler`, [`Object scope`], [`boolean override`])`
Appends an event handler to this element (shorthand for addListener)
Parameters:

- `eventName` : String
  The type of event to listen for
- `handler` : Function
  The method the event invokes
- `scope` : Object
  (optional) The scope (this object) for the handler
- `override` : boolean
  (optional) If true, scope becomes the scope

Returns:

- `void`

This method is defined by Observable.

### purgeListeners

`public function purgeListeners()`
Removes all listeners for this object
Parameters:

- None.

Returns:

- `void`

This method is defined by Observable.

### removeListener

`public function removeListener(`String eventName`, `Function handler`, [`Object scope`])`
Removes a listener
Parameters:

- `eventName` : String
  The type of event to listen for
- `handler` : Function
  The handler to remove
- `scope` : Object
  (optional) The scope (this object) for the handler

Returns:

- `void`

This method is defined by Observable.

### setAdapter

`public function setAdapter(`Object adapter`)`
Set the adapter this SplitBar uses
Parameters:

- `adapter` : Object
  A SplitBar adapter object

Returns:

- `void`

This method is defined by SplitBar.

### setCurrentSize

`public function setCurrentSize(`Number size`)`
Sets the initialize size for the resizing element
Parameters:

- `size` : Number
  The initial size

Returns:

- `void`

This method is defined by SplitBar.

### setMaximumSize

`public function setMaximumSize(`Number maxSize`)`
Sets the maximum size for the resizing element
Parameters:

- `maxSize` : Number
  The maximum size

Returns:

- `void`

This method is defined by SplitBar.

### setMinimumSize

`public function setMinimumSize(`Number minSize`)`
Sets the minimum size for the resizing element
Parameters:

- `minSize` : Number
  The minimum size

Returns:

- `void`

This method is defined by SplitBar.

## Event Details

### beforeresize

`public event beforeresize`
Fires before the splitter is dragged
Subscribers will be called with the following parameters:

- `this` : YAHOO.ext.SplitBar

This event is defined by SplitBar.

### moved

`public event moved`
Fires when the splitter is moved
Subscribers will be called with the following parameters:

- `this` : YAHOO.ext.SplitBar
- `newSize` : Number
  the new width or height

This event is defined by SplitBar.

### resize

`public event resize`
Fires when the splitter is moved (alias for moved)
Subscribers will be called with the following parameters:

- `this` : YAHOO.ext.SplitBar
- `newSize` : Number
  the new width or height

This event is defined by SplitBar.

yui-ext - Copyright © 2006 Jack Slocum. | Yahoo! UI - Copyright © 2006 Yahoo! Inc.
All rights reserved.