Attributes

Attribute	Type	Description
data-uigset	string	Create the dynamic DOM Elements and initialise the step sequence.

Methods

Method	Return	Description
open( stepNum, setName )	this	Create the dynamic DOM Elements and initialise the step sequence.
close()	this	Complete the Step sequence and remove the dynamics DOM Elements.
next()	this	Tween the display from the current step, through to the next step.
prev()	this	Tween the display from the current step, back to the previous step.
goto( stepNum )	this	Tween the display from the current step to another step in the currently loaded set.
stop()	this	Instantly freeze the current tween. Stop can, and will, leave the focus box in whatever stage it was when the method was triggered.
getFocusBox()	DOM Element	Retrieve the DOM Element used as the focus box.
getSettings()	object	Retrieve the settings object.
getSteps()	array	Retrieve an array of the currently loaded steps.
getStep( idx )	object	Retrieve a step by it's position in the current set array.
getCurrentSet()	array	Retrieve the currently loaded set array.
getCurrentSetName()	string	Retrieve the currently loaded set's name.
getCurrentStep()	object	Retrieve the currently loaded step.
getCurrentStepIndex()	integer	Retrieve the currently loaded step's index.
getVersion()	string	A value that can be used to validate the uiSlide version identifier.

Settings

Property	Default	Description
parent	document.body	This is the DOM Element that will contain all uiGlide content. The default is <BODY>, but you can contain uiGlide within a <DIV>
steps	[] (empty array)	The "steps" array contains custom information relating to each "step" in the executing uiGlide. Steps are configured through the "data-" attributes associated with DOM Elements or by adding values directly to the "steps" array
defaultSet	"uiGlide"	"Steps" are always grouped into "Sets" and each set is given a unique name. When uiGlide is open, it will display steps in the order specifed by the active set.
transition	500	The number of milliseconds used for tweening between steps.
fadeIn	1000	The number of milliseconds used for fading-in the first step after uiSlide has opened.
fadeOut	500	The number of milliseconds used for fading-out the current step when uiSlide is closed.
minWidth	220	Each Step will be forced to maintain a minimum size when it is displayed.
minHeight	125	Each Step will be forced to maintain a minimum size when it is displayed.
padding	10	Creates negative space between the content and the uiGlide step border.
borderWidth	2	Creates creates a border around the uiGlide step focus box. This is mostly for aesthetic reasons
documentPadding	20	This will force each uiGlide step to maintain a minimum distance from the borders of the parent element.
passthrough	true	ALERT!!! This is experimental Passthrough allows pointer events to penetrate the uiStep overlay. This is really helpful for highlighting forms... However, browser support is not great.
dataUISet	"data-uigset"	The default data attribute used when defining a step.
dataUIStep	"data-uigstep"	The default data attribute used when defining a step.
dataUITitle	"data-uigtitle"	The default data attribute used when defining a step.
dataUIDesc	"data-uigdesc"	The default data attribute used when defining a step.
dataUIHtml	"data-uightml"	The default data attribute used when defining a step.
dataUIPassthrough	"data-uigpassthrough"	The default data attribute used when defining a step.
cssLeftBox	"uig-box uig-box-left"	The default css classes applied to uiGlide's dynamic elements.
cssRightBox	"uig-box uig-box-right"	The default css classes applied to uiGlide's dynamic elements.
cssTopBox	"uig-box uig-box-top"	The default css classes applied to uiGlide's dynamic elements.
cssBottomBox	"uig-box uig-box-bottom"	The default css classes applied to uiGlide's dynamic elements.
cssFocusBox	"uig-focusbox"	The default css classes applied to uiGlide's dynamic elements.
cssFocusBoxLeft	"uig-focusbox-left"	The default css classes applied to uiGlide's dynamic elements.
cssFocusBoxRight	"uig-focusbox-right"	The default css classes applied to uiGlide's dynamic elements.
cssFocusBoxTop	"uig-focusbox-top"	The default css classes applied to uiGlide's dynamic elements.
cssFocusBoxBottom	"uig-focusbox-bottom"	The default css classes applied to uiGlide's dynamic elements.
cssFocusContent	"uig-focus-content"	The default css classes applied to uiGlide's dynamic elements.
cssTitleBox	"uig-titlebox"	The default css classes applied to uiGlide's dynamic elements.
cssDescBox	"uig-descbox"	The default css classes applied to uiGlide's dynamic elements.
cssPrevBtn	"uig-btn uig-btn-prev"	The default css classes applied to uiGlide's dynamic elements.
cssNextBtn	"uig-btn uig-btn-next"	The default css classes applied to uiGlide's dynamic elements.
cssCloseBtn	"uig-btn uig-btn-close"	The default css classes applied to uiGlide's dynamic elements.
htmlPrevBtn	"<a href="javascript:void(0)"><</a>"	The default html content used to generate uiGlide's dynamic elements.
htmlNextBtn	"<a href="javascript:void(0)">></a>"	The default html content used to generate uiGlide's dynamic elements.
htmlCloseBtn	"<a href="javascript:void(0)">✖</a>"	The default html content used to generate uiGlide's dynamic elements.
htmlFocusContent	"<div></div>"	The default html content used to generate uiGlide's dynamic elements.
onBeforeOpen	null	Callback method that will be executed before the "Open" process begins.
onAfterOpen	null	Callback method that will be executed when the "Open" process ends.
onBeforeClose	null	Callback method that will be executed before the "Close" process begins.
onAfterClose	null	Callback method that will be executed when the "Close" process ends.
onBeforeGoto	null	Callback method that will be executed before the "Goto" process begins.
onAfterGoto	null	Callback method that will be executed when the "Goto" process ends.
onBeforeStep	null	Callback method that will be executed before the "Step" process begins. This callback can be overwritten on a per step basis.
onAfterStep	null	Callback method that will be executed when the "Step" process ends. This callback can be overwritten on a per step basis.
onStep	null	Callback method that will be executed when the "Step" has completed it's tween.. This callback can be overwritten on a per step basis.

How customise settings

		var uig = $("#main").uiGlide( {
			parent:document.body
			,minWidth:100
			,minWidth:100
			,padding:5
			,passthrough:true
			,onBeforeOpen:function(ui){
				console.log("Before Open");
			}
			,onAfterOpen:function(ui){
				console.log("After Open");
			}
			,onBeforeClose:function(ui){
				console.log("Before Close");
			}
			,onAfterClose:function(ui){
				console.log("After Close");
			}
			,onBeforeGoto:function(ui){
				console.log("Before Goto");
			}
			,onAfterGoto:function(ui){
				console.log("After Goto");
			}
			,onStep:function(ui){
				var step = ui.getCurrentStep();
				var stepTitle = step.title;
				var stepSet = step.set;
				console.log("On Step. Set: '"+stepSet+"', title: '"+stepTitle+"'" );
			}
		} );