Premium Bootstrap Admin Templates

Keen Wizard

Overview

KTWizard is a Keen's custom plugin defined in [keen]/theme/src/assets/js/theme/core/base/wizard.js.

Initialization

First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.

var wizard = new KTWizard('kt_wizard',options);

Options

var options = {
    startStep: 1,
    manualStepForward: false
};

Field Type Description

startStep

number

The page number of step to start at the initial load

Sample
`startStep: 1`

manualStepForward

boolean

Set enable/disable to manually step forward

Sample
`manualStepForward: false`

Attributes

<div class="kt-grid kt-grid--desktop-xl kt-grid--ver-desktop-xl kt-wizard-v1 kt-wizard-v1--extend" id="k_wizard_v4" data-ktwizard-state="step-first">
	<div class="kt-grid__item kt-wizard-v1__aside">

		<!--begin: Form Wizard Nav -->
		<div class="kt-wizard-v1__nav">
			<div class="kt-wizard-v1__nav-items">
				<a class="kt-wizard-v1__nav-item" href="#" data-ktwizard-type="step" data-ktwizard-state="current">
					<span>1</span>
				</a>
				<a class="kt-wizard-v1__nav-item" href="#" data-ktwizard-type="step">
					<span>2</span>
				</a>
				<a class="kt-wizard-v1__nav-item" href="#" data-ktwizard-type="step">
					<span>3</span>
				</a>
				<a class="kt-wizard-v1__nav-item" href="#" data-ktwizard-type="step">
					<span>4</span>
				</a>
			</div>
			<div class="kt-wizard-v1__nav-details">
				<div class="kt-wizard-v1__nav-item-wrapper" data-ktwizard-type="step-info" data-ktwizard-state="current">
					<!-- step content info here -->
				</div>
				<div class="kt-wizard-v1__nav-item-wrapper" data-ktwizard-type="step-info">
					<!-- step content info here -->
				</div>
				<div class="kt-wizard-v1__nav-item-wrapper" data-ktwizard-type="step-info">
					<!-- step content info here -->
				</div>
				<div class="kt-wizard-v1__nav-item-wrapper" data-ktwizard-type="step-info">
					<!-- step content info here -->
				</div>
			</div>
		</div>
		<!--end: Form Wizard Nav -->

	</div>
	<div class="kt-grid__item kt-grid__item--fluid kt-wizard-v1__wrapper">
		<!--begin: Form Wizard Form-->
		<form class="kt-form" id="k_form">

			<!--begin: Form Wizard Step 1-->
			<div class="kt-wizard-v1__content" data-ktwizard-type="step-content" data-ktwizard-state="current">
				<!-- content here -->
			</div>
			<!--end: Form Wizard Step 1-->

			<!--begin: Form Wizard Step 2-->
			<div class="kt-wizard-v1__content" data-ktwizard-type="step-content">
				<!-- content here -->
			</div>
			<!--end: Form Wizard Step 2-->

			<!--begin: Form Wizard Step 3-->
			<div class="kt-wizard-v1__content" data-ktwizard-type="step-content">
				<!-- content here -->
			</div>
			<!--end: Form Wizard Step 3-->

			<!--begin: Form Wizard Step 4-->
			<div class="kt-wizard-v1__content" data-ktwizard-type="step-content">
				<!-- content here -->
			</div>
			<!--end: Form Wizard Step 4-->

			<!--begin: Form Actions -->
			<div class="kt-form__actions">
				<div class="btn btn-secondary btn-md btn-tall btn-wide kt-font-bold kt-font-transform-u" data-ktwizard-type="action-prev">
					<span>
						<span>Previous</span>
					</span>
				</div>
				<div class="btn btn-success btn-md btn-tall btn-wide kt-font-bold kt-font-transform-u" data-ktwizard-type="action-submit">
					<span>
						<span>Submit</span>
					</span>
				</div>
				<div class="btn btn-info btn-md btn-tall btn-wide kt-font-bold kt-font-transform-u" data-ktwizard-type="action-next">
					<span>
						<span>Next Step</span>
					</span>
				</div>
			</div>
			<!--end: Form Actions -->
		</form>
		<!--end: Form Wizard Form-->
	</div>
</div>

Atrribute Description

data-ktwizard-state

Set the initial KTWizard initial state. The state value will be changed based on interaction to the wizard.

Name	Description
`current`	Current wizard step
`done`	All the previous wizard page step
`pending`	All the next wizard page step

data-ktwizard-type

Name	Description
`step`	Define element as a step number button
`step-info`	Define element as a step info
`step-content`	Define element as a step content
`action-submit`	Define element as action submit button
`action-next`	Define element as action button to the next step
`action-prev`	Define element as action button to the previous step
`action-last`	Define element as action button to the last step
`action-first`	Define element as action button to the first step

API Methods

Method Description

setDefaults(options)

Set default options

Input Parameters
Name	Type	Description
`options`	`object`	A new options object for the menu

goNext()

Go to the next step

goPrev()

Go to the previous step

goLast()

Go to the last step

stop()

Cancel step

start()

Resume step

goFirst()

Go to the first step

goTo(number)

Jump the step page into the specified step number

Input Parameters
Name	Type	Description
`number`	`number`	Number of step to jump

getStep()

Get current step page number

isLastStep()

Check if the current step number is the last step

isFirstStep()

Check if the current step number is the first step

on(name, handler)

Input Parameters
Name	Type	Description
`name`	`string`	Unique event name
`handler`	`function`	Callback function handler for the event

one(name, handler)

Input Parameters
Name	Type	Description
`name`	`string`	Unique event name
`handler`	`function`	Callback function handler for the event