jQuery Smart Wizard

https://techlaboratory.net/jquery-smartwizard/
Admin
jQuery Smart Wizard is an accessible step wizard plugin that provides a neat and stylish interface...
Tokens:24,419
Snippets:133
Trust Score:9.4
Update:7 months ago
Show doc for...
Tokens:
Raw
### Implement AJAX Content Loading in jQuery Smart Wizard

Source: https://techlaboratory.net/jquery-smartwizard/v6

This example demonstrates how to implement AJAX content loading for jQuery Smart Wizard using the `getContent` callback function. The `provideContent` function is defined to fetch external content via AJAX before a step is displayed. It handles step direction, position, and uses jQuery's AJAX methods to load and display content, including showing/hiding a loader. The callback must be invoked to proceed with step navigation.

```javascript
// Function to fetch the ajax content
function provideContent(idx, stepDirection, stepPosition, selStep, callback) {
  // You can use stepDirection to get ajax content on the forward movement and stepPosition to identify the step position
  if (stepDirection == 'forward' && stepPosition == 'middle') {
    let ajaxURL = "YOUR AJAX URL";
 
    // Ajax call to fetch your content
    $.ajax({
        method  : "GET",
        url     : ajaxURL,
        beforeSend: function( xhr ) {
            // Show the loader
            $('#smartwizard').smartWizard("loader", "show");
        }
    }).done(function( res ) {
        // Build the content HTML
        let html = `<div class="card w-100" >
                        <div class="card-body">
                            <p class="card-text">${res}</p>
                        </div>
                    </div>`;
 
        // Resolve the Promise with the tab content
        callback(html);
 
        // Hide the loader
        $('#smartwizard').smartWizard("loader", "hide");
    }).fail(function(err) {
        // Handle ajax error
 
        // Hide the loader
        $('#smartwizard').smartWizard("loader", "hide");
    });
  }
 
  // The callback must called in any case to procced the steps
  // The empty callback will not apply any dynamic contents to the steps
  callback();
}
 
// SmartWizard initialize with step content callback
$('#smartwizard').smartWizard({
  getContent: provideContent
});
```

--------------------------------

### Install jQuery SmartWizard using NPM

Source: https://techlaboratory.net/jquery-smartwizard/index

This snippet shows how to install the jQuery SmartWizard plugin using the NPM package manager. Ensure you have Node.js and NPM installed on your system.

```bash
npm install smartwizard
```

--------------------------------

### Install jQuery SmartWizard using Yarn

Source: https://techlaboratory.net/jquery-smartwizard/index

This snippet demonstrates how to install the jQuery SmartWizard plugin using the Yarn package manager. Make sure Yarn is installed globally on your system.

```bash
yarn add smartwizard
```

--------------------------------

### Handle Smart Wizard Load Completion Event

Source: https://techlaboratory.net/jquery-smartwizard/v6

Listens for the 'loaded' event, which fires when the Smart Wizard has fully loaded all its components and content. Ideal for post-load setup or animations.

```javascript
 $("#smartwizard").on("loaded", function(e) {
  console.log("loaded");
});
```

--------------------------------

### Get jQuery SmartWizard Options

Source: https://techlaboratory.net/jquery-smartwizard/v6

Retrieves the current configuration options of the jQuery SmartWizard instance. This is useful for inspecting or dynamically accessing the wizard's settings after initialization. No specific dependencies are required beyond the SmartWizard plugin itself.

```javascript
let options = $('#smartwizard').smartWizard("getOptions");
console.log(options);
```

--------------------------------

### Get jQuery SmartWizard Step Information

Source: https://techlaboratory.net/jquery-smartwizard/v6

Fetches the current step information from the jQuery SmartWizard, including the current step index and the total number of steps. This method is helpful for understanding the wizard's progress and state. It requires the SmartWizard plugin to be initialized on the target element.

```javascript
let stepInfo = $('#smartwizard').smartWizard("getStepInfo");
console.log(stepInfo);
```

--------------------------------

### SmartWizard Initialization Options

Source: https://techlaboratory.net/jquery-smartwizard/v6

This section details the various options available for initializing the SmartWizard plugin. These options allow for customization of the wizard's appearance, behavior, navigation, and more.

