A5PanelNavigator Class
Arguments
- panelsarray
The panels to use in the navigator. See A5.PanelNavigator Panel Object.
- settingsobject
Settings for the panel navigator. This will override the initial values of the properties of the A5.PanelNavigator class.
Description
Panel navigator.
- Name
- Description
- A5.PanelNavigator.Panel Object
Definition of a panel in the panel navigator.
Properties
- themestring
The theme to use on the panel navigator.
- overridestring
The overrides to use on the panel navigator.
- renderModestring
If the panel navigator is in a navigator or layout, renderMode controls when the panel navigator is created. A blank value (the default) will create the panel automatically when the parent is created. A value of "auto-create" will create the panel when it becomes. A value of "auto-create-destroy" will do the same, but also destroy it when it is hidden.
- typestring
The type of panel navigator to create. Values can be "tabband" (to use a tabband to navigate) or "carousel" (to allow the user to drag the panel to navigate). Not specifying a value will mean the panel navigator will the navigated programmatically.
- locationstring
If the type of panel navigator is "tabband", then the "location" of the tabband can be set to either "top" or "bottom"
- flowstring
The flow of the panels in the navigator. Values can be "ltr" (left to right), "rtl" (right to left), "ttb" (top to bottom) or "btt" (bottom to top). The default is "ltr".
- boolean
In the "carousel" type of panel navigator, whether or not to allow user navigation from the last panel directly to the first and from the first directly to the last. The default is false.
- initialPanelstringnumber
The name or index of the initial panel to display. If not defined then the first "shown" panel will be visible.
- placeholderHTMLstring
If the panel navigator is created dynamically the placeholder HTML to use until it has been created. This can be used to display a waiting message while the panel is being rendered.
- classNamestring
The class name to put on the panel navigator.
- headerobject
The panel header settings.
- showboolean
Whether or not to show the panel header.The default value is false if the HTML is blank, and true if it is not.
- htmlstring
The HTML to put in the panel header. The placeholders "{panel.id}" (the ID of the panel), "{panel.name}" (the name of the panel if it is in a panel navigator or layout) and "{panel.title}" (the title of the panel if it is in a panel navigator or layout) will be automatically replaced.
- classNamestring
The class name to put on the panel header.
- stylestring
The inline CSS to put on the panel header.
- bodyobject
The panel body settings.
- classNamestring
The class name to put on the panel body.
- stylestring
The inline CSS to put on the panel body.
- object
The panel footer settings.
- showboolean
Whether or not to show the panel footer.The default value is false if the HTML is blank, and true if it is not.
- htmlstring
The HTML to put in the panel footer. The placeholders "{panel.id}" (the ID of the panel), "{panel.name}" (the name of the panel if it is in a panel navigator or layout) and "{panel.title}" (the title of the panel if it is in a panel navigator or layout) will be automatically replaced.
- classNamestring
The class name to put on the panel footer.
- stylestring
The inline CSS to put on the panel footer.
- overlayobject
The panel overlay settings. The panel overlay is for HTML elements to be absolutely positioned over the panel (such as floating buttons).
- showboolean
Whether or not to show the panel overlay.The default value is false if the HTML is blank, and true if it is not.
- htmlstring
The HTML to put in the panel overlay. The placeholders "{panel.id}" (the ID of the panel), "{panel.name}" (the name of the panel if it is in a panel navigator or layout) and "{panel.title}" (the title of the panel if it is in a panel navigator or layout) will be automatically replaced.
- indicatorobject
Panel indicator settings (set of dots for each panel in the navigator with the active one highlighted).
- showboolean
Whether or not to show the indicator. The default value is false.
- locationstring
The location of the indicator. Values can be "auto", "top", "bottom", "left" or "right". The "auto" location will put the indicator on the bottom if thee flow is "ltr" or "rtl" and on the right if the flow is "ttb" or btt". The default is "bottom".
- classNamestring
The class name to put on indicator element.
- panelClassNamestring
The class name to put on each dot in indicator element.
- panelSelectedClassNamestring
The class name to put on the active panel dot in indicator element.
- controlsobject
Navigation control bindings.
- prevobject
A previous panel button.
- hasboolean
Whether or not the panel navigator has a previous panel button. The default value is false.
- idstring
The ID of the button element (which must already be in the DOM). The default is "{panel.id}.CTRL.PREV".
- settingsobject
The button settings.
- nextobject
A next panel button.
- hasboolean
Whether or not the panel navigator has a next panel button. The default value is false.
- idstring
The ID of the button element (which must already be in the DOM). The default is "{panel.id}.CTRL.NEXT".
- settingsobject
The button settings.
- backobject
A history back panel button.
- hasboolean
Whether or not the panel navigator has a history back panel button. The default value is false.
- idstring
The ID of the button element (which must already be in the DOM). The default is "{panel.id}.CTRL.BACK".
- settingsobject
The button settings.
- forwardobject
A history forward panel button.
- hasboolean
Whether or not the panel navigator has a history forward panel button. The default value is false.
- idstring
The ID of the button element (which must already be in the DOM). The default is "{panel.id}.CTRL.FORWARD".
- settingsobject
The button settings.
- panelsarray
An array of buttons to bind to the showing of individual panels. The array should contain objects, each of which have an "id" property with the id of the button, a "panel" property with the name of the panel in the navigator, and a "settings" property with the button settings.
- animationobject
Navigation animation.
- typestring
The type of animation to use. Values can be "slide" (the default) , "slide-left", "slide-right", "slide-up", "slide-down", "slide-horizontal", "slide-veritcal", "fade" and "none". The "slide", "slide-horizontal" and "slide-veritcal" types will animate based on the order of panels and the flow.
- durationnumber
How long the animation should take in millisecond. The default is 400.
- stateobject
The current state of the panel navigator.
- activePanelstring
The name of the active panel.
- hasPrevPanelboolean
Whether or not there is a previous panel.
- prevPanelIndexnumber
The index (in the panels array) of the previous panel.
- prevPanelstring
The name of the previous panel.
- hasNextPanelboolean
Whether or not there is a next panel.
- nextPanelIndexnumber
The index (in the panels array) of the next panel.
- nextPanelstring
The name of the next panel.
- historyarray
The history of order or visited panels.
- historyIndexnumber
The current index into the history array.
- hasHistoryBackboolean
Whether or not there is a back panel in the history.
- historyBackstring
The name of the panel visited before the current.
- hasHistoryForwardboolean
Whether or not there is a forward panel in the history.
- historyForwardstring
The name of the panel visited after the current.
- onInitializefunction()
Event fired when the panel is initialized. This does not necessarily mean the panel elements have been created, but rather that the class was.
- onSizefunction(data)
Event fired when the panel is sized.
- dataobject
The sizing data.
- widthnumber
The width of the panel in pixels.
- heightnumber
The height of the panel in pixels.
- changedboolean
Whether the size actually changed.
- oldobject
The old size of the panel.
- widthnumber
The old width of the panel in pixels.
- heightnumber
The old height of the panel in pixels.
- onCreatefunction(element,bodyElement,headerElement,footerElement)
Event fired when the panel is created.
- elementelement
The panel element.
- bodyElementelement
The panel body element.
- headerElementelement
The panel header element.
- footerElementelement
The panel footer element.
- onActivatefunction()
Event fired when the panel is activated by a parent panel navigator or layout.
- onViewfunction()
Event fired when the panel is viewed by a parent panel navigator or layout. It should be noted that unlike the onActivate event, this event will fire regardless of the panel already being active.
- onBeforeDestroyfunction()
Event fired before the panel is destroyed.
- onDestroyfunction()
Event fired when the panel is destroyed.
- onBeforePanelActivatefunction(panel,index)
Event fired before a panel in the navigator is activated. Can return false to stop activation.
- panelstring
The name of the panel being activated.
- indexnumber
The index of the panel being activated.
- onPanelActivatefunction(panel,index)
Event fired when a panel in the navigator is activated.
- panelstring
The name of the panel being activated.
- indexnumber
The index of the panel being activated.
- onPanelActivateCompletefunction(panel,index)
Event fired when the activated panel completely in view.
- panelstring
The name of the panel being activated.
- indexnumber
The index of the panel being activated.
- onPanelViewfunction(panel,index)
Event fired when a panel in the navigator is viewed. It should be noted that unlike the onPanelActivate event, this event will fire regardless of the panel already being active.
- panelstring
The name of the panel being activated.
- indexnumber
The index of the panel being activated.
Methods
- addPanel Method
Add a panel to the navigator.
- bindSize Method
Bind the panel sizing.
- create Method
Create the panel.
- destroy Method
Destroy the panel.
- firstPanel Method
Navigate to the first panel in the panel navigator.
- getPanel Method
Get a child panel of the navigator.
- getPanelId Method
Get the ID of the panel, or one of its sub-parts.
- getState Method
Get the current display state of the navigator and all its children. Can be used in conjunction with A5.PanelNavigator.setState to restore panels to a previously cached state.
- historyBack Method
Navigate to the previous entry in the panel navigator history.
- historyFirst Method
Navigate to the first entry in the panel navigator history.
- historyForward Method
Navigate to the next entry in the panel navigator history.
- historyLast Method
Navigate to the last entry in the panel navigator history.
- insertPanel Method
Insert a panel into the navigator.
- lastPanel Method
Navigate to the last panel in the panel navigator.
- nextPanel Method
Navigate to the next panel in the panel navigator.
- prevPanel Method
Navigate to the previous panel in the panel navigator.
- refresh Method
Refresh the panel.
- removePanel Method
Remove a panel from the navigator.
- resize Method
Resize the panel.
- setActivePanel Method
Activate a child panel of the navigator.
- setDisplay Method
Show or hide the panel header, footer, or overlay.
- setPanelDisplay Method
Hide of show a panel in the navigator.
- setSize Method
Set the panel to a specific size.
- setState Method
Set the current display state of the navigator and all its children. Can be used in conjunction with A5.PanelNavigator.getState to restore panels to a previously cached state.