.NET Answers

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.

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 Related Items:

Beginning ASP.NET 3.5: In C# and VB (Programmer to Programmer)This book is for anyone who wants to learn how to build rich and interactive web sites that run on the Microsoft platform. With the knowledge you gain... Read More >

Gilsson Universal 3-Way Car Cigarette Lighter Socket Splitter with USB Power Port for iPod Blackberry Smartphone GPSGilsson Technology USP3USB Universal 3-Way Cigarette Lighter Socket Adapter Splitter with an USB Power Charging Port. Perfect device to provide power to cell phones, GPS, DVD players, iPod, iPhone, Blackberry, games and other handheld CE devices.

jQuery Cookbook: Solutions & Examples for jQuery Developers (Animal Guide)

jQuery simplifies building rich, interactive web frontends. Getting started with this JavaScript library is easy, but it can take years to fully re... Read More >

Related Post

• jQuery and ASP.NET UpdatePanel
• Do you Need My Help?
• jQuery – Date Picker
• jQuery Dialog – With Validation Controls
• jQuery – Dialog

Bookmark to:

Hide Sites

One Response to “jQuery Splitter”