Splitter

Contents

User Guide

Overview

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.

This example shows a vertical and horizontal splitter; the orientation can be determined using the orientation option. The showExpander option is set to false, so the vertical splitter hides the expander.

LabeledSplitter.png

NOTE: Please check the version histories for an outline of new features, improvements, and changes to the Wijmo widgets.

Markup and Scripting

To create a simple, unnested wijsplitter widget, add the following markup – which creates a wijsplitter and two panels - to the page on which you would like the widget to appear:

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

You can also add a little CSS styling to the splitter in the head section of the page. In this example, we specify the width and height of the 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 head section of your page:

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

Note that we 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.

Panel1
Panel2

Quick Start

This quick start helps you to create a Web page, add the wijsplitter widget, and customize the appearance and behavior of the widget.

  1. In Notepad, to create a new HTML page, add the following code and save the document with an .html extension.
    <!DOCTYPE HTML>
<HTML>
<head>
</head>
<body>
</body>
</HTML>
  2. To reference the latest dependencies from the CDN, see http://wijmo.com/downloads/#wijmo-cdn. Add them to your HTML page within the<head> tags. For example:
    <!--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.20131.1.min.css" rel="stylesheet" type="text/css" />
 
<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20131.1.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.1.min.js" type="text/javascript"></script>
  3. Within the <body> tags, add markup like the following.
    <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>

    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.

  4. Within the <head> tags, below the references, add the following script to initialize the jQuery widgets.
    <script type="text/javascript">
    $(document).ready(function () {
       $("#vsplitter").wijsplitter({ 
          panel1: {minSize: 50},
          orientation: "vertical", 
          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>

    This script sets several splitter widget options for both splitters.
    Vertical Splitter

    • The first panel's minimum size option set to 50 pixels.
    • The orientation is set to vertical.
    • The fullSplit option is set to false, so that it does not fill the page.
    • The expanded, collapsed, and sized events have refresh options set for the horizontal splitter.

    Horizontal Splitter

    • The orientation is set to vertical.
    • The fullSplit option is set to true, so that it fills the second panel of the vertical splitter.
  5. Within the <head> tags, below the script, add the following style to set the size of the vertical widget.
    <style type="text/css">
        #vsplitter
        {
            height: 450px;
            width: 310px;
        }
</style>
  6. Save your HTML file and open it in a browser. The wijsplitter widget appears like the following.

Roo oodely shnizzle razzle wacko yap woogle. Blippity Fling-Flang by orangehairedboy.
Blob FRAGGLE nizzleflung, zip wacko zoom doof duh shnuzzle-whack...crangle yap dee!
Blop boo zong-shizzle. Hizzy duh blab yip flap flee doo bizzle?

API

Options

The following options are available for wijsplitter:

barZIndex

A value that indicates the z-index (stack order) of the splitter bar.
Default: -1.
Type: Number.
Code example:
 $('.selector’).wijsplitter({barZIndex: 1});

collapsingPanel

Specifies which panel should be collapsed after clicking the expander of the splitter. Possible values are "panel1" and "panel2".
Default: "panel1"
Type: String
Code example:
 $('.selector’).wijsplitter({collapsingPanel: "panel1"});

fullSplit

Gets or sets a value that indicates whether the widget fills the whole page.
Type: Boolean
Default: false
Code example:
$('.selector’).wijsplitter({fullSplit: false});

orientation

Gets or sets a value indicating the horizontal or vertical orientation of the SplitContainer panels.
Type: String
Default: 'vertical'
Code example:
$('.selector’).wijsplitter({orientation: ‘vertical’});

panel1

Defines the information for the top or left panel of the splitter.
Type: Object
Default: { minSize: 1,collapsed: false,scrollBars: "auto" }
Code example:
 $('.selector’).wijsplitter({panel1: {
{
minSize:1, 
collapsed:false, 
scrollBars:"auto"} 
});

collapsed

Gets or sets a value determining whether the splitter panel is collapsed or expanded.
Type: Boolean
Default: false
Code example:
$('.selector’).wijsplitter(panel1: {collapsed: false});

minSize

Gets or sets the minimum distance in pixels when resizing the splitter.
Type: Number
Default: 1
Code example:
 $('.selector’).wijsplitter(panel1: {minSize: 1});

scrollBars

Gets or sets the type of scroll bars to display for the splitter panel.
Type: String
Default: ‘auto’
Code example:
 $('.selector’).wijsplitter(panel1: {scrollBars: ‘auto’});

Panel2

Defines the information for the bottom or right panel of the splitter.
Type: Object
Default: { minSize: 1,collapsed: false,scrollBars: "auto" }
Code example:
 $('.selector’).wijsplitter({panel2: {
{
minSize:1, 
scrollBars: "auto", 
collapsed:false}  
});

collapsed

Gets or sets a value determining whether the splitter panel is collapsed or expanded.
Type: Boolean
Default: false
Code example:
$('.selector’).wijsplitter(panel2:{collapsed: false});

minSize

Gets or sets the minimum distance in pixels when resizing the splitter.
Type: Number
Default: 1
Code example:
 $('.selector’).wijsplitter(panel2: {minSize: 1});

scrollBars

Gets or sets the type of scroll bars to display for the splitter panel.
Type: String
Default: ‘auto’
Code example:
 $('.selector’).wijsplitter(panel2:{scrollBars: ‘auto’});

resizeSettings

Defines the animation while the bar of the splitter is being dragged.
Type: Object
Default:{ }
Code example:
$('.selector’).wijsplitter({resizeSettings: { ghost :true}});

disabled

The easing effect that is applied to the animation.
Type: String
Default: 'swing'
Code example:
$('.selector’).wijsplitter({resizeSettings: {animationOptions:{ easing: 'swing'}}});

duration

Defines how long (in milliseconds) the sliding animation will run.
Type: Number
Default: 100
Code example:
 $('.selector’).wijsplitter({resizeSettings: {animationOptoins:{ animationDuration: 100}}});

easing

The easing effect that is applied to the animation.
Type: String
Default: 'swing'
Code example:
 $('.selector’).wijsplitter({resizeSettings: {animationOptions:{ easing: ‘swing’}}});

ghost

Gets or sets a value that determines whether an outline of a panel appears while dragging the splitter bar.
Type: Boolean
Default: false
Code Example:
 $('.selector’).wijsplitter({resizeSettings: {ghost: false}});

showExpander

A Boolean value that determines whether the expander of the wijsplitter widget is shown.
Default: true
Type: Boolean
Code example:
 $('.selector’).wijsplitter({showExpander: true});

splitterDistance

Gets or sets the location of the splitter, in pixels, from the left or top edge of the SplitContainer.
Type: Number
Default: 100
Code example:
 $('.selector’).wijsplitter({splitterDistance: 100});

Methods

destroy

Removes the splitter functionality completely. This will return the element back to its pre-init state.
Code Example:
 
$("selector").wijsplitter ("destroy");

disable

Disables the wijsplitter.
Code Example:
 
$("selector").wijsplitter ("disable");

enable

Enables the wijsplitter.
Code Example:
 
$("selector").wijsplitter ("enable");

option

Gets or sets any wijsplitter option. If no value is specified, this method will act as a getter.
Code Example:
 
$("selector").wijsplitter ("option", optionName, [value]);

option

Sets multiple wijsplitter options at once by providing an options object.
Code Example:
 
$("selector").wijsplitter ("option", options);

refresh

Forces the widget to recreate the splitter.
Parameters:
size: A Boolean value indicating whether the refresh is triggered because the size of the widget is changed.
state: A Boolean value indicating whether the refresh is triggered because the state of the expander is changed (expanded or collapsed).
Code Example:
 
$(".selector").wijsplitter("refresh", true, false);

widget

Returns the .wijmo-wijsplitter element.
Code Example:
 
$("selector").wijsplitter ("widget");

Events

collapse

Gets or sets the javascript function name to be called before panel1 is collapsed.
Default: null
Type: Function
Code Example:
// Supply a callback function to handle the collapse event:
$("#element").wijsplitter({ collapse: function () { return false; } });
// Bind to the event by type:
$("#element").bind("wijsplittercollapse", function () { return false; });

collapsed

Gets or sets the javascript function name to be called when panel1 is collapsed by clicking the collapse/expand image.
Default: null
Type: Function
Code Example:
// Supply a callback function to handle the collapsed event:
$("#element").wijsplitter({ collapsed: function () { } });
// Bind to the event by type:
$("#element").bind("wijsplittercollapsed", function () { });

expand

Gets or sets the javascript function name to be called before panel1 is expanded.
Default: null
Type: Function
Code Example:
 
// Supply a callback function to handle the expand event:
$("#element").wijsplitter({ expand: function () { return false; } });
// Bind to the event by type:
$("#element").bind("wijsplitterexpand", function () { return false; });

expanded

Gets or sets the javascript function name to be called when panel1 is expanded by clicking the collapse/expand image.
Default: null
Type: Function
Code Example:
// Supply a callback function to handle the expanded event:
$("#element").wijsplitter({ expanded: function () { } });
// Bind to the event by type:
$("#element").bind("wijsplitterexpanded", function () { });

sized

Gets or sets the javascript function name that would be called at the client side when the user is done dragging the splitter.
Default: null
Type: Function
Code example:
 
// Supply a callback function to handle the sized event:
$("#element").wijsplitter({ sized: function () { } });
// Bind to the event by type:
$("#element").bind("wijsplittersized", function () { });

sizing

Gets or sets the javascript function name that would be called at the client side when a user is dragging the splitter.
Default: null
Type: Function
Code example:
 
// Supply a callback function to handle the sizing event:
 $("#element").wijsplitter({ sizing: function () { } });
// Bind to the event by type:
 $("#element").bind("wijsplittersizing", function () { });

Retrieved from "http://wijmo.com/wiki/index.php/Splitter"