JavaScript

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".

loopNavigateboolean

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.

footerobject

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.

Report an issue with this page