Home » jQuery » jQuery Splitter

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

  • jQuery – Date PickerjQuery – Date Picker Today we’ll start taking a look at the final control in the jQuery UI suite.  The Date Picker. This control, as with all the other controls we’ve looked at, is relatively simple […]
  • jQuery Dialog – With Validation ControlsjQuery Dialog – With Validation Controls Chances are, you’ll eventually want to use a dialog box in combination with some form elements, and when you do, you’ll probably want to implement some validation. True, there are some […]
  • jQuery, JSON, and ASP.NETjQuery, JSON, and ASP.NET A few months ago, I demonstrated how to use ASP.NET's JSON capabilities.  Lately, I've been demonstrating how to use jQuery.  Both use a considerable amount of JavaScript so if there is […]
  • jQuery – Retrieving HTML FragmentsjQuery – Retrieving HTML Fragments A couple of weeks ago I mentioned that I had built a tooltip using jQuery.  We focused mostly on the positioning of the tooltip at the time because, historically, that's where most of the […]
  • jQuery ProgressbarjQuery Progressbar Once you venture into the land of AJAX you’ll soon discover the need to let your user know that some work is taking place in the background.  If you can, you’ll want to let them know […]

About Dave Bush

Dave Bush is a Full Stack ASP.NET developer focusing on ASP.NET, C#, Node.js, JavaScript, HTML, CSS, BootStrap, and Angular.JS.Does your team need additional help in any of the above? Contact Dave today.

One Pingback/Trackback