```APIDOC
## SmartWizard Initialization Options

### Description
Configuration options for initializing the SmartWizard plugin.

### Method
JavaScript (jQuery plugin)

### Endpoint
N/A (Client-side JavaScript)

### Parameters
#### Optional Parameters
- **selected** (integer) - Initial selected step, 0 = first step
- **theme** (string) - Theme for the wizard (e.g., 'default'). Related CSS needs to be included for themes other than default.
- **justified** (boolean) - Nav menu justification. `true`/`false`.
- **autoAdjustHeight** (boolean) - Automatically adjust content height.
- **backButtonSupport** (boolean) - Enable the back button support.
- **enableUrlHash** (boolean) - Enable selection of the step based on URL hash.
- **transition** (object) - Animation effects for step transitions:
  - **animation** (string) - Effect on navigation (`none`, `fade`, `slideHorizontal`, `slideVertical`, `slideSwing`, `css`).
  - **speed** (string) - Animation speed. Not used if `animation` is 'css'.
  - **easing** (string) - Animation easing. Not supported without a jQuery easing plugin.
  - **prefixCss** (string) - CSS prefix for animations (only used if `animation` is 'css').
  - **fwdShowCss** (string) - Step show animation CSS on forward direction (only used if `animation` is 'css').
  - **fwdHideCss** (string) - Step hide animation CSS on forward direction (only used if `animation` is 'css').
  - **bckShowCss** (string) - Step show animation CSS on backward direction (only used if `animation` is 'css').
  - **bckHideCss** (string) - Step hide animation CSS on backward direction (only used if `animation` is 'css').
- **toolbar** (object) - Toolbar configuration:
  - **position** (string) - Toolbar position (`none`, `top`, `bottom`, `both`).
  - **showNextButton** (boolean) - Show/hide a Next button.
  - **showPreviousButton** (boolean) - Show/hide a Previous button.
  - **extraHtml** (string) - Extra HTML to show on the toolbar.
- **anchor** (object) - Anchor navigation configuration:
  - **enableNavigation** (boolean) - Enable/Disable anchor navigation.
  - **enableNavigationAlways** (boolean) - Activates all anchors clickable always.
  - **enableDoneState** (boolean) - Add done state on visited steps.
  - **markPreviousStepsAsDone** (boolean) - When a step is selected by URL hash, all previous steps are marked done.
  - **unDoneOnBackNavigation** (boolean) - While navigating back, the done state will be cleared.
  - **enableDoneStateNavigation** (boolean) - Enable/Disable the done state navigation.
- **keyboard** (object) - Keyboard navigation configuration:
  - **keyNavigation** (boolean) - Enable/Disable keyboard navigation.
  - **keyLeft** (array) - Left key codes.
  - **keyRight** (array) - Right key codes.
- **lang** (object) - Language settings:
  - **next** (string) - Text for the next button.
  - **previous** (string) - Text for the previous button.
- **disabledSteps** (array) - Array of step indices that are disabled.
- **errorSteps** (array) - Array of step indices that have an error.
- **warningSteps** (array) - Array of step indices that have a warning.
- **hiddenSteps** (array) - Array of step indices that are hidden.
- **getContent** (function) - Callback function for content loading.

### Request Example
```javascript
$('#smartwizard').smartWizard({
  selected: 0, // Initial selected step, 0 = first step
  theme: 'default', // theme for the wizard
  justified: true, // Nav menu justification
  autoAdjustHeight: true, // Automatically adjust content height
  backButtonSupport: true, // Enable the back button support
  enableUrlHash: true, // Enable selection of the step based on url hash
  transition: {
    animation: 'none', // Effect on navigation
    speed: '400' // Animation speed
  },
  toolbar: {
    position: 'bottom', // none|top|bottom|both
    showNextButton: true, // show/hide a Next button
    showPreviousButton: true // show/hide a Previous button
  },
  anchor: {
    enableNavigation: true, // Enable/Disable anchor navigation
    enableDoneState: true // Add done state on visited steps
  },
  keyboard: {
    keyNavigation: true, // Enable/Disable keyboard navigation
    keyLeft: [37], // Left key code
    keyRight: [39] // Right key code
  },
  lang: {
    next: 'Next',
    previous: 'Previous'
  },
  disabledSteps: [], // Array Steps disabled
  errorSteps: [], // Array Steps error
  warningSteps: [], // Array Steps warning
  hiddenSteps: [], // Hidden steps
  getContent: null // Callback function for content loading
});
```

### Response
N/A (Initialization modifies the DOM)

### Response Example
N/A
```

--------------------------------

### Provide Step Content Dynamically with Smart Wizard

Source: https://techlaboratory.net/jquery-smartwizard/v6

Configures a callback function to dynamically generate content for each step. The function receives step information and a callback to set the content. This allows for on-demand content loading.

```javascript
function provideContent(idx, stepDirection, stepPosition, selStep, callback) {
  callback();
}

$('#smartwizard').smartWizard({
  getContent: provideContent
});
```

--------------------------------

### Reset jQuery Smart Wizard to Initial State

Source: https://techlaboratory.net/jquery-smartwizard/v6

Resets the jQuery Smart Wizard to its starting state using a public function. This function is useful for re-initializing the wizard or clearing user progress.

```javascript
$('#smartwizard').smartWizard("reset");
```

--------------------------------

### AJAX Content Implementation

Source: https://techlaboratory.net/jquery-smartwizard/v6

This section explains how to implement external AJAX content for SmartWizard steps using the `getContent` callback function.

```APIDOC
## AJAX Content Implementation

### Description
Implements external AJAX content for SmartWizard steps using the `getContent` callback function.

### Method
JavaScript (Callback function within jQuery plugin)

### Endpoint
N/A (Client-side JavaScript, involves external AJAX calls)

### Parameters
#### `getContent` Callback Function Parameters
- **stepIndex** (integer) - Zero-based index number of the current step.
- **stepDirection** (string) - Direction of the step change (`forward` or `backward`).
- **stepPosition** (string) - Position of the step (`first`, `last`, or `middle`).
- **selStep** (object) - jQuery object of the anchor element for the step to be shown.
- **callback** (function) - A callback function that accepts the HTML content as a string.

### Request Example
```javascript
// Function to fetch the ajax content
function provideContent(idx, stepDirection, stepPosition, selStep, callback) {
  // You can use stepDirection to get ajax content on the forward movement and stepPosition to identify the step position
  if (stepDirection === 'forward' && stepPosition === 'middle') {
    let ajaxURL = "YOUR AJAX URL";

    // Ajax call to fetch your content
    $.ajax({
        method  : "GET",
        url     : ajaxURL,
        beforeSend: function( xhr ) {
            // Show the loader
            $('#smartwizard').smartWizard("loader", "show");
        }
    }).done(function( res ) {
        // Build the content HTML
        let html = `<div class="card w-100" >
                        <div class="card-body">
                            <p class="card-text">${res}</p>
                        </div>
                    </div>`;

        // Resolve the Promise with the tab content
        callback(html);

        // Hide the loader
        $('#smartwizard').smartWizard("loader", "hide");
    }).fail(function(err) {
        // Handle ajax error

        // Hide the loader
        $('#smartwizard').smartWizard("loader", "hide");
    });
  }

  // The callback must be called in any case to proceed the steps
  // The empty callback will not apply any dynamic contents to the steps
  callback();
}

