wijsplitter

Create a professional and polished website with the help of the wijsplitter widget. wijsplitter is a container widget featuring a movable and collapsible bar that divides a container's display area into two resizable panels. Splitters are able to be nested indefinitely, providing you infinite possibilities in Web interface design.

To create a simple, unnested wijsplitter widget, add the following markup – which will be used to create a wijsplitter and two panels - to the .cshtml view that you would like the widget to appear on:

<div id="splitter">
   <div>Panel1</div>
   <div>Panel2</div>    
</div>

You can also add a little CSS styling to the splitter. In this example, you specify the width and height of a splitter:

<style type="text/css">
            #splitter
            {
                height: 200px;
                width: 200px;
            }
</style>

Now you need to initialize the widget, which you can do by adding the following script to the .cshtml file:

<script id="scriptInit" type="text/javascript">

$(document).ready(function () {

$("#splitter").wijsplitter({ orientation: "vertical" });

});

</script>

Note that you set the orientation property to 'vertical'. When you run the project, you'll see a two-paneled splitter control with its panels arranged side by side.

For more information about wijsplitter, click one of the external links to view our Wijmo wiki documentation: