Skip to content

Refactor README for improved clarity and structure #186

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Refactor README for improved clarity and structure #186

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
350 changes: 113 additions & 237 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,273 +1,149 @@
# jQuery Smart Wizard v6
### The awesome step wizard plugin for jQuery

[![Build Status](https://travis-ci.org/techlab/jquery-smartwizard.svg?branch=master)](https://travis-ci.org/techlab/jquery-smartwizard)
[![npm version](https://badge.fury.io/js/smartwizard.svg)](https://www.npmjs.com/package/smartwizard)
[![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/smartwizard/badge?style=rounded)](https://www.jsdelivr.com/package/npm/smartwizard)
[![Npm Downloadsl](https://badgen.net/npm/dm/smartwizard?icon=npm)](https://www.npmjs.com/package/smartwizard)
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/techlab/jquery-smartwizard/master/LICENSE)
[![GitHub Repo](https://badgen.net/badge/icon/jquery-smartwizard?icon=github&label=&color=0da4d3)](https://github.com/techlab/jquery-smartwizard)
[![GitHub Sponsor](https://img.shields.io/badge/Sponsor-techlab-blue.svg?logo=github)](https://github.com/sponsors/techlab)
[![Donate on Paypal](https://img.shields.io/badge/PayPal-dipuraj-blue.svg)](https://www.paypal.me/dipuraj)
<p align="center">
<a href="https://git.io/typing-svg"><img src="https://readme-typing-svg.herokuapp.com?font=Fira+Code&size=28&pause=1000&color=0DA4D3&center=true&vCenter=true&width=550&lines=The+awesome+step+wizard+plugin+for+jQuery" alt="Typing SVG" /></a>
</p>

<p align="center">
<a href="https://techlaboratory.net/jquery-smartwizard#demo">
<img src="https://img.shields.io/badge/Live_Demo-28A745?style=for-the-badge&logo=rocket&logoColor=white" alt="Live Demo"/>
</a>
<a href="https://techlaboratory.net/jquery-smartwizard#documentation">
<img src="https://img.shields.io/badge/Read_Docs-007BFF?style=for-the-badge&logo=book&logoColor=white" alt="Documentation"/>
</a>
</p>

**jQuery Smart Wizard** is an accessible step wizard plugin for jQuery. Provides a neat, usable and stylish user interface for your forms, checkout screen, registration process, etc. Easy to implement, Bootstrap compatiblity, customizable toolbars, themes and colors, events and Ajax support are few of the features.
<p align="center">
<img src="https://img.shields.io/travis/com/techlab/jquery-smartwizard?style=for-the-badge" alt="Build Status">
<img src="https://img.shields.io/github/license/techlab/jquery-smartwizard?style=for-the-badge" alt="License">
<img src="https://img.shields.io/npm/v/smartwizard?style=for-the-badge&color=blue" alt="NPM Version">
<img src="https://img.shields.io/npm/dm/smartwizard?style=for-the-badge&color=blue" alt="NPM Downloads">
</p>

+ [Homepage](https://techlaboratory.net/jquery-smartwizard)
+ [Documentation](https://techlaboratory.net/jquery-smartwizard#documentation)
+ [Demos](https://techlaboratory.net/jquery-smartwizard#demo)
+ [StackOverflow Q&A](https://stackoverflow.com/questions/tagged/smart-wizard)
+ [GitHub Issues](https://github.com/techlab/jquery-smartwizard/issues)
---

Demos
-----
+ [Basic Example](https://techlaboratory.net/projects/demo/jquery-smart-wizard/v6)
+ [Form Validation Example](https://techlaboratory.net/projects/demo/jquery-smart-wizard/v6/validation)
+ [Ajax Content Example](https://techlaboratory.net/projects/demo/jquery-smart-wizard/v6/ajax)
+ [Multiple Wizard Example](https://techlaboratory.net/projects/demo/jquery-smart-wizard/v6/multiple)
+ [Bootstrap Modal Example](https://techlaboratory.net/projects/demo/jquery-smart-wizard/v6/bootstrap-modal)
+ [RTL (Right-to-left Language) Example](https://techlaboratory.net/projects/demo/jquery-smart-wizard/v6/rtl)
### ✨ Core Features

Screenshots
-----
![Smart Wizard Demo](https://techlaboratory.net/assets/media/jquery-smart-wizard/v6/gif/sw-6-validation.gif)
* 🚀 *Dead Simple Setup*: Get started with minimal HTML.
* 📱 *Fully Responsive*: Adapts seamlessly to any device.
* 🎨 *Beautiful Themes*: Multiple stunning themes included out-of-the-box.
* 💧 *Easy Customization*: Tweak colors and styles with CSS variables.
* 🎬 *Smooth Animations*: Built-in effects and full support for CSS libraries like Animate.css.
* ✅ *Step Validation*: Ensure data is correct before proceeding.
* 🌐 *AJAX Support*: Load step content on-the-fly.
* ⌨ *Accessible*: Keyboard navigation, ARIA support, and RTL compatibility.

![Smart Wizard Demo](https://techlaboratory.net/assets/media/jquery-smart-wizard/v6/gif/sw-6-basic-green.gif)
---

![Smart Wizard Arrows Dark](https://techlaboratory.net/assets/media/jquery-smart-wizard/v6/sw-6-arrows-dark.png)
### 🛠 Tech Stack
<p align="left">
<img src="https://img.shields.io/badge/jQuery-0769AD?style=for-the-badge&logo=jquery&logoColor=white" alt="jQuery"/>
<img src="https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white" alt="HTML5"/>
<img src="https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white" alt="CSS3"/>
<img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black" alt="JavaScript"/>
</p>

![Smart Wizard Round](https://techlaboratory.net/assets/media/jquery-smart-wizard/v6/sw-6-round-lite-blue.png)
---

![Smart Wizard Dots](https://techlaboratory.net/assets/media/jquery-smart-wizard/v6/sw-6-dots-red.png)
### 🌟 Visual Showcase

Requirements
-----
+ [jQuery](https://jquery.com/)
| Validation & Animation | Themes & Styles |
| :---: | :---: |
| ![Smart Wizard Validation GIF](https://techlaboratory.net/assets/media/jquery-smart-wizard/v6/gif/sw-6-validation.gif) | ![Smart Wizard Themes](https://techlaboratory.net/assets/media/jquery-smart-wizard/v6/sw-6-arrows-dark.png) |

Installation
-----
---

### [NPM](https://www.npmjs.com/package/smartwizard)
npm install smartwizard
### 📦 Installation & Usage

### [Yarn](https://yarn.pm/smartwizard)
yarn add smartwizard
Getting started is a breeze. Choose your preferred method.

### [CDN - jsDelivr](https://www.jsdelivr.com/package/npm/smartwizard)
```html
<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/smartwizard@6/dist/css/smart_wizard_all.min.css" rel="stylesheet" type="text/css" />
<details>
<summary><strong>Quick Start with NPM &amp; Webpack/ES6</strong></summary>

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/smartwizard@6/dist/js/jquery.smartWizard.min.js" type="text/javascript"></script>
```
### [CDN - UNPKG](https://unpkg.com/browse/smartwizard/)
```html
<!-- CSS -->
<link href="https://unpkg.com/smartwizard@6/dist/css/smart_wizard_all.min.css" rel="stylesheet" type="text/css" />

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

### Common JS/Webpack
```js
var $ = require( "jquery" );
require( "smartwizard/dist/css/smart_wizard_all.css");
const smartWizard = require("smartwizard");
*1. Install via NPM:*
```bash
npm install smartwizard

$(function() {
$('#smartwizard').smartWizard();
});
```
### ES6/Babel
```js
<div id="smartwizard">
<ul class="nav">
<li><a class="nav-link" href="#step-1">Step 1</a></li>
<li><a class="nav-link" href="#step-2">Step 2</a></li>
</ul>
<div class="tab-content">
<div id="step-1" class="tab-pane" role="tabpanel">Step 1 content</div>
<div id="step-2" class="tab-pane" role="tabpanel">Step 2 content</div>
</div>
</div>
import $ from "jquery";
import "smartwizard/dist/css/smart_wizard_all.css";
import smartWizard from 'smartwizard';

$(function() {
$('#smartwizard').smartWizard();
$('#smartwizard').smartWizard({
// Options go here
});
```
</details>

#### Note: you may have to install the required dependencies
```bash
npm i jquery
npm i smartwizard

// If you are using Webpack, install
npm i webpack webpack-cli style-loader css-loader --save-dev
```

### Download
#### [Download from GitHub](https://github.com/techlab/jquery-smartwizard/archive/master.zip)

Features
-----
- Easy to implement and minimal HTML required
- Supports all modern browsers
- Responsive CSS design
- Bootstrap compatible
- Cool themes included and can be easly customize
- Easy color cusomization using CSS variables
- Built-in transition animations (none|fade|slideHorizontal|slideVertical|slideSwing|css)
- Transition animations can be added easly by extending
- CSS Animations support for transition animations (Supports [Animate.css](https://animate.style/))
- Form validation support
- RTL(Right-to-left language) support
- Accessible controls
- External controls support
- Easy ajax content integration
- Keyboard navigation
- Auto content height adjustment
- Customizable toolbar and option to provide extra HTML
- Buit-in progressbar
- Buit-in loader
- Buit-in events
- UMD (Universal Module Definition) support
- Compatible with all jQuery versions (jQuery 1.11.1+, jQuery 3.6+, and jQuery Slim)

Usage
-----

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

Include HTML (*This is the basic HTML markup for the Smart Wizard. You can customize it by adding your on steps content*).
```html
<!-- SmartWizard html -->
<div id="smartwizard">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#step-1">
<div class="num">1</div>
Step Title
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#step-2">
<span class="num">2</span>
Step Title
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#step-3">
<span class="num">3</span>
Step Title
</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#step-4">
<span class="num">4</span>
Step Title
</a>
</li>
</ul>
<details>
<summary><strong>Classic Setup with CDN</strong></summary>

<div class="tab-content">
<div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
Step content
</div>
<div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
Step content
</div>
<div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
Step content
</div>
<div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
Step content
</div>
</div>
HTML

<!-- Include optional progressbar HTML -->
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
```

Include jQuery (*ignore this if you have already included on the page*).
```html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
```

Include SmartWizard plugin JavaScript
```html
<script src="https://cdn.jsdelivr.net/npm/smartwizard@6/dist/js/jquery.smartWizard.min.js" type="text/javascript"></script>
```
Initialize the SmartWizard
```js
$(function() {
$('#smartwizard').smartWizard();
});
```
That's it!
<link href="[https://cdn.jsdelivr.net/npm/smartwizard@6/dist/css/smart_wizard_all.min.css](https://cdn.jsdelivr.net/npm/smartwizard@6/dist/css/smart_wizard_all.min.css)" rel="stylesheet" type="text/css" />

<div id="smartwizard"> ... </div>

<script src="[https://code.jquery.com/jquery-3.6.0.min.js](https://code.jquery.com/jquery-3.6.0.min.js)"></script>
<script src="[https://cdn.jsdelivr.net/npm/smartwizard@6/dist/js/jquery.smartWizard.min.js](https://cdn.jsdelivr.net/npm/smartwizard@6/dist/js/jquery.smartWizard.min.js)" type="text/javascript"></script>

Please see the detailed [documentation](https://techlaboratory.net/jquery-smartwizard#documentation) for implementation and usage.
<script type="text/javascript">
$(function() {
$('#smartwizard').smartWizard();
});
</script>
</details>

##### All options
🔧 Customization & API
Smart Wizard is fully customizable. For a deep dive into all options, events, and public methods, please check out the complete Official Documentation.

<details>
<summary><strong>Example: Changing Theme and Toolbar</strong></summary>

JavaScript

```JavaScript
$('#smartwizard').smartWizard({
selected: 0, // Initial selected step, 0 = first step
theme: 'basic', // theme for the wizard, related css need to include for other than basic 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', // Animation effect on navigation, none|fade|slideHorizontal|slideVertical|slideSwing|css(Animation CSS class also need to specify)
speed: '400', // Animation speed. Not used if animation is 'css'
easing: '', // Animation easing. Not supported without a jQuery easing plugin. Not used if animation is 'css'
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
},
selected: 0,
theme: 'arrows', // A different theme
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(left and right keys are used if enabled)
keyLeft: [37], // Left key code
keyRight: [39] // Right key code
},
lang: { // Language variables for button
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
position: 'bottom', // Show toolbar at the bottom
extraHtml: <button class="btn btn-success" type="button">Finish</button>
}
});
```
</details>

⭐ Star History
See how the project has grown over time!

<a href="https://www.google.com/search?q=https://star-history.com/%23techlab/jquery-smartwizard%26Date">
<img src="https://www.google.com/search?q=https://api.star-history.com/svg%3Frepos%3Dtechlab/jquery-smartwizard%26type%3DDate" alt="Star History Chart">
</a>

💖 Support & Contributions
If you find this plugin useful, please consider showing your support!

⭐ Star the repository on GitHub.

❤ Sponsor the developer on GitHub Sponsors.

License
----
[MIT License](https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE)
💸 Donate via PayPal.

Contribute
----
If you like the project please support with your contribution.
👥 Our Awesome Contributors
A big thank you to everyone who has contributed to this project!

[GitHub Sponsor](https://github.com/sponsors/techlab)
[Donate on Paypal](https://www.paypal.me/dipuraj)
<a href="https://github.com/techlab/jquery-smartwizard/graphs/contributors">
<img src="https://www.google.com/search?q=https://contrib.rocks/image%3Frepo%3Dtechlab/jquery-smartwizard" />
</a>

Happy Coding :heart:
<hr>
<p align="center">
Happy Coding!
</p>