ARTICLE

jQuery Splitter

Posted by Shinuraj Articles | JQuery February 03, 2011
A light weight splitter using jQuery that I used in one of my applications. Thought to share the same to you all.
Reader Level:
Download Files:
 


Here is one light weight splitter using jQuery that I used in one of my applications. Thought to share the same to you all.

jQuery.splitter() plug-in implements a two-pane resizable animated window, using existing DIV elements for layout.

Example 1

$("#splitterContainer").splitter({splitVertical:true,A:$('#leftPane'),B:$('#rightPane'),closeableto:0});

This will create a vertical splitter with toggle button

Example 2

$("#splitterContainer").splitter({minAsize:100,maxAsize:300,splitVertical:true,A:$('#leftPane'),B:$('#rightPane'),
slave:$("#rightSplitterContainer"),closeableto:0});


This will create a vertical splitter with toggle button, with minimum and maximum width for plane A and bind resize event to the slave element.

Add this script in the Head section :

<head>
<
script type="text/javascript">

    $(document).ready(function () {
        $("#splitterContainer").splitter({ minAsize: 100, maxAsize: 300, splitVertical: true, A: $('#leftPane'), B: $('#rightPane'), slave: $("#rightSplitterContainer"), closeableto: 0 });
        $("#rightSplitterContainer").splitter({ splitHorizontal: true, A: $('#rightTopPane'), B: $('#rightBottomPane'), closeableto: 100 });
    });
</script>
</
head>

Here is the HTML used:

<body>
<div id="splitterContainer">
<div id="leftPane">
<p>This pane limited to a range of 100 to 300 pixels wide with the minAsize / maxAsize
properties of the plugin..</p
>
<p>&nbsp;</p>
</div>
<!-- #leftPane -->
<div id="rightPane">
<div style="height:5%;background:#bac8dc">Toolbar?</div>
<div id="rightSplitterContainer" style="height:95%">
<div id="rightTopPane"><p>testing</p> </div>
<!-- #rightTopPane-->
<div id="rightBottomPane">
<div><p>some content</p></div>
</div>
<!-- #rightBottomPane--></div>
<!-- #rightSplitterContainer--></div>
<!-- #rightPane --></div>
<!-- #splitterContainer -->
</body>

You can download the working sample application attached here.

COMMENT USING

Trending up