https://github.com/oguzhanoya/jquery-steps

✅ Lightweight jQuery step wizard plugin.
https://github.com/oguzhanoya/jquery-steps

jquery jquery-plugin step-wizard wizard wizard-steps

Last synced: about 1 month ago
JSON representation

✅ Lightweight jQuery step wizard plugin.

• Host: GitHub
• URL: https://github.com/oguzhanoya/jquery-steps
• Owner: oguzhanoya
• Created: 2017-04-19T22:50:45.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-31T02:31:57.000Z (almost 2 years ago)
• Last Synced: 2024-10-31T15:41:04.660Z (about 2 months ago)
• Topics: jquery, jquery-plugin, step-wizard, wizard, wizard-steps
• Language: JavaScript
• Homepage: https://oguzhanoya.github.io/jquery-steps/
• Size: 424 KB
• Stars: 106
• Watchers: 6
• Forks: 25
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## ![jquery-steps](https://oguzhanoya.github.io/jquery-steps/img/logo.svg)

[![npm](https://img.shields.io/npm/v/jquery.steps)](https://www.npmjs.com/package/jquery.steps)

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

[![npm](https://img.shields.io/npm/dm/jquery.steps)](https://www.npmjs.com/package/jquery.steps)

[![npm](https://img.shields.io/jsdelivr/npm/hm/jquery.steps)](https://www.jsdelivr.com/package/npm/jquery.steps)

> A simple, lightweight jQuery step wizard plugin.

## Features

- Easy configuration

- Lightweight (2KB gzipped)

- Works in all major browsers including IE11+

## Compatibility

IE11+, Edge, Chrome, Firefox, Opera, Safari

## Installation

NPM

```sh

npm install jquery.steps

```

Github

```sh

git clone http://github.com/oguzhanoya/jquery-steps.git

```

CDN

```html

```

## Setup

Include plugin stylesheets.

```html

```

Make necessary markup for wizard. That's all, you don't need to do anything else.

```html



  


    
Step 1

    
Step 2

    
Step 3

  

  


    


      ...

    

    


      ...

    

    


      ...

    

  

  


    Previous

    Next

    Finish

  



```

Include plugin and dependeces. jQuery is the only dependency, make sure to include it.

```html


```

Init plugin with choosen options.

```html

  $('#demo').steps({

    onFinish: function () { alert('complete'); }

  });

```

## Configuration

|Setting|Default Value|Description|

|---|---|---|

|startAt|`0`|Starts wizard at specifed step number.|

|showBackButton|`true`|Indicates whether the back button will be visible.|

|showFooterButtons|`true`|Indicates whether the footer buttons will be visible.|

|stepSelector|`.step-steps`|The selector used for each step.|

|contentSelector|`.step-content`|The selector used for the step content.|

|footerSelector|`.step-footer`|The selector used for the buttons.|

|activeClass|`active`|The class used when a step is active.|

|doneClass|`done`|The class used when a step is done.|

|errorClass|`error`|The class used when an error occurs in a step.|

|onInit|`function(){}`|Fired when plugin is initialized.|

|onChange|`function(currentIndex, newIndex, stepDirection){return true;}`|Fired when plugin step changed.|

|onFinish|`function(){}`|Fired when plugin wizard finished.|

|onDestroy|`function(){}`|Fired when plugin destroy.|

## Methods

|Name|Description|

|---|---|

|destory|Destroy the plugin instance.|

|next|Goes to the next step.|

|prev|Goes to the previous step.|

|finish|Trigger the onFinish event.|

|getStepIndex|Gets the current step index.(start from 0)|

|getMaxStepIndex|Gets the max step index.|

|setStepIndex|Sets the step index.|

## License

MIT