jQuery Splitter

land-015

Hey!  This is pretty cool.

I was just mentioning at the last jQuery presentation I did that there were some controls that were definitely missing from the jQuery UI suite of widgets–and then I found this.

This other guy named Dave has created it for us.

Here’s how we use it.

The first thing you’ll want to do is download and install the plugin into your js directory and include it on your page.  (You can get the plugin by following the link to Dave.)

<asp:Content ID="Content1"
  ContentPlaceHolderID="head" Runat="Server">
    <script src="js/splitter-1.5.js"
      type="text/javascript"></script>
</asp:Content>

You’ll also want to create your own js file that will be called by the page as we’ve discussed previously in this series.

To get a simple splitter to render on the page, you’ll need two DIV tags, one for the left (or top) and another for the right (or bottom).  You wrap those with another div tag to be the splitter’s container and that’s it.  The rest is jQuery.

<div id="splitThis">
<div>Left Content</div>
<div>Right Content</div>
</div>

Next, you’ll want some stylesheet information to control the size of the container, at the least.

#splitThis
{
    width:200px;
    height:200px;
    border: solid 1px black;
}

You’ll also want a class for the splitter.  The two classes that will be available are vsplitbar and hsplitbar (vertical and horizontal).  Since we are producing a left/right splitter, we will create a class for vsplitbar.

Now the jQuery to turn this into a splitter

$(function() {
    $("#splitThis").splitter();
});

Don’t forget to assign the ASP.NET theme to your page if you are using themes for your CSS or it will not render correctly.

And here’s the result.

image

Dave has a lot of other demos and some great documentation on how to use this control as well as great documentation on places it isn’t quite working yet.  Overall, it’s a great control and I recommend it to you.

 

Other post in jQuery

Related Post

One Response to “jQuery Splitter”

Leave a Reply

Comment Policy:

  • You must verify your comment by responding to the automated email that is sent to your email address. Unverified comments will never show.Leave a good comment that adds to the conversation and I'll leave your link in.
  • Leave me pure spam and I'll delete it.
  • Leave a general comment and I'll remove the link but keep the comment.

Notify me of followup comments via e-mail

Bear