HTML Add-ons ::: [Javascript Splitter]

Splitter (Version 1.0.1)
Grid Extension (Version 1.0.0)

Getting Started:

All WZ widgets act as jQuery Plugins. They work on the principle similar to 'Early Designing and Late Binding'.
The content inside the widgets can be rendered using HTML & text, so they are SEO-Friendly.
Please follow the steps below to see how the splitter works.

Step 1: Adding an external CSS link inside <head></head> tag, make sure that the virtual path is valid:
<link href="css/WZSplitter.css" type="text/css" rel="Stylesheet" />

Step 2: Referencing external JavaScript files inside <head></head> tag in order, make sure that the virtual path is valid:
<script language="javascript" type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
<script language="javascript" type="text/javascript" src="scripts/WZCore.js"></script>
<script language="javascript" type="text/javascript" src="scripts/WZSplitter.js"></script>

Step 3: Formatting div tags and then applying proper class names to div tags like this:
<div class="WZSplitter" style="width:600px; height:360px;">
<div class="WZSplitterPanel"></div>
<div class="WZSplitterPanel"></div>
</div>
Initially you have to give width & height to fill the root splitter.
Now it works, please see this demo by click Demo 1.

Step 4: Adding hidden fields with class name 'WZSplitterConfig' or 'WZSplitterPanelConfig' and overriding default values to control their appearance separately.
This step is suitable for nested & complex layout. The splitter supports unlimited panels and unlimited nested splitters.
<div class="WZSplitter" style="width:800px; height:600px;">
    <div class="WZSplitterPanel">
        <input class="WZSplitterPanelConfig" type="hidden" value="size:25%; minSize:80; maxSize:300; showHeader:true; headerTitle:Left; headerIconUrl:images/_bird.png; miniPnlSize:20" />
    </div>
    <div class="WZSplitterPanel WZSplitter"> 
        <input class="WZSplitterConfig" type="hidden" value="panelAlign:horizontal; indicatorWidth:8;" />
        <input class="WZSplitterPanelConfig" type="hidden" value="size:50%;" />
        <div class="WZSplitterPanel">
            <input class="WZSplitterPanelConfig" type="hidden" value="showHeader:true; headerTitle:Center-Top; headerIconUrl:images/_cobra.png; miniPnlSize:20" />
        </div>
        <div class="WZSplitterPanel">
            <input class="WZSplitterPanelConfig" type="hidden" value="showHeader:true; headerTitle:Center-Middle; headerIconUrl:images/_elephant.png; miniPnlSize:20" />
        </div>
        <div class="WZSplitterPanel">
            <input class="WZSplitterPanelConfig" type="hidden" value="showHeader:true; headerTitle:Center-Bottom; headerIconUrl:images/_frog.png; miniPnlSize:20" />
        </div>
    </div>
    <div class="WZSplitterPanel">
        <input class="WZSplitterPanelConfig" type="hidden" value="size:25%; minSize:80; maxSize:300; showHeader:true; headerTitle:Right; headerIconUrl:images/_kangaroo.png; miniPnlSize:20" />
    </div>
</div>
Please see this demo by click Demo 2.
The demo is just showing part of basic items, please go through documentation for more details.

Step 5: Creating a JavasScript block at the bottom of the <head></head> tag and then overwriting Global configuration settings to manipulate the splitters' behavior
such as animation speed, panel resize mode, changing skins etc.
<script language="javascript" type="text/javascript">
    
</script>
Please see the demo by click Demo 3.

Requirements - jQuery 1.3.2+
Working with most popular browsers - IE6+, Firefox, Safari, Chrome and Opera etc.
Diagram of The Splitter Triggers
The splitter is driven by default configuration values which control splitter's appearance and behavior.
There are 3 kinds of configurations: splitter configuration, panel configuration, and global configuration.
Splitter Configuration
- A hidden field value with CSS class 'WZSplitterConfig' following a div tag with CSS class 'WZSplitter',
For example: <input class="WZSplitterConfig" type="hidden" value="panelAlign:horizontal; indicatorWidth:8;" />
- panelAlign
  
  - Valid values: horizontal, vertical
  - Default value: vertical
  
  Demo
  
  vertical (defalut) horizontal
