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 element
| delayedListener(`String eventName`, `Function handler`, [`Object scope`], [`Number delay`]) : Function | Observable
Appends an event handler to this element that is delayed the specified number of milliseconds.
| 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
| 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 element
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.

### delayedListener

`public function delayedListener(`String eventName`, `Function handler`, [`Object scope`], [`Number delay`])`
Appends an event handler to this element that is delayed the specified number of milliseconds.
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

Returns:

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

This method is defined by Observable.

### 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.

### 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.

Copyright © 2006 Jack Slocum. All rights reserved.