jquery.ls_panels.js

Download

Version 1.0.4 (09/08/2010) full Version (11.8Kb) -- Compressed (5.3Kb)

Documentation

The options are simple, and most can be skipped with no effect. The only essential option is centrePanel, without that nothing happens.

The options are split into three sections, Top level and two sub levels for the left and right panel. the structure is:

                $(containerID).ls_panels({
                        centrePanel:null,     The centre panel must ALWAYS be available or nothing happens
                        centerPanel:null,     Same as above just a diffrent spelling
                        barClass:null,        The default class for all dividing bars
                        ghostDrag:false,      Use a ghost bar, rather than resizing everything while dragging
                        ghostOpacity:0.5,     The opacity to use when ghosting
                        store:null,           An input to store the values of the panels for gathering during postback
                        left:{
                                panel:null,             The selector for the panel
                                resizeable:true,        If this panel is resizable
                                minSize:0,              The minimum size of the panel
                                maxSize:0,              The maximum size of the panel
                                barClass:null,          The class to use for its bar, if you don't want the default
                                autoHide:false,         Whether the panel auto hides to start with
                                pinElem:null,           Any element to use for pinning the panels toggles autoHide
                                pinElemClass:null       The class to toggle on the pin for switching it on and off
                            },
                        right:{
                                Same options as left section.
                            }
            

If the left or right sections are missing, or their "panel" option is null, then they are left out of the layout.

Examples

Example 1

Basic Three panel layout with no options

                $("#eg1").ls_panels({centrePanel:"#rg1_centre",left:{panel:"eg1_left"},right:{panel:"eg1_right"}});
            

Example 2

The panels have minimum and maximum size, and are using the ghosting option for resizing.

The left panel has a pin element to toggle auto hiding.

The right panel is set to auto hide to start with.

                $("#eg2").ls_panels({centrePanel:"#eg2_centre",ghostDrag:true, 
                    left:{panel:"#eg2_left",minSize:100,maxSize:300,pinElem:"#eg2_leftPin",pinElemClass:"pinOnClass"},
                    right:{panel:"#eg2_right",minSize:100,maxSize:300,autoHide:true}
                });
            

Example 3

Similar to above but with more styling, and an input showing the store values for use during postbacks.

                $("#eg3").ls_panels({centrePanel:"#eg3_centre",ghostDrag:true,store:"#store",
                    left:{panel:"#eg3_left",minSize:100,maxSize:300,barClass:"barCls barClsLeft",pinElem:".eg3Pin",pinElemClass:"eg3PinOn"},
                    right:{panel:"#eg3_right",minSize:100,maxSize:300,barClass:"barCls barClsRight",pinElem:".eg3Pin",pinElemClass:"eg3PinOn"}
                });