- indicatorWidth
  
  - Valid value: positive integer
  - Default value: 6
  
  Demo
  
  6 (defalut) 12
  * The separator's background-color is 'transparent'. The color of it belongs to its container. The background-color of moving bar is set by CSS skin file.
Panel Configuration
- A hidden field value with CSS class 'WZSplitterPanelConfig' following a div tag with CSS class 'WZSplitterPanel',
For example: <input class="WZSplitterPanelConfig" type="hidden" value="size:25%; minSize:80; maxSize:300; showHeader:true; headerTitle:Right; headerIconUrl:images/_kangaroo.png; miniPnlSize:20" />
- size
  
  - Valid values: percentage or positive integer
  - Default value: (Available Width [Height] - Sum of fixed Width [Height]) × (1 ÷( Count of Panels - Count of fixed Width [Height] Panels) ×100%)
  * Positive integer means fixed Width [Height]. The size using it includes all borders, header and header gap.
  * The panel using fixed width or height will keep the size when browser window resizes unless any panel gets an invalid value. If so, all panels will be same size.
  * Best practice: When you decide to use fixed width or height, please leave at least one panel has no size setting. It will get a "self-adaptive" size and fit into the splitter.
- minSize & maxSize
  
  - Valid value: positive integer
  - Default value: 0 (minSize); auto (maxSize)
  * The unit of minSize & maxSize is pixel (px). If two adjacent panels both have the minSize & maxSize, the system will be strict to the value which it first gets.
  Please do not set minSize & maxSize when
  1. The splitter has 3 panels and the center (middle) panel can collapse.
  2. The splitter has 4 panels and more.
  The system will use build-in rules to control panels' size in these conditions.
- miniPnlSize - the size of the bar after collapse
  
  - Valid value: positive integer
  - Default value: 1
  - Recommended value: 20
  
  Demo
  
  20
