Quick Start

In this quick start, you'll learn how to add the Splitter widget to an HTML project using HTML markup and jQuery script.

To create a new HTML page in your favorite text editor, add the following code and save the document with an .html extension.
Drop down and copy markup
Paste in your favorite text editor.
Copy Code

<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

Paste in your favorite text editor.	Copy Code
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

Add links to the dependencies to your HTML page within the <head> tags. Find the latest dependencies in the content delivery network (CDN) file at wijmo cdn.

References	Copy Code
<!--jQuery References--> <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" type="text/javascript"></script> <!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20162.99.min.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20162.99.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20162.99.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/interop/wijmo.data.ajax.3.20162.99.js" type="text/javascript"></script> <!--Knockout JS Library--> <script src="http://cdn.wijmo.com/external/knockout-3.1.0.js" type="text/javascript"></script> <!--Wijmo Knockout Integration Library--> <script src="http://cdn.wijmo.com/interop/knockout.wijmo.3.20162.99.js" type="text/javascript"></script>

References

Copy Code

<!--jQuery References--> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" type="text/javascript"></script>

<!--Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20162.99.min.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20162.99.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20162.99.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/interop/wijmo.data.ajax.3.20162.99.js" type="text/javascript"></script>
 
<!--Knockout JS Library-->
<script src="http://cdn.wijmo.com/external/knockout-3.1.0.js" type="text/javascript"></script>
  
<!--Wijmo Knockout Integration Library-->
<script src="http://cdn.wijmo.com/interop/knockout.wijmo.3.20162.99.js" type="text/javascript"></script>

Add the following markup within the <body> tags to create the widget. The first <div> element creates the vertical widget; its id option is set to 'vsplitter', which we call in the jQuery script to initialize the widget. The first nested <div> element contains text to display in the first panel. The second nested <div> element contains items to display in the second panel, in this case, a nested <div> element with its id option set to 'hsplitter' to add a horizontal splitter.

Markup	Copy Code
<div id="vsplitter"> <div> Roo oodely shnizzle razzle wacko yap woogle. Blippity Fling-Flang by <a href="http://bff.orangehairedboy.com/">orangehairedboy</a>. </div> <div> <div id="hsplitter"> <div> Blob FRAGGLE nizzleflung, zip wacko zoom doof duh shnuzzle-whack...crangle yap dee! </div> <div> <img src="images\wijmo_footer_tooltip.png"> Blop boo zong-shizzle. Hizzy duh blab yip flap flee doo bizzle? </div> </div> </div> </div>

Markup

Copy Code

<div id="vsplitter">
    <div>
        Roo oodely shnizzle razzle wacko yap woogle. Blippity Fling-Flang by <a href="http://bff.orangehairedboy.com/">orangehairedboy</a>.
    </div>
    <div>
        <div id="hsplitter">
            <div>
                Blob FRAGGLE nizzleflung, zip wacko zoom doof duh shnuzzle-whack...crangle yap dee! </div>
            <div>
                <img src="images\wijmo_footer_tooltip.png">
    Blop boo zong-shizzle. Hizzy duh blab yip flap flee doo bizzle?
            </div>
        </div>
    </div>
</div>

Within the <head> tags, below the references, add the following script to initialize the widget and populate it with data.

This script sets several splitter widget options for both splitters.

Vertical Splitter

Sets the first panel's minimum size option to 50 pixels.
Sets the fullSplit option to false, so that it does not fill the page.
Sets refresh options for the horizontal splitter in the expanded, collapsed, and sized events.

Horizontal Splitter

Sets the orientation option to horizontal.
Sets the fullSplit option to true, so that it fills the second panel of the vertical splitter.

Script	Copy Code
<script type="text/javascript"> $(document).ready(function () { $("#vsplitter").wijsplitter({ panel1: {minSize: 50}, fullSplit: false, // The following refresh functions ensure that after resizing // the vertical splitter, each of the horizontal panels shows its // contents correctly. This prevents repainting issues. expanded: function (e) {$("#hsplitter").wijsplitter("refresh");}, collapsed: function (e) {$("#hsplitter").wijsplitter("refresh");}, sized: function (e) {$("#hsplitter").wijsplitter("refresh");} }); $("#hsplitter").wijsplitter({ orientation: "horizontal", fullSplit: true }); }); </script>

Script

Copy Code

<script type="text/javascript">
    $(document).ready(function () {
       $("#vsplitter").wijsplitter({
          panel1: {minSize: 50},
          fullSplit: false,
          // The following refresh functions ensure that after resizing
          // the vertical splitter, each of the horizontal panels shows its
          // contents correctly. This prevents repainting issues.
          expanded: function (e) {$("#hsplitter").wijsplitter("refresh");},
          collapsed: function (e) {$("#hsplitter").wijsplitter("refresh");},
          sized: function (e) {$("#hsplitter").wijsplitter("refresh");}
          });
      $("#hsplitter").wijsplitter({
          orientation: "horizontal",
          fullSplit: true
          });
    });
</script>

Within the <head> tags, above the script to initialize the widget, set the size of the widget using CSS.
Drop down and copy markup to paste inside the head tags
Style
Copy Code

<style type="text/css"> #vsplitter { height: 300px; width: 630px; } </style>
Save your HTML file and open it in a browser. The widget appears like the following live widget.

Style	Copy Code
<style type="text/css"> #vsplitter { height: 300px; width: 630px; } </style>

KO

KO Splitter Binding

Reference