// SmartWizard initialize with step content callback
$('#smartwizard').smartWizard({
  getContent: provideContent
});
```

### Response
N/A (The `callback` function within `getContent` is used to pass content)

### Response Example
N/A
```

--------------------------------

### Configuration Options

Source: https://techlaboratory.net/jquery-smartwizard/v6

Provides a comprehensive list of configuration options for initializing and customizing the jQuery SmartWizard.

```APIDOC
## Configuration Options for jQuery SmartWizard

### Description
These options can be passed during the initialization of the SmartWizard to customize its behavior and appearance.

### Method
Initialization (e.g., `$('#smartwizard').smartWizard(options);`)

### Endpoint
N/A (Initialization)

### Parameters
#### General Options
- **selected** (integer) - Initial selected step, 0 = first step. Default: `0`
- **theme** (string) - Theme for the wizard. Default: `'default'`
- **justified** (boolean) - Nav menu justification. Default: `true`
- **autoAdjustHeight** (boolean) - Automatically adjust content height. Default: `true`
- **backButtonSupport** (boolean) - Enable the back button support. Default: `true`
- **enableUrlHash** (boolean) - Enable selection of the step based on url hash. Default: `true`

#### Transition Options (`transition` object)
- **animation** (string) - Effect on navigation. Options: `none`, `fade`, `slideHorizontal`, `slideVertical`, `slideSwing`, `css` (requires CSS class specification).
- **speed** (string) - Animation speed.
- **easing** (string) - Animation easing.
- **prefixCss** (string) - Animation CSS prefix (used with `animation: 'css'`).
- **fwdShowCss** (string) - Step show Animation CSS class on forward (used with `animation: 'css'`).
- **fwdHideCss** (string) - Step hide Animation CSS class on forward (used with `animation: 'css'`).
- **bckShowCss** (string) - Step show Animation CSS class on backward (used with `animation: 'css'`).
- **bckHideCss** (string) - Step hide Animation CSS class on backward (used with `animation: 'css'`).

#### Toolbar Options (`toolbar` object)
- **position** (string) - Position of the toolbar. Options: `none`, `top`, `bottom`, `both`. Default: `'bottom'`
- **showNextButton** (boolean) - Show/hide the Next button. Default: `true`
- **showPreviousButton** (boolean) - Show/hide the Previous button. Default: `true`
- **extraHtml** (string) - Extra HTML content to display in the toolbar.

#### Anchor Options (`anchor` object)
- **enableNavigation** (boolean) - Enable/disable anchor navigation. Default: `true`
- **enableNavigationAlways** (boolean) - Activates all anchors to be clickable at all times. Default: `false`
- **enableDoneState** (boolean) - Add a 'done' state to navigation steps. Default: `true`
- **markPreviousStepsAsDone** (boolean) - When a step is selected by URL hash, mark all previous steps as done. Default: `true`
- **unDoneOnBackNavigation** (boolean) - Clear the 'done' state of steps when navigating back past them. Default: `false`
- **enableDoneStateNavigation** (boolean) - Enable/disable navigation to steps that are in the 'done' state. Default: `true`

### Request Example (Initialization)
```javascript
// Using built-in transition animation
$('#smartwizard').smartWizard({
  transition: {
    animation: 'slideHorizontal' // Effect on navigation
  }
});

// Using CSS transition animation (requires Animate.css)
$('#smartwizard').smartWizard({
  transition: {
    animation: 'css',
    prefixCss: 'animate__animated animate__faster',
    fwdShowCss: 'animate__bounceIn',
    fwdHideCss: 'animate__bounceOut',
    bckShowCss: 'animate__bounceIn',
    bckHideCss: 'animate__bounceOut'
  }
});

// Customizing toolbar with finish and cancel buttons
function onFinish(){
  alert('Finish Clicked');
}
function onCancel(){
  $('#smartwizard').smartWizard("reset");
}
$('#smartwizard').smartWizard({
  toolbar: {
    showNextButton: true,
    showPreviousButton: true,
    position: 'both',
    extraHtml: `<button class="btn btn-success" onclick="onFinish()">Finish</button>
                <button class="btn btn-secondary" onclick="onCancel()">Cancel</button>`
  }
});

// Customizing anchor navigation behavior
$('#smartwizard').smartWizard({
  anchor: {
    enableNavigation: true,
    enableNavigationAlways: false,
    enableDoneState: true,
    markPreviousStepsAsDone: true,
    unDoneOnBackNavigation: false,
    enableDoneStateNavigation: true
  }
});
```

### Response
#### Success Response (200)
Initialization completes, and the wizard is rendered with the specified options.

#### Response Example
(No direct JSON response for initialization, but the wizard's state reflects the options)
```json
{
  "message": "SmartWizard initialized successfully with provided options."
}
```
```

--------------------------------

### Configuration Options