- showHeader, headerSize, headerTitle, headerIconUrl, headerGap - a group of settings for panel's header
  
  1. showHeader - Default value: false;
  2. headerSize - Valid value: big (40px), normal (25px), small (15px), any positive integer; Default value: normal (Recommended, it suits for current skins.)
  3. headerTitle - Default value: empty string; *Quotation mark (") is not valid. Please use " instead.
  4. headerIconUrl - Default value: empty string; * Please make sure that the virtual path is valid.
  5. headerGap - the gap between header and panel; Valid value: non-negative integer; Default value: 1;
  Demo
  
  Diagram A Diagram B
  * In Diagram A left panel, the header setting is "showHeader:true".
  * In Diagram A right panel, the header setting is "showHeader:true; headerSize:30; headerTitle:"Right"; headerIconUrl:images/_bird.png; headerGap:3".
  * In Diagram B top panel, the header setting is "showHeader:true; headerTitle:Top; headerIconUrl:images/_kangaroo.png; headerGap:0".
  * In Diagram B bottom panel, the header setting is "showHeader:true; headerTitle:Bottom; headerIconUrl:images/_frog.png".
- noBorder, identicalBorders,
  borderTopStyle, borderTopWidth, borderTopColor,
  borderRightStyle, borderRightWidth, borderRightColor,
  borderBottomStyle, borderBottomWidth, borderBottomColor,
  borderLeftStyle, borderLeftWidth, borderLeftColor,
  panelBorderStyle, panelBorderWidth, panelBorderColor
  
  - A group of settings for the borders of the panel & header. The header will use the same settings as panel's.
  * All borders' width is considered in advance and then the system will pre-calculate the dimensions for each panel.
  - So please don't set borders' width in CSS skin file later.
  
  1. noBorder - Default value: false;
  * If a div element was acting as both splitter and panel with CSS class "WZSplitter WZSplitterPanel", it wouldn't have borders by default.
  - So noBorder can always be set as 'false' and it is used for a panel without borders just in case.
  2. identicalBorders - Default value: false;
  * If it was 'true', the settings (panelBorderStyle, panelBorderWidth, panelBorderColor) would take effect and set the borders of the div element using same style, width and color.
  
  * All border related settings refer to W3C CSS border definitions. Note: The valid value for border width should be non-negative integer. Please do not add 'px' following the number.
  - If you don't change any setting, the default values of the borders will be -
  3. borderTopStyle:solid; borderTopWidth:1; borderTopColor:#fff;
  4. borderRightStyle:solid; borderRightWidth:1; borderRightColor:#a3afba;
  5. borderBottomStyle:solid; borderBottomWidth:1, borderBottomColor:#a3afba;
  6. borderLeftStyle:solid; borderLeftWidth:1, borderLeftColor:#fff
  - When the identicalBorders equals true, the borders looks the same using the settings below.
  7. panelBorderStyle:solid; panelBorderWidth:1, panelBorderColor:#549fe3
  
  * If you need to customize the borders, please simply override the default values in each panel's configuration field.
  Demo
  
  Part A
  
  Part B
  
  Part C
  
  Part D
  
  Part E
  
  * The border settings of Part A are " identicalBorders:true".
  * The border settings of Part B, whose headerGap equals 0, are "identicalBorders:true; panelBorderStyle:dotted; panelBorderWidth:1; panelBorderColor:#0abd3b".
  * The border settings of Part C are "borderTopStyle:solid; borderTopWidth:1; borderTopColor:#333; borderRightStyle:ridge; borderRightWidth:2; borderRightColor:#ccc;
  borderBottomStyle:ridge; borderBottomWidth:2; borderBottomColor:#ccc; borderLeftStyle:solid; borderLeftWidth:1; borderLeftColor:#333".
  * The border settings of Part D are "identicalBorders:true; panelBorderStyle:dashed; panelBorderWidth:2; panelBorderColor:#000000".
  * Part E, whose headerGap is 0, is using default settings.
- overflow
  
  - Valid value: visible, hidden, scroll, auto, inherit
  - Default value: auto
  
  Demo
  
  TEST....................................................
  .
  .
  .
  .
  .
  .
  .
  .
  .
  .
  .
  End.......................................................
  
  TEST....................................................
  .
  .
  .
  .
  .
  .
  .
  .
  .
  .
  .
  End.......................................................
  
  'auto' (default) 'hidden'
  * Rendering same contents, the scrollbars show up in left panel.
Global Configuration
- a JavaScript code line inside the header element to manipulate the splitters' behavior such as animation speed, panel resize mode etc.
- $_WZsp.Cfg.animateSpeed = speed;
  
  - Valid values: 'fast' (200ms), 'normal' (400ms), 'slow' (600ms), 'immediate' (0ms), non-negative integer (unit: ms)
  - Default value: 'normal'
- $_WZsp.Cfg.enableDefaultMode = boolean;
  
  - Default value: true
Please click Demo 3 to see an example with the configuration - $_WZsp.Cfg.enableDefaultMode = false; $_WZsp.Cfg.animateSpeed = "slow";
Outer Control - programmatically invoke click events (expand, collapse, stretch & shrink)
There are 6 methods that you can use to fire the events.
$_WZsp.OuterCtrl.collapse(splitterIndex, panelIndex)
$_WZsp.OuterCtrl.expand(splitterIndex, panelIndex)
$_WZsp.OuterCtrl.toggleExpandCollapse(splitterIndex, panelIndex)
$_WZsp.OuterCtrl.shrink(splitterIndex, panelIndex)
$_WZsp.OuterCtrl.stretch(splitterIndex, panelIndex)
$_WZsp.OuterCtrl.toggleStretchShrink(splitterIndex, panelIndex)
* The splitterIndex & panelIndex are the order of the elements. The number starts from zero and a panel can be uniquely distinguished by a combination of splitterIndex & panelIndex.
* If a panel currently is stretched, clicking anywhere outside the panel itself would fire the shrink event. So the best place of the shrink trigger should be inside the panel.
Please try Splitter Outer Control Demo for more experience.

Register Event - register & invoke a callback function before or after the click events
There are 6 methods for this section.
$_WZsp.RegisterEvent.beforeResize(splitterIndex, panelIndex, [array parameters], callback)
$_WZsp.RegisterEvent.afterResize(splitterIndex, panelIndex, [array parameters], callback)
$_WZsp.RegisterEvent.beforeExpandCollpase(splitterIndex, panelIndex, [array parameters], callback)
$_WZsp.RegisterEvent.afterExpandCollpase(splitterIndex, panelIndex, [array parameters], callback)
$_WZsp.RegisterEvent.beforeStretchShrink(splitterIndex, panelIndex, [array parameters], callback)
$_WZsp.RegisterEvent.afterStretchShrink(splitterIndex, panelIndex, [array parameters], callback)

*

Parameter	Description
splitterIndex	Required, an integer starts from 0 indicating the index of the splitter.
panelIndex	Required, an integer starts from 0 indicating the panel's order inside its splitter.
[array parameters]	Optional, a user-customized array which contains the parameters for the following callback function. Example: ["Cat", 100, true]
callback	Required, a Javascript function or a function name which you have already defined.

* Providing build-in information items which user can retrieved straight away in the callback functions

1 . this.eventType
2 . this.splitterIndex
3 . this.panelIndex
4 . this.state
5 . this.status
6 . this.panel.innerWidth
7 . this.panel.innerHeight
8 . this.panel.scrollWidth
9 . this.panel.scrollHeight
10 . this.panel.overflow
11. this.panel.minSize
12. this.panel.maxSize

13. this.panel.miniPnlSize
14. this.panel.showHeader
15. this.panel.headerSize
16. this.panel.headerIconUrl
17. this.panel.headerGap
18. this.panel.noBorders
19. this.panel.identicalBorder
20. this.panel.panelBorderStyle
21. this.panel.panelBorderWidth
22. this.panel.panelBorderColor
23. this.panel.borderTopStyle
24. this.panel.borderTopWidth

25. this.panel.borderTopColor
26. this.panel.borderRightStyle
27. this.panel.borderRightWidth
28. this.panel.borderRightColor
29. this.panel.borderBottomStyle
30. this.panel.borderBottomWidth
31. this.panel.borderBottomColor
32. this.panel.borderLeftStyle
33. this.panel.borderLeftWidth
34. this.panel.borderLeftColor
35. this.splitter.panelAlign
36. this.splitter.indicatorWidth

* If the return value of the callback function for any 'before' event equals false, the click event will not be processed.
- Note: The click event only stops when the event target is the element itself. Otherwise, it will be carried on.

Please try Splitter Register Event Demo for more experience.

Themes and Skins - providing a few glass style skins. Also you can customize skin by using the method below.
$_WZsp.Theme.skin(cssVirtualPath, skinName)

*

Parameter	Description
cssVirtualPath	Required, a string linking to a CSS file. Default value: "css/WZSplitter.css"
skinName	Required, a string acting as the group prefix for a set of CSS rules. For example: "LightGray"

* All parameters will be saved in a HTTP cookie.
Note: Considering the number and size limits of a cookie, it won't save parameters separately per page. Invoking the method anywhere in the domain will affect other pages.
* Skin Template - (In this example, the skinName is CustomizedSkin.)

.CustomizedSkinParent {background:transparent;}
.CustomizedSkinHeader {cursor:default; color:#1f7a1f; font:bold 9pt Tahoma, Arial; background-color:#e6f4ff;}
.CustomizedSkinSeparator {background:transparent;}
.CustomizedSkinBuffer {background:transparent;}
.CustomizedSkinMini {background-color:#e6f4ff;}
.CustomizedSkinMiniHorizontal {background-color:#e6f4ff;}
.CustomizedSkinArrow {background-image:url(../images/arrowSolidBlack.gif);}
.CustomizedSkinAnimationArrow {background-image:url(../images/arrowSolidBlackAnimation.gif);}
.CustomizedSkinPanel {background:#fefeff;}
.CustomizedSkinIndicator {background-color:Gray;}

Please click Splitter Skin Demo to see this plain color effect of the template shown above.
Method: $_WZsp.Theme.skin("css/_sptSkinDemo.css", "CustomizedSkin");
* Note: In the CSS file, please do not set any rules related to the dimensions such as width, height, border etc. You can set them in the WZSplitterPanelConfig field.
* There are 4 sets of Arrows & AnimationArrows in the 'images' folder that you can pick one in your skin rules.
1.