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 Notepad. |
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.
Drop down and copy references to paste inside the head tags
| References |
Copy Code
|
<!--jQuery References-->
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.1/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.20133.19.min.css" rel="stylesheet" type="text/css" />
<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20133.19.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20133.19.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/interop/wijmo.data.ajax.3.20133.19.js" type="text/javascript"></script>
<!--Knockout JS Library-->
<script src="http://cdn.wijmo.com/wijmo/external/knockout-2.2.0.js" type="text/javascript"></script>
<!--Wijmo Knockout Integration Library-->
<script src="http://cdn.wijmo.com/interop/knockout.wijmo.3.20133.19.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.
Drop down and copy markup to paste inside the body tags
| 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="http://wijmo.com/wp-content/themes/wijmov2/img/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.
Drop down and copy script to paste inside the head tags
| 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.
See Also
Concepts
Reference
Show All
Hide All