Source: https://techlaboratory.net/jquery-smartwizard/index

This section details the various configuration options available for initializing jQuery SmartWizard.

```APIDOC
## Configuration Options

### keyboard
**(object)** Settings for the keyboard with the following options:
  * **keyNavigation** - (boolean) Enable/Disable keyboard navigation
  * **keyLeft** - (array) Left key code
  * **keyRight** - (array) Right key code

**Example Usage**
```javascript
$('#smartwizard').smartWizard({
  keyboard: {
      keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
      keyLeft: [37], // Left key code
      keyRight: [39] // Right key code
  }
});
```

### lang
**(object)** Language settings with the following options:
  * **next** - (string) Next button label
  * **previous** - (string) Previous button label

**Example Usage**
```javascript
$('#smartwizard').smartWizard({
  lang: { // Language variables for button
      next: 'Next',
      previous: 'Previous'
  }
});
```

### style
**(object)** The CSS class names are configurable but normally you don't have to change this.
**Example Usage**
```javascript
$('#smartwizard').smartWizard({
  style: { // CSS Class settings
    mainCss: 'sw',
    navCss: 'nav',
    navLinkCss: 'nav-link',
    contentCss: 'tab-content',
    contentPanelCss: 'tab-pane',
    themePrefixCss: 'sw-theme-',
    anchorDefaultCss: 'default',
    anchorDoneCss: 'done',
    anchorActiveCss: 'active',
    anchorDisabledCss: 'disabled',
    anchorHiddenCss: 'hidden',
    anchorErrorCss: 'error',
    anchorWarningCss: 'warning',
    justifiedCss: 'sw-justified',
    btnCss: 'sw-btn',
    btnNextCss: 'sw-btn-next',
    btnPrevCss: 'sw-btn-prev',
    loaderCss: 'sw-loading',
    progressCss: 'progress',
    progressBarCss: 'progress-bar',
    toolbarCss: 'toolbar',
    toolbarPrefixCss: 'toolbar-',
  }
});
```

### disabledSteps
**(array)** Steps disabled. Default value is `[]`.
```javascript
$('#smartwizard').smartWizard({
  disabledSteps: [0,1]
});
```

### errorSteps
**(array)** Step with errors. Default value is `[]`.
```javascript
$('#smartwizard').smartWizard({
  errorSteps: [1]
});
```

### warningSteps
**(array)** Step with warnings. Default value is `[]`.
```javascript
$('#smartwizard').smartWizard({
  warningSteps: [1]
});
```

### hiddenSteps
**(array)** Hidden steps. Default value is `[]`.
```javascript
$('#smartwizard').smartWizard({
  hiddenSteps: [2,3]
});
```

### getContent
**(function)** Callback function to provide step content. Default value is `null`.
```javascript
function provideContent(idx, stepDirection, stepPosition, selStep, callback) {
  callback();
}

$('#smartwizard').smartWizard({
  getContent: provideContent
});
```
```

--------------------------------

### SmartWizard Initialization Options

Source: https://techlaboratory.net/jquery-smartwizard/index

Configuration options for initializing the jQuery SmartWizard plugin.

```APIDOC
## POST /websites/techlaboratory_net_jquery-smartwizard/initialize

### Description
Initializes the jQuery SmartWizard with various configuration options.

### Method
POST

### Endpoint
`$('#smartwizard').smartWizard(options);
`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **selected** (integer) - Initial selected step, 0 = first step. Default: `0`
- **theme** (string) - Theme for the wizard. Default: `'default'`
- **justified** (boolean) - Nav menu justification. Default: `true`
- **autoAdjustHeight** (boolean) - Automatically adjust content height. Default: `true`
- **backButtonSupport** (boolean) - Enable the back button support. Default: `true`
- **enableUrlHash** (boolean) - Enable selection of the step based on url hash. Default: `true`
- **transition** (object) - Settings for transition animation with the following options:
  * **animation** - (string) Effect on navigation (`none`|`fade`|`slideHorizontal`|`slideVertical`|`slideSwing`|`css`)
  * **speed** - (string) Animation speed
  * **easing** - (string) Animation easing
  * **prefixCss** - (string) Animation CSS prefix
  * **fwdShowCss** - (string) Step show Animation CSS on forward
  * **fwdHideCss** - (string) Step hide Animation CSS on forward
  * **bckShowCss** - (string) Step show Animation CSS on backward
  * **bckHideCss** - (string) Step hide Animation CSS on backward
- **toolbar** (object) - Settings for the toolbar with the following options:
  * **position** - (string) `none`|`top`|`bottom`|`both`
  * **showNextButton** - (boolean) show/hide a Next button
  * **showPreviousButton** - (boolean) show/hide a Previous button
  * **extraHtml** - (string) Extra html to show on toolbar
- **anchor** (object) - Settings for the anchor with the following options:
  * **enableNavigation** - (boolean) Enable/Disable anchor navigation
  * **enableNavigationAlways** - (boolean) Activates all anchors clickable all times
  * **enableDoneState** - (boolean) Add done state on navigation
  * **markPreviousStepsAsDone** - (boolean) When a step selected by url hash, all previous steps are marked done
  * **unDoneOnBackNavigation** - (boolean) While navigate back done step after active step will be cleared
  * **enableDoneStateNavigation** - (boolean) Enable/Disable the done steps navigation

### Request Example
```javascript
// Using an built-in transition animation
$('#smartwizard').smartWizard({
  transition: {
      animation: 'slideHorizontal' // Effect on navigation, none|fade|slideHorizontal|slideVertical|slideSwing|css(Animation CSS class also need to specify)
  }
});

