Getting Started
jqxSplitter represents a widget consisting of a moveable split bar(s) that divides a container's display area into two or more resizable and collapsible panels.
Every UI widget from jQWidgets toolkit needs its JavaScript files to be included
in order to work properly.
The first step is to create html page and add links to the JavaScript files and
CSS dependencies to your project. The jqxSplitter widget requires the following files:
The next step is to create html element within the body of the html document.
The last step is to initialize the widget by adding the following script to the
html document:
To call a function (method), you need to pass the method name and parameters (if
any) in the jqxSplitter's constructor.
To get the result of a function after calling it, you can use the following syntax:
To set a property (option), you need to pass the property name and value(s) in the
jqxSplitter's constructor.
To get a property (option), you need to pass the property name to the jqxSplitter's
constructor.
To bind to an event of a UI widget, you can use basic jQuery syntax. Let’s suppose
that you want to get the selected value after the user change the current one. The
example code below demonstrates how to bind to the ‘resize’ event of jqxSplitter.
Basic Splitter Sample
The result of the above code is:
Change event
The result of the above code is:
3 pane Split Layout
The result of the above code is:
Fit to the document's bounds
The Splitter below fits to the iframe's bounds. The splitter will automatically adjust its size to fill the iframe's bounds.
3 pane Split Layout that fits to the document's bounds
The Splitter below fits to the iframe's bounds. The splitter will automatically adjust its size to fill the iframe's bounds.
Setting minimum pane sizes
To set the minimum size of the splitter, you need to set the 'min' properties of its panels.
The result of the above code is: