Javascript Widgets
Applying a skin: 

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"> <!-- nested splitter -->
        <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">
    <!--
    $_WZsp.Cfg.enableDefaultMode = false;
    $_WZsp.Cfg.animateSpeed = "slow";
    $_WZsp.Theme.skin('css/WZSplitter.css',"WZSplitterPurple");
    -->
</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 &quot; 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:&quot;Right&quot;; 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.  -- arrowSolidBlack.gif; -- arrowSolidBlackAnimation.gif
    2.  -- arrowHollowBlack.gif; -- arrowHollowBlackAnimation.gif
    3.  -- arrowSolidWhite.gif; -- arrowSolidWhiteAnimation.gif
    4.  -- arrowHollowWhite.gif; -- arrowHollowWhiteAnimation.gif
Dual Licenses
» Open Source License - GNU GPLv3
» Commercial License
WZSplitter
   notepad  COMMERCIAL LICENSE AGREEMENT
*  2010-10-05   Version 1.0.1   Fixed bugs for IE9
*  2010-09-30   Version 1.0.0   Released
Copyright © 2010 www.htmladdons.com