// Using an css transition animation. You need to include Animate.css 
$('#smartwizard').smartWizard({
  transition: {
      animation: 'css', // Effect on navigation, none|fade|slideHorizontal|slideVertical|slideSwing|css(Animation CSS class also need to specify)
      prefixCss: 'animate__animated animate__faster',
      fwdShowCss: 'animate__bounceIn',
      fwdHideCss: 'animate__bounceOut',
      bckShowCss: 'animate__bounceIn',
      bckHideCss: 'animate__bounceOut'
  }
});

function onFinish(){
  alert('Finish Clicked');
}

function onCancel(){
  $('#smartwizard').smartWizard("reset");
}

$('#smartwizard').smartWizard({
  toolbar: {
    showNextButton: true,
    showPreviousButton: true,
    position: 'both',
    extraHtml: `<button class="btn btn-success" onclick="onFinish()">Finish</button>
                <button class="btn btn-secondary" onclick="onCancel()">Cancel</button>`
  }
});

$('#smartwizard').smartWizard({
  anchor: {
      anchorClickable: true, // Enable/Disable anchor navigation
      enableAllAnchors: false, // Activates all anchors clickable all times
      markDoneStep: true, // Add done state on navigation
      markAllPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
      removeDoneStepOnNavigateBack: false, // While navigate back done step after active step will be cleared
      enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
  }
});
```

### Response
#### Success Response (200)
Indicates the wizard was successfully initialized.

#### Response Example
(No specific response body is documented for this method, typically it's a success status.)
```

--------------------------------

### getOptions

Source: https://techlaboratory.net/jquery-smartwizard/v6

Retrieves the current options of the jQuery SmartWizard instance.

```APIDOC
## GET /websites/techlaboratory_net_jquery-smartwizard/getOptions

### Description
Gets the current options of the jQuery SmartWizard instance.

### Method
GET

### Endpoint
`$('#smartwizard').smartWizard("getOptions")`

### Parameters
None

### Request Example
```javascript
let options = $('#smartwizard').smartWizard("getOptions");
console.log(options);
```

### Response
#### Success Response (200)
- **options** (object) - An object containing the current configuration options of the wizard.

#### Response Example
```json
{
  "options": {
    "selected": 0,
    "theme": "default",
    "justified": true,
    "autoAdjustHeight": true,
    "backButtonSupport": true,
    "enableUrlHash": true,
    "transition": {
      "animation": "slideHorizontal",
      "speed": "",
      "easing": "",
      "prefixCss": "",
      "fwdShowCss": "",
      "fwdHideCss": "",
      "bckShowCss": "",
      "bckHideCss": ""
    },
    "toolbar": {
      "position": "bottom",
      "showNextButton": true,
      "showPreviousButton": true,
      "extraHtml": ""
    },
    "anchor": {
      "enableNavigation": true,
      "enableNavigationAlways": false,
      "enableDoneState": true,
      "markPreviousStepsAsDone": true,
      "unDoneOnBackNavigation": false,
      "enableDoneStateNavigation": true
    }
  }
}
```
```

--------------------------------

### getStepInfo

Source: https://techlaboratory.net/jquery-smartwizard/v6

Retrieves information about the current step and total steps in the wizard.

```APIDOC
## GET /websites/techlaboratory_net_jquery-smartwizard/getStepInfo

### Description
Gets the current step information, including the current step index and the total number of steps.

### Method
GET

### Endpoint
`$('#smartwizard').smartWizard("getStepInfo")`

### Parameters
None

### Request Example
```javascript
let stepInfo = $('#smartwizard').smartWizard("getStepInfo");
console.log(stepInfo);
```

### Response
#### Success Response (200)
- **currentStep** (integer) - The index of the currently active step (0-based).
- **totalSteps** (integer) - The total number of steps in the wizard.

#### Response Example
```json
{
  "currentStep": 1,
  "totalSteps": 4
}
```
```

--------------------------------

### Initialize Smart Wizard with ES6 Modules

Source: https://techlaboratory.net/jquery-smartwizard/v6

This JavaScript snippet demonstrates initializing the jQuery Smart Wizard using ES6 import syntax. It imports jQuery and the smartwizard module, and requires the CSS to be included separately.

```javascript
import $ from "jquery";
import "smartwizard/dist/css/smart_wizard_all.css";
import smartWizard from 'smartwizard';

$(function() {
  $('#smartwizard').smartWizard();
});
```

--------------------------------

### Initialize Smart Wizard with CommonJS

Source: https://techlaboratory.net/jquery-smartwizard/v6

This JavaScript snippet shows how to initialize the jQuery Smart Wizard using CommonJS module syntax. It requires jQuery and the smartwizard module, and assumes the CSS is also included.

```javascript
var $ = require("jquery");
require("smartwizard/dist/css/smart_wizard_all.css");
const smartWizard = require("smartwizard");

$(function() {
  $('#smartwizard').smartWizard();
});
```

--------------------------------

### Optional Parameters Configuration

Source: https://techlaboratory.net/jquery-smartwizard/index

This section details the various optional parameters available for initializing the Smart Wizard, allowing for extensive customization of its behavior and appearance.

```APIDOC
## Initialize Smart Wizard with Optional Parameters

### Description
Configure the behavior and appearance of the Smart Wizard using a comprehensive set of optional parameters.

### Method
JavaScript Initialization

### Endpoint
N/A (Client-side configuration)

### Parameters
#### Options Object
- **selected** (integer) - Initial selected step, 0 = first step
- **theme** (string) - Theme for the wizard (e.g., 'default'). Related CSS must be included for non-default themes.
- **justified** (boolean) - Nav menu justification (true/false).
- **autoAdjustHeight** (boolean) - Automatically adjust content height.
- **backButtonSupport** (boolean) - Enable the back button support.
- **enableUrlHash** (boolean) - Enable selection of the step based on URL hash.
- **transition** (object) - Controls step transition animations:
  - **animation** (string) - Effect on navigation ('none', 'fade', 'slideHorizontal', 'slideVertical', 'slideSwing', 'css').
  - **speed** (string) - Animation speed (not used if animation is 'css').
  - **easing** (string) - Animation easing (requires a jQuery easing plugin).
  - **prefixCss** (string) - CSS prefix for 'css' animation.
  - **fwdShowCss** (string) - Step show animation CSS on forward direction ('css' animation only).
  - **fwdHideCss** (string) - Step hide animation CSS on forward direction ('css' animation only).
  - **bckShowCss** (string) - Step show animation CSS on backward direction ('css' animation only).
  - **bckHideCss** (string) - Step hide animation CSS on backward direction ('css' animation only).
- **toolbar** (object) - Controls the toolbar:
  - **position** (string) - Toolbar position ('none', 'top', 'bottom', 'both').
  - **showNextButton** (boolean) - Show/hide the Next button.
  - **showPreviousButton** (boolean) - Show/hide the Previous button.
  - **extraHtml** (string) - Extra HTML to display on the toolbar.
- **anchor** (object) - Controls anchor navigation and states:
  - **enableNavigation** (boolean) - Enable/Disable anchor navigation.
  - **enableNavigationAlways** (boolean) - Activates all anchors clickable always.
  - **enableDoneState** (boolean) - Add done state on visited steps.
  - **markPreviousStepsAsDone** (boolean) - Mark previous steps as done when a step is selected by URL hash.
  - **unDoneOnBackNavigation** (boolean) - Clear done state when navigating back.
  - **enableDoneStateNavigation** (boolean) - Enable/Disable navigation using done states.
- **keyboard** (object) - Controls keyboard navigation:
  - **keyNavigation** (boolean) - Enable/Disable keyboard navigation.
  - **keyLeft** (array) - Array of key codes for the left arrow key.
  - **keyRight** (array) - Array of key codes for the right arrow key.
- **lang** (object) - Language strings:
  - **next** (string) - Text for the 'Next' button.
  - **previous** (string) - Text for the 'Previous' button.
- **disabledSteps** (array) - Array of step indices to disable.
- **errorSteps** (array) - Array of step indices to mark with an error state.
- **warningSteps** (array) - Array of step indices to mark with a warning state.
- **hiddenSteps** (array) - Array of step indices to hide.
- **getContent** (function) - Callback function for dynamic content loading.

### Request Example
```javascript
$("#smartwizard").smartWizard({
  selected: 0, 
  theme: "default", 
  justified: true, 
  autoAdjustHeight: true, 
  backButtonSupport: true, 
  enableUrlHash: true, 
  transition: {
    animation: 'none',
    speed: '400'
  },
  toolbar: {
    position: 'bottom',
    showNextButton: true,
    showPreviousButton: true
  },
  anchor: {
    enableNavigation: true
  },
  keyboard: {
    keyNavigation: true,
    keyLeft: [37],
    keyRight: [39]
  },
  lang: {
    next: 'Next',
    previous: 'Previous'
  },
  disabledSteps: [],
  errorSteps: [],
  warningSteps: [],
  hiddenSteps: []
});
```

### Response
N/A (Client-side configuration)
```

--------------------------------

### AJAX Content Implementation

Source: https://techlaboratory.net/jquery-smartwizard/index

This section explains how to implement external AJAX content loading for wizard steps using the `getContent` callback function.

```APIDOC
## AJAX Content Implementation

### Description
Implement external AJAX content for wizard steps using the `getContent` callback function. This function is invoked before each step is displayed, allowing for dynamic content retrieval.

### Method
JavaScript Callback Function

### Endpoint
N/A (Client-side callback)

### Parameters
#### `getContent` Callback Function
This function is called before showing each step and receives the following parameters:
- **stepIndex** (integer) - Zero-based index number of the current step.
- **stepDirection** (string) - Direction of the step change ('forward' or 'backward').
- **stepPosition** (string) - Position of the step ('first', 'last', or 'middle').
- **selStep** (object) - jQuery object of the anchor element for the step to be shown.
- **callback** (function) - A callback function that accepts the HTML content as a string.

### Request Example
```javascript
// Function to fetch the ajax content
function provideContent(idx, stepDirection, stepPosition, selStep, callback) {
  // Example: Fetch content only on forward movement and for middle steps
  if (stepDirection === 'forward' && stepPosition === 'middle') {
    let ajaxURL = "YOUR_AJAX_URL";

    // Ajax call to fetch your content
    $.ajax({
        method: "GET",
        url: ajaxURL,
        beforeSend: function(xhr) {
            // Show the loader
            $('#smartwizard').smartWizard("loader", "show");
        }
    }).done(function(res) {
        // Build the content HTML
        let html = `<div class=\"card w-100\" >
                        <div class=\"card-body\">
                            <p class=\"card-text\">${res}</p>
                        </div>
                    </div>`;

        // Resolve the Promise with the tab content
        callback(html);

        // Hide the loader
        $('#smartwizard').smartWizard("loader", "hide");
    }).fail(function(err) {
        // Handle ajax error
        console.error("AJAX Error:", err);

        // Hide the loader
        $('#smartwizard').smartWizard("loader", "hide");
    });
  } else {
    // The callback must be called in any case to proceed the steps
    // An empty callback will not apply any dynamic contents to the steps
    callback();
  }
}

// SmartWizard initialize with step content callback
$('#smartwizard').smartWizard({
  getContent: provideContent
});
```

### Response
#### Success Response
- **html content** (string) - The HTML string representing the content for the step, passed to the `callback` function.
```

--------------------------------

### Configure jQuery Smart Wizard with Optional Parameters

Source: https://techlaboratory.net/jquery-smartwizard/v6

This snippet shows how to initialize the jQuery Smart Wizard with various optional parameters to customize its behavior, appearance, and navigation. It covers settings for step selection, themes, height adjustment, URL hash support, transition effects, toolbar options, anchor navigation, keyboard controls, language settings, and step states (disabled, error, warning, hidden).

```javascript
 $('#smartwizard').smartWizard({
  selected: 0, // Initial selected step, 0 = first step
  theme: 'default', // theme for the wizard, related css need to include for other than default theme
  justified: true, // Nav menu justification. true/false
  autoAdjustHeight: true, // Automatically adjust content height
  backButtonSupport: true, // Enable the back button support
  enableUrlHash: true, // Enable selection of the step based on url hash
  transition: {
    animation: 'none', // Effect on navigation, none|fade|slideHorizontal|slideVertical|slideSwing|css
    speed: '400', // Animation speed. Not used if animation is 'css'
    easing: '', // Animation easing. Not supported without a jQuery easing plugin
    prefixCss: '', // Only used if animation is 'css'. Animation CSS prefix
    fwdShowCss: '', // Only used if animation is 'css'. Step show Animation CSS on forward direction
    fwdHideCss: '', // Only used if animation is 'css'. Step hide Animation CSS on forward direction
    bckShowCss: '', // Only used if animation is 'css'. Step show Animation CSS on backward direction
    bckHideCss: '', // Only used if animation is 'css'. Step hide Animation CSS on backward direction
  },
  toolbar: {
    position: 'bottom', // none|top|bottom|both
    showNextButton: true, // show/hide a Next button
    showPreviousButton: true, // show/hide a Previous button
    extraHtml: '' // Extra html to show on toolbar
  },
  anchor: {
    enableNavigation: true, // Enable/Disable anchor navigation
    enableNavigationAlways: false, // Activates all anchors clickable always
    enableDoneState: true, // Add done state on visited steps
    markPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
    unDoneOnBackNavigation: false, // While navigate back, done state will be cleared
    enableDoneStateNavigation: true // Enable/Disable the done state navigation
  },
  keyboard: {
    keyNavigation: true, // Enable/Disable keyboard navigation
    keyLeft: [37], // Left key code
    keyRight: [39] // Right key code
  },
  lang: {
    next: 'Next',
    previous: 'Previous'
  },
  disabledSteps: [], // Array Steps disabled
  errorSteps: [], // Array Steps error
  warningSteps: [], // Array Steps warning
  hiddenSteps: [], // Hidden steps
  getContent: null // Callback function for content loading
});
```

--------------------------------

### Initialize Smart Wizard with jQuery

Source: https://techlaboratory.net/jquery-smartwizard/v6

This JavaScript snippet shows the basic initialization of the jQuery Smart Wizard plugin on an HTML element with the ID 'smartwizard'. It requires jQuery to be loaded first.

```javascript
$(function() {
  // SmartWizard initialize
  $('#smartwizard').smartWizard();
});
```

--------------------------------

### Mark Steps with Warnings in Smart Wizard

Source: https://techlaboratory.net/jquery-smartwizard/v6

Identifies steps with warnings, providing visual cues to the user. Accepts an array of step indices. Useful for non-critical issues that require attention.

```javascript
 $('#smartwizard').smartWizard({
  warningSteps: [1]
});
```

--------------------------------

### getOptions

Source: https://techlaboratory.net/jquery-smartwizard/index

Retrieves the current options of the jQuery SmartWizard instance.

```APIDOC
## GET /websites/techlaboratory_net_jquery-smartwizard/getOptions

### Description
Gets the jQuery SmartWizard options.

### Method
GET

### Endpoint
`$('#smartwizard').smartWizard("getOptions");`

### Parameters
None

### Request Example
```javascript
let options = $('#smartwizard').smartWizard("getOptions");
console.log(options);
```

### Response
#### Success Response (200)
- **options** (object) - An object containing the current SmartWizard options.

#### Response Example
```json
{
  "currentStep": 1,
  "totalSteps": 4,
  "theme": "default",
  "transition": {
    "animation": "slideHorizontal",
    "speed": "",
    "easing": "",
    "prefixCss": "",
    "fwdShowCss": "",
    "fwdHideCss": "",
    "bckShowCss": "",
    "bckHideCss": ""
  }
}
```
```

--------------------------------

### Handle Smart Wizard Initialization Event

Source: https://techlaboratory.net/jquery-smartwizard/v6

Listens for the 'initialized' event, which is triggered when the Smart Wizard has finished its initialization process. Useful for performing actions immediately after the wizard is ready.

```javascript
 $("#smartwizard").on("initialized", function(e) {
  console.log("initialized");
});
```

--------------------------------

### Include Smart Wizard CSS via CDN

Source: https://techlaboratory.net/jquery-smartwizard/v6

This snippet shows how to include the necessary CSS file for jQuery Smart Wizard using jsDelivr or UNPKG CDNs. This is essential for styling the wizard components.

```html
<link href="https://cdn.jsdelivr.net/npm/smartwizard@6/dist/css/smart_wizard_all.min.css" rel="stylesheet" type="text/css" />
```

```html
<link href="https://unpkg.com/smartwizard@6/dist/css/smart_wizard_all.min.css" rel="stylesheet" type="text/css" />
```

--------------------------------

### Include Smart Wizard JavaScript via CDN

Source: https://techlaboratory.net/jquery-smartwizard/v6

This snippet demonstrates how to include the jQuery Smart Wizard JavaScript file using jsDelivr or UNPKG CDNs. Ensure jQuery is included before this script.

```html
<script src="https://cdn.jsdelivr.net/npm/smartwizard@6/dist/js/jquery.smartWizard.min.js" type="text/javascript"></script>
```

```html
<script src="https://unpkg.com/smartwizard@6/dist/js/jquery.smartWizard.min.js" type="text/javascript"></script>
```

--------------------------------

### Extend jQuery Smart Wizard Transition Animations

Source: https://techlaboratory.net/jquery-smartwizard/v6

Enables the creation of custom transition animations for jQuery Smart Wizard. New animations can be added to the `$.fn.smartWizard.transitions` object, accepting parameters like elements to show/hide, direction, wizard object, and a callback.

```javascript
// Smart Wizard initialize using custom transition animation
$('#smartwizard').smartWizard({
    transition: {
      animation:'myAnimation'
    }}
});

// Add your custom animation function
$.fn.smartWizard.transitions.myAnimation = (elmToShow, elmToHide, stepDirection, wizardObj, callback) => {
  if (!$.isFunction(elmToShow.fadeOut)) { callback(false); return; }

  if (elmToHide) {
      elmToHide.fadeOut(wizardObj.options.transition.speed, wizardObj.options.transition.easing, () => {
          elmToShow.fadeIn(wizardObj.options.transition.speed, wizardObj.options.transition.easing, () => {
              callback();
          });
      });
  } else {
      elmToShow.fadeIn(wizardObj.options.transition.speed, wizardObj.options.transition.easing, () => {
          callback();
      });
  }
}
```

--------------------------------

### Go to Specific Step in jQuery Smart Wizard

Source: https://techlaboratory.net/jquery-smartwizard/v6

Allows direct navigation to a specific step in the jQuery Smart Wizard. The `goToStep` function accepts a zero-based step index and an optional boolean to force navigation, bypassing visited checks.

```javascript
// Go to step without force
$('#smartwizard').smartWizard("goToStep", 3);

// Go to step with force
$('#smartwizard').smartWizard("goToStep", 3, true);
```

--------------------------------

### Handle Smart Wizard Step Show Event

Source: https://techlaboratory.net/jquery-smartwizard/v6

Triggers when a step is about to be displayed. Provides information about the step being shown, including its index, direction, and position. Useful for dynamic content loading or UI updates.

```javascript
 $("#smartwizard").on("showStep", function(e, anchorObject, stepIndex, stepDirection, stepPosition) {
  alert("You are on step " + stepIndex + " now");
});
```

--------------------------------

### getStepInfo

Source: https://techlaboratory.net/jquery-smartwizard/index

Retrieves information about the current step and total steps in the wizard.

```APIDOC
## GET /websites/techlaboratory_net_jquery-smartwizard/getStepInfo

### Description
Gets the jQuery SmartWizard step info. Ex: `{ currentStep: 1, totalSteps: 4 }`

### Method
GET

### Endpoint
`$('#smartwizard').smartWizard("getStepInfo");`

### Parameters
None

### Request Example
```javascript
let stepInfo = $('#smartwizard').smartWizard("getStepInfo");
console.log(stepInfo);
```

### Response
#### Success Response (200)
- **stepInfo** (object) - An object containing `currentStep` and `totalSteps`.

#### Response Example
```json
{
  "currentStep": 1,
  "totalSteps": 4
}
```
```

--------------------------------

### Configure CSS Styles for Smart Wizard

Source: https://techlaboratory.net/jquery-smartwizard/v6

Allows customization of CSS class names used by the Smart Wizard for various elements. This enables fine-grained control over the wizard's appearance.

```javascript
 $('#smartwizard').smartWizard({
  style: { // CSS Class settings
    mainCss: 'sw',
    navCss: 'nav',
    navLinkCss: 'nav-link',
    contentCss: 'tab-content',
    contentPanelCss: 'tab-pane',
    themePrefixCss: 'sw-theme-',
    anchorDefaultCss: 'default',
    anchorDoneCss: 'done',
    anchorActiveCss: 'active',
    anchorDisabledCss: 'disabled',
    anchorHiddenCss: 'hidden',
    anchorErrorCss: 'error',
    anchorWarningCss: 'warning',
    justifiedCss: 'sw-justified',
    btnCss: 'sw-btn',
    btnNextCss: 'sw-btn-next',
    btnPrevCss: 'sw-btn-prev',
    loaderCss: 'sw-loading',
    progressCss: 'progress',
    progressBarCss: 'progress-bar',
    toolbarCss: 'toolbar',
    toolbarPrefixCss: 'toolbar-',
  }
});
```
Tokens:
Raw