Keen - The Ultimate Multi-Demo Bootstrap Admin Theme

The most complete UI/UX template solution for today's web projects of any size

Keen Wizard

Overview

KTWizard is a Keen's custom plugin defined in [root]/theme/default/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)

Register event

Input Parameters
Name Type Description
name string

Unique event name

handler function

Callback function handler for the event

one(name, handler)

Register event to be run once

Input Parameters
Name Type Description
name string

Unique event name

handler function

Callback function handler for the event