diff --git a/demo.html b/demo.html index 9d1bae3..a7ad2ae 100644 --- a/demo.html +++ b/demo.html @@ -204,7 +204,7 @@
<div id="demoOne"> @@ -246,10 +246,12 @@#demoThreeB
style="color: #333333">: false}); $('#demoOneB').enhsplitter(); $('#demoThree').enhsplitter({handle: 'bar', position: 'bar', position: 150, lowerLimit: 0, upperLimit: 0, upperLimit: 150, fixed: true}); }); @@ -335,9 +337,11 @@Options
minSize
is an alias to set both leftMinSize
and rightMinSize
.minSize
is an alias to set both leftMinSize
and rightMinSize
.
+ topMinSize
and bottomMinSize
are internally an alias for
- leftMinSize
and rightMinSize
respectively.leftMinSize
and rightMinSize
respectively.
+
maxSize
is an alias to set both leftMaxSize
and rightMaxSize
.maxSize
is an alias to set both leftMaxSize
and rightMaxSize
.
+ topMaxSize
and bottomMaxSize
are internally an alias for
- leftMaxSize
and rightMaxSize
respectively.leftMaxSize
and rightMaxSize
respectively.
+
['default'|'block'|'largeblock'|'none'|<user-defined>]
+ ['default'|'bar'|'block'|'none'|<user-defined>]
Default: 'default'
@@ -394,7 +400,8 @@
'bar'
draws a narrow grey bar, as shown in the third example above.'block'
draws a wide grey block that fills the width of the splitter.'none'
hides the handle completely, disabling it. This effect is also achieved
- when setting {invisible: true}
; it is not necessary to set both.{invisible: true}
; it is not necessary to set both.
+
<user-defined>
- Identifier for any CSS class you create. By adding new
.splitter-handle-
classes (see the CSS file), you can create custom styles without
@@ -440,9 +447,11 @@ Specifies the height of the container.
+Any CSS value can be used; numbers with no suffix will be treated as pixel values.
+In the instance that the both the container and parent heights have not been specified, the CSS on the container will cause the height to become 0. If this happens, height will default to 10em. @@ -459,6 +468,7 @@
{invisible: true}
, also useful for increasing
the splitter size on mobile sites (for easier use on touch devices).
+
Any CSS value can be used; numbers with no suffix will be treated as pixel values.
@@ -470,6 +480,7 @@Default: $.noop
Event handler called when a user starts dragging a splitter.
+Parameters passed are the standard event handler data, and the .splitter_container object.
Default: $.noop
Event handler called when a user stops dragging a splitter.
+Parameters passed are the standard event handler data, and the .splitter_container object.
@@ -488,9 +500,91 @@Default: $.noop
Event handler called after a user moves a splitter.
+Parameters passed are the standard event handler data, and the .splitter_container object.
+ ++ These commands can be used on splitters which have already been created. + They will have no effect on non-splitter objects. Attempting to use a command on a jQuery object which is not + a jquery.enhsplitter object will simply create an splitter with default options. +
+.enhsplitter('move', [number (px)|string (px|%)])
+
+ + Changes the splitter position to the location specified (with range checks). +
+.enhsplitter('refresh')
+
+ + Forces a refresh of the container size and splitter location (with range checks). +
+.enhsplitter('reset')
+
+ + Resets the splitter location to it's starting position. +
+.enhsplitter('collapse')
+
+ + Collapses the splitter as if the collapse handle was clicked. +
+.enhsplitter('uncollapse')
+
+ + Returns the splitter to it's pre-collapsed position. +
+.enhsplitter('visible', [true|false])
+
+
+ Sets whether the splitter is visible or not. This is equivalent to (but opposite from) the
+ invisible
option, visually hiding the splitter but leaving it usable.
+
.enhsplitter('handle', ['default'|'bar'|'block'|'none'|<user-defined>])
+
+ Equivalent to the handle
option, changes the handle style on the fly.
.enhsplitter('destroy');
+
+ + Removes the splitter container, splitter panels, and splitter bar, returning the DOM to its previous layout. +
+