wijsplitter Step 2 of 3: Initializing the Widget

In the previous step, you added markup to add <div> elements where the vertical and horizontal splitters will appear. Now you can add the jQuery script to initialize the widget.

After the closing </div> tags you added in the previous step, enter the following jQuery script to initialize the wijsplitter widget:

<script id="scriptInit" type="text/javascript">
       $(document).ready(function () {
           $("#vsplitter").wijsplitter({ orientation: "vertical" });
           $("#hsplitter").wijsplitter({ orientation: "horizontal" });
       });
    </script>

Add some markup within the <body> tags to apply CSS styling to the splitter.

<style type="text/css">
        .splitterContainer
        {
            height: 210px;
        }
       
        #vsplitter, #hsplitter
        {
            width: 200px;
            height: 200px;
        }
       
        .layout
        {
            float: left;
        }
    </style>