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

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.