jquery.steps

WebJar for jquery.steps

License	MIT
GroupId	org.webjars.npm
ArtifactId	jquery.steps
Last Version	1.0.1
Release Date	Jan 23, 2018
Type	jar
Description	jquery.steps WebJar for jquery.steps
Project URL	http://webjars.org
Source Code Management	https://github.com/oguzhanoya/jquery-steps

Download jquery.steps

Filename	Size
jquery.steps-1.0.1.pom
jquery.steps-1.0.1.jar	24 KB
jquery.steps-1.0.1-sources.jar	22 bytes
jquery.steps-1.0.1-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/jquery.steps/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>jquery.steps</artifactId>
    <version>1.0.1</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/jquery.steps/
implementation 'org.webjars.npm:jquery.steps:1.0.1'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/jquery.steps/
implementation ("org.webjars.npm:jquery.steps:1.0.1")

Apache Buildr

'org.webjars.npm:jquery.steps:jar:1.0.1'

Apache Ivy

<dependency org="org.webjars.npm" name="jquery.steps" rev="1.0.1">
  <artifact name="jquery.steps" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='jquery.steps', version='1.0.1')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "jquery.steps" % "1.0.1"

Leiningen

[org.webjars.npm/jquery.steps "1.0.1"]

Dependencies

compile (1)

Group / Artifact	Type	Version
org.webjars.npm : jquery	jar	[3.2.1,4)

Project Modules

There are no modules declared in this project.

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

npm install jquery.steps

Github

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

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery-steps.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery-steps.min.js"></script>

Setup

Include plugin stylesheets.

<link rel="stylesheet" href="css/jquery-steps.css">

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

<div class="step-app" id="demo">
  <ul class="step-steps">
    <li data-step-target="step1">Step 1</li>
    <li data-step-target="step2">Step 2</li>
    <li data-step-target="step3">Step 3</li>
  </ul>
  <div class="step-content">
    <div class="step-tab-panel" data-step="step1">
      ...
    </div>
    <div class="step-tab-panel" data-step="step2">
      ...
    </div>
    <div class="step-tab-panel" data-step="step3">
      ...
    </div>
  </div>
  <div class="step-footer">
    <button data-step-action="prev" class="step-btn">Previous</button>
    <button data-step-action="next" class="step-btn">Next</button>
    <button data-step-action="finish" class="step-btn">Finish</button>
  </div>
</div>

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

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jquery-steps.js"></script>

Init plugin with choosen options.

<script>
  $('#demo').steps({
    onFinish: function () { alert('complete'); }
  });
</script>

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

Versions

Version
1.0.1 Jan 23, 2018