From 6c282fb36c866b378bcfde7d310529e8ad7c9021 Mon Sep 17 00:00:00 2001 From: Dipu Raj Date: Mon, 31 Oct 2016 20:16:41 +0530 Subject: [PATCH] Smart Wizard 4.x Initial --- LICENSE | 21 ++ README.md | 52 +++ bower.json | 34 ++ composer.json | 29 ++ css/smart_wizard.css | 160 ++++++++ css/smart_wizard.min.css | 2 + css/smart_wizard_theme_arrows.css | 185 +++++++++ css/smart_wizard_theme_arrows.min.css | 2 + css/smart_wizard_theme_circles.css | 151 ++++++++ css/smart_wizard_theme_circles.min.css | 2 + css/smart_wizard_theme_dots.css | 191 ++++++++++ css/smart_wizard_theme_dots.min.css | 2 + examples/ajaxtest.php | 11 + examples/index.html | 139 +++++++ examples/smartwizard-ajax.html | 91 +++++ examples/smartwizard-events.html | 135 +++++++ examples/smartwizard-input.html | 153 ++++++++ js/jquery.smartWizard.js | 497 +++++++++++++++++++++++++ js/jquery.smartWizard.min.js | 2 + 19 files changed, 1859 insertions(+) create mode 100644 LICENSE create mode 100644 README.md create mode 100644 bower.json create mode 100644 composer.json create mode 100644 css/smart_wizard.css create mode 100644 css/smart_wizard.min.css create mode 100644 css/smart_wizard_theme_arrows.css create mode 100644 css/smart_wizard_theme_arrows.min.css create mode 100644 css/smart_wizard_theme_circles.css create mode 100644 css/smart_wizard_theme_circles.min.css create mode 100644 css/smart_wizard_theme_dots.css create mode 100644 css/smart_wizard_theme_dots.min.css create mode 100644 examples/ajaxtest.php create mode 100644 examples/index.html create mode 100644 examples/smartwizard-ajax.html create mode 100644 examples/smartwizard-events.html create mode 100644 examples/smartwizard-input.html create mode 100644 js/jquery.smartWizard.js create mode 100644 js/jquery.smartWizard.min.js diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..9b80336 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2016 Dipu Raj + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..24a5660 --- /dev/null +++ b/README.md @@ -0,0 +1,52 @@ +# Smart Wizard +An awesome step wizard jQuery plugin with Bootstrap support + ++ [Homepage](http://techlaboratory.net/smartwizard) ++ [Documentation](http://techlaboratory.net/smartwizard/documentation) + +Screenshots +----- +![Smart Wizard Screenshot1](http://techlaboratory.net/assets/media/products/SmartWizard4_1.png) +![Smart Wizard Screenshot2](http://techlaboratory.net/assets/media/products/SmartWizard4_2.png) +![Smart Wizard Screenshot3](http://techlaboratory.net/assets/media/products/SmartWizard4_3.png) + +Demos +----- + + [Basic Example](http://techlaboratory.net/smartwizard/demo/basic) + + [Ajax Contents](http://techlaboratory.net/smartwizard/demo/ajax) + + [Input Validation](http://techlaboratory.net/smartwizard/demo/validation) + + [Events](http://techlaboratory.net/smartwizard/demo/events) + +Requirements +----- + + [Bootstrap 3+](http://getbootstrap.com/getting-started/#download) + + [jQuery](http://jquery.com/) + +Installation and usage +----- + Please see the [documentation](http://techlaboratory.net/smartwizard/documentation) + +Features +----- + + Bootstrap support + + Heavily customizable toolbar, option to add extra buttons + + Theme support with various themes included + + Url navigation and step selection + + Auto content height adjustment + + Public methods for external function call + + Enhanced event support + + In-built reset method + + Ajax content loading with option to specify individual url for steps + + Keyboard navigation + + Easy navigation with step anchors and navigation buttons + + Multiple wizard instance on same page + + Easy to implement, Minimal HTML required + + and a lot more... + +Version +----- +**SmartWizard v4.0.1** + +License +---- +[MIT License](https://github.com/techlab/SmartWizard/blob/master/LICENSE) diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..ebd905c --- /dev/null +++ b/bower.json @@ -0,0 +1,34 @@ +{ + "name": "smartwizard", + "version": "4.0.1", + "homepage": "https://github.com/techlab/SmartWizard", + "authors": [ + "Dipu Raj " + ], + "description": "An awesome step wizard plugin", + "main": [ + "./css/smart_wizard.min.css", + "./js/jquery.smartWizard.min.js" + ], + "keywords": [ + "bootstrap", + "tabs", + "wizard", + "step", + "ui", + "jquery" + ], + "dependencies": { + "jquery": ">= 1.9.0", + "bootstrap": ">= 3.0.0" + }, + "license": "MIT", + "ignore": [ + "**/.*", + "node_modules", + "composer.json", + "examples", + "bower_components", + "test" + ] +} \ No newline at end of file diff --git a/composer.json b/composer.json new file mode 100644 index 0000000..e5c8d0c --- /dev/null +++ b/composer.json @@ -0,0 +1,29 @@ +{ + "name": "techlab/smartwizard", + "description": "An awesome step wizard plugin", + "homepage": "http://techlaboratory.net/smartwizard", + "license": "MIT", + "support": { + "source": "https://github.com/techlab/smartwizard", + "issues": "https://github.com/techlab/smartwizard/issues", + "docs": "http://techlaboratory.net/smartwizard/documentation" + }, + "keywords": [ + "bootstrap", + "wizard", + "step", + "ui", + "jquery" + ], + "authors": [ + { + "name": "Dipu Raj", + "email": "hello@techlaboratory.net", + "homepage": "http://dipuraj.me" + } + ], + "require": { + "jquery": ">=1.9.0", + "bootstrap": ">=3.0.0" + } +} \ No newline at end of file diff --git a/css/smart_wizard.css b/css/smart_wizard.css new file mode 100644 index 0000000..358e50b --- /dev/null +++ b/css/smart_wizard.css @@ -0,0 +1,160 @@ +/* SmartWizard v4.0.1 + * jQuery Wizard Plugin + * http://www.techlaboratory.net/smartwizard + * + * Created by Dipu Raj + * http://dipuraj.me + * + * Licensed under the terms of MIT License + * https://github.com/techlab/SmartWizard/blob/master/MIT-LICENSE.txt + */ + +/* SmartWizard Basic CSS */ +.sw-main { + position: relative; + display:block; + margin:0; + padding:0; +} +.sw-main .sw-container { + display: block; + margin: 0; + padding: 0; + overflow:hidden; + position: relative; +} +.sw-main .step-content { + display:none; + position: relative; + margin:0; +} +.sw-main .sw-toolbar{ + margin-left: 0; +} + + +/* SmartWizard Theme: White */ +.sw-theme-default{ + box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); +} +.sw-theme-default .sw-container { + min-height: 300px; +} +.sw-theme-default .step-content { + padding: 10px; + border: 0px solid #D4D4D4; + background-color: #FFF; + text-align: left; +} +.sw-theme-default .sw-toolbar{ + background: #f9f9f9; + border-radius: 0 !important; + padding-left: 10px; + padding-right: 10px; + margin-bottom: 0 !important; +} +.sw-theme-default .sw-toolbar-top{ + border-bottom-color: #ddd !important; +} +.sw-theme-default .sw-toolbar-bottom{ + border-top-color: #ddd !important; +} +.sw-theme-default > ul.step-anchor > li > a, .sw-theme-default > ul.step-anchor > li > a:hover { + border: none !important; + color: #bbb; + text-decoration: none; + outline-style:none; + background: transparent !important; + border: none !important; +} +.sw-theme-default > ul.step-anchor > li.clickable > a:hover { + color: #4285F4 !important; + background: transparent !important; +} +.sw-theme-default > ul.step-anchor > li > a::after { + content: ""; + background: #4285F4; /* #5bc0de #4285F4*/ + height: 2px; + position: absolute; + width: 100%; + left: 0px; + bottom: 0px; + transition: all 250ms ease 0s; + transform: scale(0); +} +.sw-theme-default > ul.step-anchor > li.active > a { + border: none !important; + color: #4285F4 !important; + background: transparent !important; +} +.sw-theme-default > ul.step-anchor > li.active > a::after { + transform: scale(1); +} +.sw-theme-default > ul.step-anchor > li.done > a { + border: none !important; + color: #000 !important; + background: transparent !important; +} +.sw-theme-default > ul.step-anchor > li.done > a::after { + background: #5cb85c; + transform: scale(1); +} +.sw-theme-default > ul.step-anchor > li.danger > a { + border: none !important; + color: #d9534f !important; + background: transparent !important; +} +.sw-theme-default > ul.step-anchor > li.danger > a::after { + background: #d9534f; + transform: scale(1); +} +.sw-theme-default > ul.step-anchor > li.disabled > a, .sw-theme-default > ul.step-anchor > li.disabled > a:hover { + color: #eee !important; +} + +/* Loader Animation +Courtesy: http://bootsnipp.com/snippets/featured/loading-button-effect-no-js +*/ +@-webkit-keyframes ld { + 0% { transform: rotate(0deg) scale(1); } + 50% { transform: rotate(180deg) scale(1.1); } + 100% { transform: rotate(360deg) scale(1); } +} +@-moz-keyframes ld { + 0% { transform: rotate(0deg) scale(1); } + 50% { transform: rotate(180deg) scale(1.1); } + 100% { transform: rotate(360deg) scale(1); } +} +@-o-keyframes ld { + 0% { transform: rotate(0deg) scale(1); } + 50% { transform: rotate(180deg) scale(1.1); } + 100% { transform: rotate(360deg) scale(1); } +} +@keyframes ld { + 0% { transform: rotate(0deg) scale(1); } + 50% { transform: rotate(180deg) scale(1.1); } + 100% { transform: rotate(360deg) scale(1); } +} +.sw-theme-default > ul.step-anchor > li.loading:before { + content: ''; + display: inline-block; + position: absolute; + background: transparent; + border-radius: 50%; + box-sizing: border-box; + border: 2px solid #fff; + border-top-color: transparent; + border-bottom-color: transparent; + border-left-color: #4285f4; + border-right-color: #4285f4; + top: 50%; + left: 50%; + margin-top: -16px; + margin-left: -16px; + width: 32px; + height: 32px; + -webkit-animation: ld 1s ease-in-out infinite; + -moz-animation: ld 1s ease-in-out infinite; + -o-animation: ld 1s ease-in-out infinite; + animation: ld 1s ease-in-out infinite; +} \ No newline at end of file diff --git a/css/smart_wizard.min.css b/css/smart_wizard.min.css new file mode 100644 index 0000000..31c08e2 --- /dev/null +++ b/css/smart_wizard.min.css @@ -0,0 +1,2 @@ + +.sw-main{position:relative;display:block;margin:0;padding:0}.sw-main .sw-container{display:block;margin:0;padding:0;overflow:hidden;position:relative}.sw-main .step-content{display:none;position:relative;margin:0}.sw-main .sw-toolbar{margin-left:0}.sw-theme-default{box-shadow:0 1px 3px rgba(0,0,0,0.3)}.sw-theme-default .sw-container{min-height:300px}.sw-theme-default .step-content{padding:10px;border:0 solid #d4d4d4;background-color:#FFF;text-align:left}.sw-theme-default .sw-toolbar{background:#f9f9f9;border-radius:0!important;padding-left:10px;padding-right:10px;margin-bottom:0!important}.sw-theme-default .sw-toolbar-top{border-bottom-color:#ddd!important}.sw-theme-default .sw-toolbar-bottom{border-top-color:#ddd!important}.sw-theme-default>ul.step-anchor>li>a,.sw-theme-default>ul.step-anchor>li>a:hover{border:none!important;color:#bbb;text-decoration:none;outline-style:none;background:transparent!important;border:none!important}.sw-theme-default>ul.step-anchor>li.clickable>a:hover{color:#4285f4!important;background:transparent!important}.sw-theme-default>ul.step-anchor>li>a::after{content:"";background:#4285f4;height:2px;position:absolute;width:100%;left:0;bottom:0;transition:all 250ms ease 0s;transform:scale(0)}.sw-theme-default>ul.step-anchor>li.active>a{border:none!important;color:#4285f4!important;background:transparent!important}.sw-theme-default>ul.step-anchor>li.active>a::after{transform:scale(1)}.sw-theme-default>ul.step-anchor>li.done>a{border:none!important;color:#000!important;background:transparent!important}.sw-theme-default>ul.step-anchor>li.done>a::after{background:#5cb85c;transform:scale(1)}.sw-theme-default>ul.step-anchor>li.danger>a{border:none!important;color:#d9534f!important;background:transparent!important}.sw-theme-default>ul.step-anchor>li.danger>a::after{background:#d9534f;transform:scale(1)}.sw-theme-default>ul.step-anchor>li.disabled>a,.sw-theme-default>ul.step-anchor>li.disabled>a:hover{color:#eee!important}@-webkit-keyframes ld{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.1)}100%{transform:rotate(360deg) scale(1)}}@-moz-keyframes ld{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.1)}100%{transform:rotate(360deg) scale(1)}}@-o-keyframes ld{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.1)}100%{transform:rotate(360deg) scale(1)}}@keyframes ld{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.1)}100%{transform:rotate(360deg) scale(1)}}.sw-theme-default>ul.step-anchor>li.loading:before{content:'';display:inline-block;position:absolute;background:transparent;border-radius:50%;box-sizing:border-box;border:2px solid #fff;border-top-color:transparent;border-bottom-color:transparent;border-left-color:#4285f4;border-right-color:#4285f4;top:50%;left:50%;margin-top:-16px;margin-left:-16px;width:32px;height:32px;-webkit-animation:ld 1s ease-in-out infinite;-moz-animation:ld 1s ease-in-out infinite;-o-animation:ld 1s ease-in-out infinite;animation:ld 1s ease-in-out infinite} \ No newline at end of file diff --git a/css/smart_wizard_theme_arrows.css b/css/smart_wizard_theme_arrows.css new file mode 100644 index 0000000..be969d4 --- /dev/null +++ b/css/smart_wizard_theme_arrows.css @@ -0,0 +1,185 @@ +/* SmartWizard v4.0.1 + * jQuery Wizard Plugin + * http://www.techlaboratory.net/smartwizard + * + * Created by Dipu Raj + * http://dipuraj.me + * + * Licensed under the terms of MIT License + * https://github.com/techlab/SmartWizard/blob/master/MIT-LICENSE.txt + */ + +/* SmartWizard Theme: Arrows */ +.sw-theme-arrows{ + /*box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);*/ +} +.sw-theme-arrows .sw-container { + min-height: 200px; +} +.sw-theme-arrows .step-content { + padding: 10px 0; + border: 0px solid #D4D4D4; + background-color: #FFF; + text-align: left; +} +.sw-theme-arrows .sw-toolbar{ + background: #fff; + border-radius: 0 !important; + padding-left: 10px; + padding-right: 10px; + margin-bottom: 0 !important; +} +.sw-theme-arrows .sw-toolbar-top{ + border-bottom-color: #fff !important; +} +.sw-theme-arrows .sw-toolbar-bottom{ + border-top-color: #fff !important; + border-bottom-color: #ddd !important; +} +.sw-theme-arrows > ul.step-anchor{ + display: block; + border: 0px solid #ccc !important; + padding: 0px; + background: #f5f5f5; + border-radius: 5px; + list-style: none; + overflow: hidden; + margin-top: 20px; +} +.sw-theme-arrows > ul.step-anchor li+li:before { + padding: 0; +} +.sw-theme-arrows > ul.step-anchor > li { + float: left; +} +.sw-theme-arrows > ul.step-anchor > li > a{ + color: #bbb; + text-decoration: none; + padding: 10px 0 10px 45px; + position: relative; + display: block; + float: left; + border-radius: 0; + outline-style:none; + background: #ddd; +} +.sw-theme-arrows > ul.step-anchor > li > a:after { + content: " "; + display: block; + width: 0; + height: 0; + border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */ + border-bottom: 50px solid transparent; + border-left: 30px solid #ddd; + position: absolute; + top: 50%; + margin-top: -50px; + left: 100%; + z-index: 2; +} +.sw-theme-arrows > ul.step-anchor > li > a:before { + content: " "; + display: block; + width: 0; + height: 0; + border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */ + border-bottom: 50px solid transparent; + border-left: 30px solid white; + position: absolute; + top: 50%; + margin-top: -50px; + margin-left: 1px; + left: 100%; + z-index: 1; +} +.sw-theme-arrows > ul.step-anchor > li:first-child > a { + padding-left: 15px; +} +.sw-theme-arrows > ul.step-anchor > li > a:hover { + color: #bbb; + text-decoration: none; + outline-style:none; + background: #ffc107; + border-color: #ffc107; +} +.sw-theme-arrows > ul.step-anchor > li > a:hover:after { + border-left-color: #ffc107; +} +.sw-theme-arrows > ul.step-anchor > li > a small{ +} +.sw-theme-arrows > ul.step-anchor > li.clickable > a:hover { + color: #4285F4 !important; + background: #46b8da !important; +} +.sw-theme-arrows > ul.step-anchor > li.active > a { + border-color: #5bc0de !important; + color: #fff !important; + background: #5bc0de !important; +} +.sw-theme-arrows > ul.step-anchor > li.active > a:after { + border-left: 30px solid #5bc0de !important; +} +.sw-theme-arrows > ul.step-anchor > li.done > a { + border-color: #5cb85c !important; + color: #fff !important; + background: #5cb85c !important; +} +.sw-theme-arrows > ul.step-anchor > li.done > a:after { + border-left: 30px solid #5cb85c; +} +.sw-theme-arrows > ul.step-anchor > li.danger > a { + border-color: #d9534f !important; + color: #d9534f !important; + background: #fff !important; +} +.sw-theme-arrows > ul.step-anchor > li.disabled > a, .sw-theme-arrows > ul.step-anchor > li.disabled > a:hover { + color: #eee !important; +} + +/* Loader Animation +Courtesy: http://bootsnipp.com/snippets/featured/loading-button-effect-no-js +*/ +@-webkit-keyframes ld { + 0% { transform: rotate(0deg) scale(1); } + 50% { transform: rotate(180deg) scale(1.1); } + 100% { transform: rotate(360deg) scale(1); } +} +@-moz-keyframes ld { + 0% { transform: rotate(0deg) scale(1); } + 50% { transform: rotate(180deg) scale(1.1); } + 100% { transform: rotate(360deg) scale(1); } +} +@-o-keyframes ld { + 0% { transform: rotate(0deg) scale(1); } + 50% { transform: rotate(180deg) scale(1.1); } + 100% { transform: rotate(360deg) scale(1); } +} +@keyframes ld { + 0% { transform: rotate(0deg) scale(1); } + 50% { transform: rotate(180deg) scale(1.1); } + 100% { transform: rotate(360deg) scale(1); } +} +.sw-theme-arrows > ul.step-anchor > li.loading:before { + content: ''; + display: inline-block; + position: absolute; + background: transparent; + border-radius: 50%; + box-sizing: border-box; + border: 2px solid #fff; + border-top-color: transparent; + border-bottom-color: transparent; + border-left-color: #4285f4; + border-right-color: #4285f4; + top: 50%; + left: 50%; + margin-top: -16px; + margin-left: -16px; + width: 32px; + height: 32px; + z-index: 99; + -webkit-animation: ld 1s ease-in-out infinite; + -moz-animation: ld 1s ease-in-out infinite; + -o-animation: ld 1s ease-in-out infinite; + animation: ld 1s ease-in-out infinite; +} \ No newline at end of file diff --git a/css/smart_wizard_theme_arrows.min.css b/css/smart_wizard_theme_arrows.min.css new file mode 100644 index 0000000..9e3944e --- /dev/null +++ b/css/smart_wizard_theme_arrows.min.css @@ -0,0 +1,2 @@ + +.sw-theme-arrows .sw-container{min-height:200px}.sw-theme-arrows .step-content{padding:10px 0;border:0 solid #d4d4d4;background-color:#FFF;text-align:left}.sw-theme-arrows .sw-toolbar{background:#fff;border-radius:0!important;padding-left:10px;padding-right:10px;margin-bottom:0!important}.sw-theme-arrows .sw-toolbar-top{border-bottom-color:#fff!important}.sw-theme-arrows .sw-toolbar-bottom{border-top-color:#fff!important;border-bottom-color:#ddd!important}.sw-theme-arrows>ul.step-anchor{display:block;border:0 solid #ccc!important;padding:0;background:#f5f5f5;border-radius:5px;list-style:none;overflow:hidden;margin-top:20px}.sw-theme-arrows>ul.step-anchor li+li:before{padding:0}.sw-theme-arrows>ul.step-anchor>li{float:left}.sw-theme-arrows>ul.step-anchor>li>a{color:#bbb;text-decoration:none;padding:10px 0 10px 45px;position:relative;display:block;float:left;border-radius:0;outline-style:none;background:#ddd}.sw-theme-arrows>ul.step-anchor>li>a:after{content:" ";display:block;width:0;height:0;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:30px solid #ddd;position:absolute;top:50%;margin-top:-50px;left:100%;z-index:2}.sw-theme-arrows>ul.step-anchor>li>a:before{content:" ";display:block;width:0;height:0;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:30px solid white;position:absolute;top:50%;margin-top:-50px;margin-left:1px;left:100%;z-index:1}.sw-theme-arrows>ul.step-anchor>li:first-child>a{padding-left:15px}.sw-theme-arrows>ul.step-anchor>li>a:hover{color:#bbb;text-decoration:none;outline-style:none;background:#ffc107;border-color:#ffc107}.sw-theme-arrows>ul.step-anchor>li>a:hover:after{border-left-color:#ffc107}.sw-theme-arrows>ul.step-anchor>li.clickable>a:hover{color:#4285f4!important;background:#46b8da!important}.sw-theme-arrows>ul.step-anchor>li.active>a{border-color:#5bc0de!important;color:#fff!important;background:#5bc0de!important}.sw-theme-arrows>ul.step-anchor>li.active>a:after{border-left:30px solid #5bc0de!important}.sw-theme-arrows>ul.step-anchor>li.done>a{border-color:#5cb85c!important;color:#fff!important;background:#5cb85c!important}.sw-theme-arrows>ul.step-anchor>li.done>a:after{border-left:30px solid #5cb85c}.sw-theme-arrows>ul.step-anchor>li.danger>a{border-color:#d9534f!important;color:#d9534f!important;background:#fff!important}.sw-theme-arrows>ul.step-anchor>li.disabled>a,.sw-theme-arrows>ul.step-anchor>li.disabled>a:hover{color:#eee!important}@-webkit-keyframes ld{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.1)}100%{transform:rotate(360deg) scale(1)}}@-moz-keyframes ld{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.1)}100%{transform:rotate(360deg) scale(1)}}@-o-keyframes ld{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.1)}100%{transform:rotate(360deg) scale(1)}}@keyframes ld{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.1)}100%{transform:rotate(360deg) scale(1)}}.sw-theme-arrows>ul.step-anchor>li.loading:before{content:'';display:inline-block;position:absolute;background:transparent;border-radius:50%;box-sizing:border-box;border:2px solid #fff;border-top-color:transparent;border-bottom-color:transparent;border-left-color:#4285f4;border-right-color:#4285f4;top:50%;left:50%;margin-top:-16px;margin-left:-16px;width:32px;height:32px;z-index:99;-webkit-animation:ld 1s ease-in-out infinite;-moz-animation:ld 1s ease-in-out infinite;-o-animation:ld 1s ease-in-out infinite;animation:ld 1s ease-in-out infinite} \ No newline at end of file diff --git a/css/smart_wizard_theme_circles.css b/css/smart_wizard_theme_circles.css new file mode 100644 index 0000000..e6dd9d8 --- /dev/null +++ b/css/smart_wizard_theme_circles.css @@ -0,0 +1,151 @@ +/* SmartWizard v4.0.1 + * jQuery Wizard Plugin + * http://www.techlaboratory.net/smartwizard + * + * Created by Dipu Raj + * http://dipuraj.me + * + * Licensed under the terms of MIT License + * https://github.com/techlab/SmartWizard/blob/master/MIT-LICENSE.txt + */ + +/* SmartWizard Theme: Circles */ +.sw-theme-circles{ + /*box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);*/ +} +.sw-theme-circles .sw-container { + min-height: 300px; +} +.sw-theme-circles .step-content { + padding: 10px 0; + border: 0px solid #D4D4D4; + background-color: #FFF; + text-align: left; +} +.sw-theme-circles .sw-toolbar{ + background: #fff; + border-radius: 0 !important; + padding-left: 10px; + padding-right: 10px; + margin-bottom: 0 !important; +} +.sw-theme-circles .sw-toolbar-top{ + margin-top: -40px; + border-bottom-color: #ddd !important; +} +.sw-theme-circles .sw-toolbar-bottom{ + border-top-color: #ddd !important; + border-bottom-color: #ddd !important; +} +.sw-theme-circles > ul.step-anchor{ + background: #fff; + display: block; + border: 0px solid #ccc !important; + +} +.sw-theme-circles > ul.step-anchor:before { + top: 40px; + bottom: 0; + position: absolute; + content: " "; + width: 100%; + height: 5px; + background-color: #f1f1f1; + border-radius: 3px; + z-order: 0; +} +.sw-theme-circles > ul.step-anchor > li > a{ + border: 1px solid #ccc !important; + background: #fff !important; + width: 70px; + height: 70px; + text-align: center; + padding: 15px 0; + padding-top: 24px; + font-weight: bold; + border-radius: 50%; + margin: 5px; + margin-left: 50px; + margin-bottom: 35px; + box-shadow: inset 0px 0px 0px 3px #fff !important; + z-index: 99; +} +.sw-theme-circles > ul.step-anchor > li > a small{ + position: absolute; + bottom: -35px; + display: block; +} +.sw-theme-circles > ul.step-anchor > li > a, .sw-theme-circles > ul.step-anchor > li > a:hover { + color: #bbb; + text-decoration: none; + outline-style:none; + background: #fff !important; +} +.sw-theme-circles > ul.step-anchor > li.clickable > a:hover { + color: #4285F4 !important; +} +.sw-theme-circles > ul.step-anchor > li.active > a { + border-color: #4285F4 !important; + color: #4285F4 !important; + background: #fff !important; +} +.sw-theme-circles > ul.step-anchor > li.done > a { + border-color: #5cb85c !important; + color: #5cb85c !important; + background: #fff !important; +} +.sw-theme-circles > ul.step-anchor > li.danger > a { + border-color: #d9534f !important; + color: #d9534f !important; + background: #fff !important; +} +.sw-theme-circles > ul.step-anchor > li.disabled > a, .sw-theme-circles > ul.step-anchor > li.disabled > a:hover { + color: #eee !important; +} + +/* Loader Animation +Courtesy: http://bootsnipp.com/snippets/featured/loading-button-effect-no-js +*/ +@-webkit-keyframes ld { + 0% { transform: rotate(0deg) scale(1); } + 50% { transform: rotate(180deg) scale(1.1); } + 100% { transform: rotate(360deg) scale(1); } +} +@-moz-keyframes ld { + 0% { transform: rotate(0deg) scale(1); } + 50% { transform: rotate(180deg) scale(1.1); } + 100% { transform: rotate(360deg) scale(1); } +} +@-o-keyframes ld { + 0% { transform: rotate(0deg) scale(1); } + 50% { transform: rotate(180deg) scale(1.1); } + 100% { transform: rotate(360deg) scale(1); } +} +@keyframes ld { + 0% { transform: rotate(0deg) scale(1); } + 50% { transform: rotate(180deg) scale(1.1); } + 100% { transform: rotate(360deg) scale(1); } +} +.sw-theme-circles > ul.step-anchor > li.loading:before { + content: ''; + display: inline-block; + position: absolute; + background: transparent; + border-radius: 50%; + box-sizing: border-box; + border: 2px solid #fff; + border-top-color: transparent; + border-bottom-color: transparent; + border-left-color: #4285f4; + border-right-color: #4285f4; + top: 50%; + left: 50%; + margin-top: -16px; + margin-left: -16px; + width: 32px; + height: 32px; + -webkit-animation: ld 1s ease-in-out infinite; + -moz-animation: ld 1s ease-in-out infinite; + -o-animation: ld 1s ease-in-out infinite; + animation: ld 1s ease-in-out infinite; +} \ No newline at end of file diff --git a/css/smart_wizard_theme_circles.min.css b/css/smart_wizard_theme_circles.min.css new file mode 100644 index 0000000..4a5600c --- /dev/null +++ b/css/smart_wizard_theme_circles.min.css @@ -0,0 +1,2 @@ + +.sw-theme-circles .sw-container{min-height:300px}.sw-theme-circles .step-content{padding:10px 0;border:0 solid #d4d4d4;background-color:#FFF;text-align:left}.sw-theme-circles .sw-toolbar{background:#fff;border-radius:0!important;padding-left:10px;padding-right:10px;margin-bottom:0!important}.sw-theme-circles .sw-toolbar-top{margin-top:-40px;border-bottom-color:#ddd!important}.sw-theme-circles .sw-toolbar-bottom{border-top-color:#ddd!important;border-bottom-color:#ddd!important}.sw-theme-circles>ul.step-anchor{background:#fff;display:block;border:0 solid #ccc!important}.sw-theme-circles>ul.step-anchor:before{top:40px;bottom:0;position:absolute;content:" ";width:100%;height:5px;background-color:#f1f1f1;border-radius:3px;z-order:0}.sw-theme-circles>ul.step-anchor>li>a{border:1px solid #ccc!important;background:#fff!important;width:70px;height:70px;text-align:center;padding:15px 0;padding-top:24px;font-weight:bold;border-radius:50%;margin:5px;margin-left:50px;margin-bottom:35px;box-shadow:inset 0 0 0 3px #fff!important;z-index:99}.sw-theme-circles>ul.step-anchor>li>a small{position:absolute;bottom:-35px;display:block}.sw-theme-circles>ul.step-anchor>li>a,.sw-theme-circles>ul.step-anchor>li>a:hover{color:#bbb;text-decoration:none;outline-style:none;background:#fff!important}.sw-theme-circles>ul.step-anchor>li.clickable>a:hover{color:#4285f4!important}.sw-theme-circles>ul.step-anchor>li.active>a{border-color:#4285f4!important;color:#4285f4!important;background:#fff!important}.sw-theme-circles>ul.step-anchor>li.done>a{border-color:#5cb85c!important;color:#5cb85c!important;background:#fff!important}.sw-theme-circles>ul.step-anchor>li.danger>a{border-color:#d9534f!important;color:#d9534f!important;background:#fff!important}.sw-theme-circles>ul.step-anchor>li.disabled>a,.sw-theme-circles>ul.step-anchor>li.disabled>a:hover{color:#eee!important}@-webkit-keyframes ld{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.1)}100%{transform:rotate(360deg) scale(1)}}@-moz-keyframes ld{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.1)}100%{transform:rotate(360deg) scale(1)}}@-o-keyframes ld{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.1)}100%{transform:rotate(360deg) scale(1)}}@keyframes ld{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.1)}100%{transform:rotate(360deg) scale(1)}}.sw-theme-circles>ul.step-anchor>li.loading:before{content:'';display:inline-block;position:absolute;background:transparent;border-radius:50%;box-sizing:border-box;border:2px solid #fff;border-top-color:transparent;border-bottom-color:transparent;border-left-color:#4285f4;border-right-color:#4285f4;top:50%;left:50%;margin-top:-16px;margin-left:-16px;width:32px;height:32px;-webkit-animation:ld 1s ease-in-out infinite;-moz-animation:ld 1s ease-in-out infinite;-o-animation:ld 1s ease-in-out infinite;animation:ld 1s ease-in-out infinite} \ No newline at end of file diff --git a/css/smart_wizard_theme_dots.css b/css/smart_wizard_theme_dots.css new file mode 100644 index 0000000..a270ecd --- /dev/null +++ b/css/smart_wizard_theme_dots.css @@ -0,0 +1,191 @@ +/* SmartWizard v4.0.1 + * jQuery Wizard Plugin + * http://www.techlaboratory.net/smartwizard + * + * Created by Dipu Raj + * http://dipuraj.me + * + * Licensed under the terms of MIT License + * https://github.com/techlab/SmartWizard/blob/master/MIT-LICENSE.txt + */ + +/* SmartWizard Theme: Dots */ +.sw-theme-dots{ + /*box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);*/ +} +.sw-theme-dots .sw-container { + min-height: 300px; +} +.sw-theme-dots .step-content { + margin-top: 45px; + padding: 10px 0; + border: 0px solid #D4D4D4; + background-color: #FFF; + text-align: left; +} +.sw-theme-dots .sw-toolbar{ + background: #fff; + border-radius: 0 !important; + padding-left: 10px; + padding-right: 10px; + margin-bottom: 0 !important; +} +.sw-theme-dots .sw-toolbar-top{ + border-bottom-color: #ddd !important; +} +.sw-theme-dots .sw-toolbar-bottom{ + border-top-color: #ddd !important; + border-bottom-color: #ddd !important; +} +.sw-theme-dots > ul.step-anchor{ + background: #fff; + display: block; + border: 0px solid #ccc !important; +} +.sw-theme-dots > ul.step-anchor:before { + top: 25px; + bottom: 0; + position: absolute; + content: " "; + width: 100%; + height: 5px; + background-color: #f5f5f5; + border-radius: 3px; + z-order: 0; +} +.sw-theme-dots > ul.step-anchor > li{ + position:relative; + background: #f5f5f5; + margin-top: 25px; + height: 5px; + display: block; + border-radius: 3px; +} +.sw-theme-dots > ul.step-anchor > li > a{ + position: relative; + text-align: center; + font-weight: bold; + z-index: 99; + width: 30px; + height: 30px; + display: block; + background: #f5f5f5; + top: 2px; + left: 50%; + margin-top: -15px; + margin-left: 45px; + margin-right: 45px; + border-radius: 50%; + border: 0 !important; + + color: #428bca; + text-decoration: none; +} +.sw-theme-dots > ul.step-anchor > li > a small{ + position: absolute; + left: -40px; + display: block; + color: #999; + margin-top: 20px; + width: 120px; +} +.sw-theme-dots > ul.step-anchor > li > a, .sw-theme-dots > ul.step-anchor > li > a:hover { + color: #bbb; + text-decoration: none; + outline-style:none; + background: #f5f5f5 !important; +} +.sw-theme-dots > ul.step-anchor > li.clickable > a:hover { + color: #4285F4 !important; +} +.sw-theme-dots > ul.step-anchor > li.active{ + background: #fbbd19 !important; +} +.sw-theme-dots > ul.step-anchor > li.active > a { + border-color: #4285F4 !important; + color: #4285F4 !important; + background: #fbe8aa !important; +} +.sw-theme-dots > ul.step-anchor > li.active > a:after { + content: ' '; + width: 14px; + height: 14px; + background: #fbbd19; + border-radius: 50px; + position: absolute; + top: 8px; + left: 8px; +} +.sw-theme-dots > ul.step-anchor > li.done{ + background: #fbbd19 !important; +} +.sw-theme-dots > ul.step-anchor > li.done > a { + border-color: #5cb85c !important; + color: #5cb85c !important; + background: #fbe8aa !important; +} +.sw-theme-dots > ul.step-anchor > li.done > a:after { + content: ' '; + width: 14px; + height: 14px; + background: #5cb85c; + border-radius: 50px; + position: absolute; + top: 8px; + left: 8px; +} +.sw-theme-dots > ul.step-anchor > li.danger > a { + border-color: #d9534f !important; + color: #d9534f !important; + background: #fff !important; +} +.sw-theme-dots > ul.step-anchor > li.disabled > a, .sw-theme-dots > ul.step-anchor > li.disabled > a:hover { + color: #eee !important; +} + +/* Loader Animation + * Courtesy: http://bootsnipp.com/snippets/featured/loading-button-effect-no-js + */ +@-webkit-keyframes ld { + 0% { transform: rotate(0deg) scale(1); } + 50% { transform: rotate(180deg) scale(1.1); } + 100% { transform: rotate(360deg) scale(1); } +} +@-moz-keyframes ld { + 0% { transform: rotate(0deg) scale(1); } + 50% { transform: rotate(180deg) scale(1.1); } + 100% { transform: rotate(360deg) scale(1); } +} +@-o-keyframes ld { + 0% { transform: rotate(0deg) scale(1); } + 50% { transform: rotate(180deg) scale(1.1); } + 100% { transform: rotate(360deg) scale(1); } +} +@keyframes ld { + 0% { transform: rotate(0deg) scale(1); } + 50% { transform: rotate(180deg) scale(1.1); } + 100% { transform: rotate(360deg) scale(1); } +} +.sw-theme-dots > ul.step-anchor > li.loading:before { + content: ''; + display: inline-block; + position: absolute; + background: transparent; + border-radius: 50%; + box-sizing: border-box; + border: 2px solid #fff; + border-top-color: transparent; + border-bottom-color: transparent; + border-left-color: #4285f4; + border-right-color: #4285f4; + top: 50%; + left: 50%; + margin-top: -16px; + margin-left: -16px; + width: 32px; + height: 32px; + -webkit-animation: ld 1s ease-in-out infinite; + -moz-animation: ld 1s ease-in-out infinite; + -o-animation: ld 1s ease-in-out infinite; + animation: ld 1s ease-in-out infinite; +} \ No newline at end of file diff --git a/css/smart_wizard_theme_dots.min.css b/css/smart_wizard_theme_dots.min.css new file mode 100644 index 0000000..531de95 --- /dev/null +++ b/css/smart_wizard_theme_dots.min.css @@ -0,0 +1,2 @@ + +.sw-theme-dots .sw-container{min-height:300px}.sw-theme-dots .step-content{margin-top:45px;padding:10px 0;border:0 solid #d4d4d4;background-color:#FFF;text-align:left}.sw-theme-dots .sw-toolbar{background:#fff;border-radius:0!important;padding-left:10px;padding-right:10px;margin-bottom:0!important}.sw-theme-dots .sw-toolbar-top{border-bottom-color:#ddd!important}.sw-theme-dots .sw-toolbar-bottom{border-top-color:#ddd!important;border-bottom-color:#ddd!important}.sw-theme-dots>ul.step-anchor{background:#fff;display:block;border:0 solid #ccc!important}.sw-theme-dots>ul.step-anchor:before{top:25px;bottom:0;position:absolute;content:" ";width:100%;height:5px;background-color:#f5f5f5;border-radius:3px;z-order:0}.sw-theme-dots>ul.step-anchor>li{position:relative;background:#f5f5f5;margin-top:25px;height:5px;display:block;border-radius:3px}.sw-theme-dots>ul.step-anchor>li>a{position:relative;text-align:center;font-weight:bold;z-index:99;width:30px;height:30px;display:block;background:#f5f5f5;top:2px;left:50%;margin-top:-15px;margin-left:45px;margin-right:45px;border-radius:50%;border:0!important;color:#428bca;text-decoration:none}.sw-theme-dots>ul.step-anchor>li>a small{position:absolute;left:-40px;display:block;color:#999;margin-top:20px;width:120px}.sw-theme-dots>ul.step-anchor>li>a,.sw-theme-dots>ul.step-anchor>li>a:hover{color:#bbb;text-decoration:none;outline-style:none;background:#f5f5f5!important}.sw-theme-dots>ul.step-anchor>li.clickable>a:hover{color:#4285f4!important}.sw-theme-dots>ul.step-anchor>li.active{background:#fbbd19!important}.sw-theme-dots>ul.step-anchor>li.active>a{border-color:#4285f4!important;color:#4285f4!important;background:#fbe8aa!important}.sw-theme-dots>ul.step-anchor>li.active>a:after{content:' ';width:14px;height:14px;background:#fbbd19;border-radius:50px;position:absolute;top:8px;left:8px}.sw-theme-dots>ul.step-anchor>li.done{background:#fbbd19!important}.sw-theme-dots>ul.step-anchor>li.done>a{border-color:#5cb85c!important;color:#5cb85c!important;background:#fbe8aa!important}.sw-theme-dots>ul.step-anchor>li.done>a:after{content:' ';width:14px;height:14px;background:#5cb85c;border-radius:50px;position:absolute;top:8px;left:8px}.sw-theme-dots>ul.step-anchor>li.danger>a{border-color:#d9534f!important;color:#d9534f!important;background:#fff!important}.sw-theme-dots>ul.step-anchor>li.disabled>a,.sw-theme-dots>ul.step-anchor>li.disabled>a:hover{color:#eee!important}@-webkit-keyframes ld{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.1)}100%{transform:rotate(360deg) scale(1)}}@-moz-keyframes ld{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.1)}100%{transform:rotate(360deg) scale(1)}}@-o-keyframes ld{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.1)}100%{transform:rotate(360deg) scale(1)}}@keyframes ld{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.1)}100%{transform:rotate(360deg) scale(1)}}.sw-theme-dots>ul.step-anchor>li.loading:before{content:'';display:inline-block;position:absolute;background:transparent;border-radius:50%;box-sizing:border-box;border:2px solid #fff;border-top-color:transparent;border-bottom-color:transparent;border-left-color:#4285f4;border-right-color:#4285f4;top:50%;left:50%;margin-top:-16px;margin-left:-16px;width:32px;height:32px;-webkit-animation:ld 1s ease-in-out infinite;-moz-animation:ld 1s ease-in-out infinite;-o-animation:ld 1s ease-in-out infinite;animation:ld 1s ease-in-out infinite} \ No newline at end of file diff --git a/examples/ajaxtest.php b/examples/ajaxtest.php new file mode 100644 index 0000000..e342359 --- /dev/null +++ b/examples/ajaxtest.php @@ -0,0 +1,11 @@ +Hello from Server! Step '.($step_number + 1).', +

We have added a 2 sec sleep to feel the ajax loading, It would be faster otherwise

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, + sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

'; \ No newline at end of file diff --git a/examples/index.html b/examples/index.html new file mode 100644 index 0000000..890f787 --- /dev/null +++ b/examples/index.html @@ -0,0 +1,139 @@ + + + + Smart Wizard - a JavaScript jQuery Step Wizard plugin + + + + + + + + + + + + + + + + + +
+ +
+
+ + +
+ + +
+ + + +
+
+ +


+ + +
+ + +
+
+

Step 1 Content

+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. +
+
+

Step 2 Content

+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. +
+
+

Step 4 Content

+
+
My Details
+ + + + + +
Name: Tim Smith
Email: example@example.com
+
+
+
+
+ + +
+ + + + + + + + + + diff --git a/examples/smartwizard-ajax.html b/examples/smartwizard-ajax.html new file mode 100644 index 0000000..fb862b6 --- /dev/null +++ b/examples/smartwizard-ajax.html @@ -0,0 +1,91 @@ + + + + Smart Wizard - a JavaScript jQuery Step Wizard plugin + + + + + + + + + + + + + + + +
+ + +
+ + +
+
+

Step 1 Content, Non ajax content

+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. +
+
+

Step 2 Content, Non ajax content

+
Hello This is a div
+
+
+

Step 3 Content, Non ajax content

+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. +
+
+

Step 4 Content, Non ajax content

+
+
My Details
+ + + + + +
Name: Tim Smith
Email: example@example.com
+
+
+
+
+ + +
+ + + + + + + + + + diff --git a/examples/smartwizard-events.html b/examples/smartwizard-events.html new file mode 100644 index 0000000..704d8b4 --- /dev/null +++ b/examples/smartwizard-events.html @@ -0,0 +1,135 @@ + + + + Smart Wizard - a JavaScript jQuery Step Wizard plugin + + + + + + + + + + + + + + + +
+ +
+ +
+ + + +
+
+ + + +
+ + +
+
+

Step 1 Content

+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. +
+
+

Step 2 Content

+
Hello This is a div
+
+
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. +
+
+

Step 4 Content

+
+
My Details
+ + + + + +
Name: Tim Smith
Email: example@example.com
+
+
+
+
+ + +
+ + + + + + + + + + diff --git a/examples/smartwizard-input.html b/examples/smartwizard-input.html new file mode 100644 index 0000000..c9c240f --- /dev/null +++ b/examples/smartwizard-input.html @@ -0,0 +1,153 @@ + + + + Smart Wizard - a JavaScript jQuery Step Wizard plugin + + + + + + + + + + + + + + + +
+
+
+ + +
+ + +
+
+

Your Email Address

+
+
+ + +
+
+
+ +
+
+

Your Name

+
+
+ + +
+
+
+
+
+

Your Address

+
+
+ + +
+
+
+
+
+

Terms and Conditions

+

+ Terms and conditions: Keep your smile :) +

+
+
+ + +
+
+
+ + +
+
+
+ +
+ +
+ + + + + + + + + + + + + diff --git a/js/jquery.smartWizard.js b/js/jquery.smartWizard.js new file mode 100644 index 0000000..a2a6367 --- /dev/null +++ b/js/jquery.smartWizard.js @@ -0,0 +1,497 @@ +/* SmartWizard v4.0.1 + * jQuery Wizard Plugin + * http://www.techlaboratory.net/smartwizard + * + * Created by Dipu Raj + * http://dipuraj.me + * + * Licensed under the terms of the MIT License + * https://github.com/techlab/SmartWizard/blob/master/MIT-LICENSE.txt + */ + +;(function ($, window, document, undefined) { + "use strict"; + // Default options + var defaults = { + selected: 0, // Initial selected step, 0 = first step + keyNavigation:true, // Enable/Disable keyboard navigation(left and right keys are used if enabled) + autoAdjustHeight:true, // Automatically adjust content height + cycleSteps: false, // Allows to cycle the navigation of steps + backButtonSupport: true, // Enable the back button support + useURLhash: true, // Enable selection of the step based on url hash + lang: { // Language variables + next: 'Next', + previous: 'Previous' + }, + toolbarSettings: { + toolbarPosition: 'bottom', // none, top, bottom, both + toolbarButtonPosition: 'right', // left, right + showNextButton: true, // show/hide a Next button + showPreviousButton: true, // show/hide a Previous button + toolbarExtraButtons: [] + }, + anchorSettings: { + anchorClickable: true, // Enable/Disable anchor navigation + enableAllAnchors: false, // Activates all anchors clickable all times + markDoneStep: true, // add done css + enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation + }, + contentURL: null, // content url, Enables Ajax content loading. can set as data data-content-url on anchor + disabledSteps: [], // Array Steps disabled + errorSteps: [], // Highlight step with errors + theme: 'default', + transitionEffect: 'none', // Effect on navigation, none/slide/fade + transitionSpeed: '400' + }; + + // The plugin constructor + function SmartWizard (element, options) { + this._defaults = defaults; + // Merge user settigs with default, recursively + this.options = $.extend( true, {}, defaults, options ); + // Main container element + this.main = $(element); + // Navigation bar element + this.nav = this.main.children('ul'); + // Step anchor elements + this.steps = $("li > a", this.nav); + // Content container + this.container = this.main.children('div'); + // Content pages + this.pages = this.container.children('div'); + + this.current_index = null; + this.is_animating = false; + // Call initial method + this.init(); + } + + $.extend(SmartWizard.prototype, { + init: function () { + var idx = this.options.selected; + // Get selected step from the url + if(this.options.useURLhash){ + // Get step number from url hash if available + var hash = window.location.hash; + if(hash && hash.length > 0){ + var elm = $("a[href*="+hash+"]"); + if(elm.length > 0){ + var id = this.steps.index(elm); + idx = (id >= 0) ? id : idx; + } + } + } + + // Setup the elements and events + this._setElements(); + // Add toolbar + this._setToolbar(); + // Assign plugin events + this._setEvents(); + // Show the initial step + this._showStep(idx); + }, + +// PRIVATE FUNCTIONS + + _setElements: function () { + // Set the main element + this.main.addClass('sw-main sw-theme-' + this.options.theme); + // Set anchor elements + this.nav.addClass('nav nav-tabs step-anchor'); // nav-justified nav-pills + // Make the anchor clickable + if(this.options.anchorSettings.enableAllAnchors !== false && this.options.anchorSettings.anchorClickable !== false){ this.steps.parent('li').addClass('clickable'); } + // Set content container + this.container.addClass('sw-container tab-content'); + // Set content pages + this.pages.addClass('step-content'); + + // Disabled steps + var mi = this; + if(this.options.disabledSteps && this.options.disabledSteps.length>0){ + $.each(this.options.disabledSteps, function(i, n){ + mi.steps.eq(n).parent('li').addClass('disabled'); + }); + } + // Error steps + if(this.options.errorSteps && this.options.errorSteps.length>0){ + $.each(this.options.errorSteps, function(i, n){ + mi.steps.eq(n).parent('li').addClass('danger'); + }); + } + + return true; + }, + _setToolbar: function () { + // Skip right away if the toolbar is not enabled + if(this.options.toolbarSettings.toolbarPosition === 'none'){ return true; } + + // Create the toolbar buttons + var btnNext = (this.options.toolbarSettings.showNextButton !== false) ? $('').text(this.options.lang.next).addClass('btn btn-default sw-btn-next').attr('type','button') : null; + var btnPrevious = (this.options.toolbarSettings.showPreviousButton !== false) ? $('').text(this.options.lang.previous).addClass('btn btn-default sw-btn-prev').attr('type','button') : null; + var btnGroup = $('
').addClass('btn-group navbar-btn sw-btn-group pull-' + this.options.toolbarSettings.toolbarButtonPosition).attr('role','group').append(btnPrevious, btnNext); + + // Add extra toolbar buttons + var btnGroupExtra = null; + + if(this.options.toolbarSettings.toolbarExtraButtons && this.options.toolbarSettings.toolbarExtraButtons.length > 0){ + btnGroupExtra = $('
').addClass('btn-group navbar-btn sw-btn-group-extra pull-' + this.options.toolbarSettings.toolbarButtonPosition).attr('role','group'); + $.each(this.options.toolbarSettings.toolbarExtraButtons, function( i, n ) { + n.css = (n.css && n.css.length > 0) ? n.css : 'btn-default'; + btnGroupExtra.append($('').text(n.label).addClass('btn ' + n.css).attr('type','button').on('click', function(){ n.onClick.call(this); })); + }); + } + + // Append toolbar based on the position + switch(this.options.toolbarSettings.toolbarPosition){ + case 'top': + var toolbarTop = $('').addClass('navbar btn-toolbar sw-toolbar sw-toolbar-top'); + toolbarTop.append(btnGroup); + if(this.options.toolbarSettings.toolbarButtonPosition === 'left'){ + toolbarTop.append(btnGroupExtra); + }else{ + toolbarTop.prepend(btnGroupExtra); + } + this.container.before(toolbarTop); + break; + case 'bottom': + var toolbarBottom = $('').addClass('navbar btn-toolbar sw-toolbar sw-toolbar-bottom'); + toolbarBottom.append(btnGroup); + if(this.options.toolbarSettings.toolbarButtonPosition === 'left'){ + toolbarBottom.append(btnGroupExtra); + }else{ + toolbarBottom.prepend(btnGroupExtra); + } + this.container.after(toolbarBottom); + break; + case 'both': + var toolbarTop = $('').addClass('navbar btn-toolbar sw-toolbar sw-toolbar-top'); + toolbarTop.append(btnGroup); + if(this.options.toolbarSettings.toolbarButtonPosition === 'left'){ + toolbarTop.append(btnGroupExtra); + }else{ + toolbarTop.prepend(btnGroupExtra); + } + this.container.before(toolbarTop); + + var toolbarBottom = $('').addClass('navbar btn-toolbar sw-toolbar sw-toolbar-bottom'); + toolbarBottom.append(btnGroup.clone(true)); + if(this.options.toolbarSettings.toolbarButtonPosition === 'left'){ + toolbarBottom.append(btnGroupExtra.clone(true)); + }else{ + toolbarBottom.prepend(btnGroupExtra.clone(true)); + } + this.container.after(toolbarBottom); + break; + default: + var toolbarBottom = $('').addClass('navbar btn-toolbar sw-toolbar sw-toolbar-bottom'); + toolbarBottom.append(btnGroup); + if(this.options.toolbarSettings.toolbarButtonPosition === 'left'){ + toolbarBottom.append(btnGroupExtra); + }else{ + toolbarBottom.prepend(btnGroupExtra); + } + this.container.after(toolbarBottom); + break; + } + return true; + }, + _setEvents: function () { + // Anchor click event + var mi = this; + $(this.steps).on( "click", function(e) { + e.preventDefault(); + if(mi.options.anchorSettings.anchorClickable === false) { return true; } + var idx = mi.steps.index(this); + if(mi.options.anchorSettings.enableAnchorOnDoneStep === false && mi.steps.eq(idx).parent('li').hasClass('done')) { return true; } + + if(idx !== mi.current_index) { + if(mi.options.anchorSettings.enableAllAnchors !== false && mi.options.anchorSettings.anchorClickable !== false){ + mi._showStep(idx); + }else{ + if(mi.steps.eq(idx).parent('li').hasClass('done')){ + mi._showStep(idx); + } + } + } + }); + + // Next button event + $('.sw-btn-next', this.main).on( "click", function(e) { + e.preventDefault(); + if(mi.steps.index(this) !== mi.current_index) { + mi._showNext(); + } + }); + + // Previous button event + $('.sw-btn-prev', this.main).on( "click", function(e) { + e.preventDefault(); + if(mi.steps.index(this) !== mi.current_index) { + mi._showPrevious(); + } + }); + + // Keyboard navigation event + if(this.options.keyNavigation){ + $(document).keyup(function(e){ + mi._keyNav(e); + }); + } + + // Back/forward browser button event + if(this.options.backButtonSupport){ + $(window).on('hashchange', function() { + if(!mi.options.useURLhash) { return true; } + if(window.location.hash) { + var elm = $("a[href*="+window.location.hash+"]"); + if(elm && elm.length > 0){ + mi._showStep(mi.steps.index(elm)); + } + } + }); + } + + return true; + }, + _showNext: function () { + var si = this.current_index + 1; + // Find the next not disabled step + for(var i = si; i < this.steps.length; i++){ + if(!this.steps.eq(i).parent('li').hasClass('disabled')){ si=i; break;} + } + + if(this.steps.length <= si){ + if(!this.options.cycleSteps){ return false; } + si = 0; + } + this._showStep(si); + return true; + }, + _showPrevious: function () { + var si = this.current_index - 1; + // Find the previous not disabled step + for(var i = si; i >= 0; i--){ + if(!this.steps.eq(i).parent('li').hasClass('disabled')){ si=i; break;} + } + if(0 > si){ + if(!this.options.cycleSteps){ return false; } + si = this.steps.length - 1; + } + this._showStep(si); + return true; + }, + _showStep: function (idx) { + // If step not found, skip + if(!this.steps.eq(idx)){ return false; } + // If current step is requested again, skip + if(idx == this.current_index){ return false; } + // If it is a disabled step, skip + if(this.steps.eq(idx).parent('li').hasClass('disabled')){ return false; } + // Load step content + this._loadStepContent(idx); + return true; + }, + _loadStepContent: function (idx) { + var mi = this; + var elm = this.steps.eq(idx); + var contentURL = (elm.data('content-url') && elm.data('content-url').length > 0) ? elm.data('content-url') : this.options.contentURL; + + if(contentURL && contentURL.length > 0 && !elm.data('has-content')){ + // Get ajax content and then show step + var selPage = (elm.length>0) ? $(elm.attr("href"),this.main) : null; + $.ajax({ + url: contentURL, + type: "POST", + data: ({step_number : idx}), + dataType: "text", + beforeSend: function(){ elm.parent('li').addClass('loading'); }, + error: function(){ elm.parent('li').removeClass('loading'); }, + success: function(res){ + if(res && res.length > 0){ + elm.data('has-content',true); + selPage.html(res); + } + elm.parent('li').removeClass('loading'); + mi._transitPage(idx); + } + }); + }else{ + // Show step + this._transitPage(idx); + } + return true; + }, + _transitPage: function (idx) { + var mi = this; + // If still doing the animation, bypass + if(this.is_animating){ return false; } + // Get current step elements + var curTab = this.steps.eq(this.current_index); + var curPage = (curTab.length>0) ? $(curTab.attr("href"),this.main) : null; + // Get step to show elements + var selTab = this.steps.eq(idx); + var selPage = (selTab.length>0) ? $(selTab.attr("href"),this.main) : null; + // Trigger "leaveStep" event + if(this.current_index !== null && this._triggerEvent("leaveStep", [curTab, this.current_index]) === false){ return false; } + + this.is_animating = true; + this.options.transitionEffect = this.options.transitionEffect.toLowerCase(); + this.pages.finish(); + if(this.options.transitionEffect === 'slide'){ // normal slide + if(curPage && curPage.length > 0){ + curPage.slideUp('fast',this.options.transitionEasing,function(){ + selPage.slideDown(mi.options.transitionSpeed,mi.options.transitionEasing); + }); + }else{ + selPage.slideDown(this.options.transitionSpeed,this.options.transitionEasing); + } + }else if(this.options.transitionEffect === 'fade'){ // normal fade + if(curPage && curPage.length > 0){ + curPage.fadeOut('fast',this.options.transitionEasing,function(){ + selPage.fadeIn('fast',mi.options.transitionEasing,function(){ + $(this).show(); + }); + }); + }else{ + selPage.fadeIn(this.options.transitionSpeed,this.options.transitionEasing,function(){ + $(this).show(); + }); + } + }else{ + if(curPage && curPage.length > 0) { curPage.hide(); } + selPage.show(); + } + // Change the url hash to new step + window.location.hash = selTab.attr("href"); + // Update controls + this._setAnchor(idx); + // Set the buttons based on the step + this._setButtons(idx); + // Fix height with content + this._fixHeight(idx); + + this.current_index = idx; + this.is_animating = false; + + // Trigger "showStep" event + this._triggerEvent("showStep", [selTab, this.current_index]); + return true; + }, + _setAnchor: function (idx) { + // Current step anchor > Remove other classes and add done class + this.steps.eq(this.current_index).parent('li').removeClass("active danger loading"); + if(this.options.anchorSettings.markDoneStep !== false && this.current_index !== null){ + this.steps.eq(this.current_index).parent('li').addClass("done"); + } + + // Next step anchor > Remove other classes and add active class + this.steps.eq(idx).parent('li').removeClass("done danger loading").addClass("active"); + return true; + }, + _setButtons: function (idx) { + // Previous/Next Button enable/disable based on step + if(!this.options.cycleSteps){ + if(0 >= idx){ + $('.sw-btn-prev', this.main).addClass("disabled"); + }else{ + $('.sw-btn-prev', this.main).removeClass("disabled"); + } + if((this.steps.length-1) <= idx){ + $('.sw-btn-next', this.main).addClass("disabled"); + }else{ + $('.sw-btn-next', this.main).removeClass("disabled"); + } + } + return true; + }, + + +// HELPER FUNCTIONS + + _keyNav: function (e) { + var mi = this; + // Keyboard navigation + switch(e.which) { + case 37: // left + mi._showPrevious(); + e.preventDefault(); + break; + case 39: // right + mi._showNext(); + e.preventDefault(); + break; + default: return; // exit this handler for other keys + } + }, + _fixHeight: function (idx) { + // Auto adjust height of the container + if(this.options.autoAdjustHeight){ + var selPage = (this.steps.eq(idx).length > 0) ? $(this.steps.eq(idx).attr("href"),this.main) : null; + this.container.finish().animate({height: selPage.outerHeight()}, this.options.transitionSpeed, function(){}); + } + return true; + }, + _triggerEvent: function (name, params) { + // Trigger an event + var e = $.Event(name); + this.main.trigger(e, params); + if (e.isDefaultPrevented()) { return false; } + return e.result; + }, + +// PUBLIC FUNCTIONS + + theme: function (v) { + this.main.removeClass('sw-theme-' + this.options.theme); + this.options.theme = v; + this.main.addClass('sw-theme-' + this.options.theme); + }, + next: function () { + this._showNext(); + }, + prev: function () { + this._showPrevious(); + }, + reset: function () { + // Reset all elements and classes + this.container.stop(true); + this.pages.stop(true); + this.pages.hide(); + this.current_index = null; + window.location.hash = this.steps.eq(this.options.selected).attr("href"); + $(".sw-toolbar", this.main).remove(); + this.steps.removeClass(); + this.steps.parents('li').removeClass(); + this.steps.data('has-content', false); + this.init(); + } + }); + + // Wrapper for the plugin + $.fn.smartWizard = function(options) { + var args = arguments; + var instance; + + if (options === undefined || typeof options === 'object') { + return this.each( function() { + if ( !$.data( this, "smartWizard") ) { + $.data( this, "smartWizard", new SmartWizard( this, options ) ); + } + }); + } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') { + instance = $.data(this[0], 'smartWizard'); + + if (options === 'destroy') { + $.data(this, 'smartWizard', null); + } + + if (instance instanceof SmartWizard && typeof instance[options] === 'function') { + return instance[options].apply( instance, Array.prototype.slice.call( args, 1 ) ); + } else { + return this; + } + } + }; + +})(jQuery, window, document); \ No newline at end of file diff --git a/js/jquery.smartWizard.min.js b/js/jquery.smartWizard.min.js new file mode 100644 index 0000000..bf43db9 --- /dev/null +++ b/js/jquery.smartWizard.min.js @@ -0,0 +1,2 @@ + +(function(d,c,a,f){var e={selected:0,keyNavigation:true,autoAdjustHeight:true,cycleSteps:false,backButtonSupport:true,useURLhash:true,lang:{next:"Next",previous:"Previous"},toolbarSettings:{toolbarPosition:"bottom",toolbarButtonPosition:"right",showNextButton:true,showPreviousButton:true,toolbarExtraButtons:[]},anchorSettings:{anchorClickable:true,enableAllAnchors:false,markDoneStep:true,enableAnchorOnDoneStep:true},contentURL:null,disabledSteps:[],errorSteps:[],theme:"default",transitionEffect:"none",transitionSpeed:"400"};function b(h,g){this._defaults=e;this.options=d.extend(true,{},e,g);this.main=d(h);this.nav=this.main.children("ul");this.steps=d("li > a",this.nav);this.container=this.main.children("div");this.pages=this.container.children("div");this.current_index=null;this.is_animating=false;this.init()}d.extend(b.prototype,{init:function(){var g=this.options.selected;if(this.options.useURLhash){var h=c.location.hash;if(h&&h.length>0){var j=d("a[href*="+h+"]");if(j.length>0){var i=this.steps.index(j);g=(i>=0)?i:g}}}this._setElements();this._setToolbar();this._setEvents();this._showStep(g)},_setElements:function(){this.main.addClass("sw-main sw-theme-"+this.options.theme);this.nav.addClass("nav nav-tabs step-anchor");if(this.options.anchorSettings.enableAllAnchors!==false&&this.options.anchorSettings.anchorClickable!==false){this.steps.parent("li").addClass("clickable")}this.container.addClass("sw-container tab-content");this.pages.addClass("step-content");var g=this;if(this.options.disabledSteps&&this.options.disabledSteps.length>0){d.each(this.options.disabledSteps,function(h,j){g.steps.eq(j).parent("li").addClass("disabled")})}if(this.options.errorSteps&&this.options.errorSteps.length>0){d.each(this.options.errorSteps,function(h,j){g.steps.eq(j).parent("li").addClass("danger")})}return true},_setToolbar:function(){if(this.options.toolbarSettings.toolbarPosition==="none"){return true}var i=(this.options.toolbarSettings.showNextButton!==false)?d("").text(this.options.lang.next).addClass("btn btn-default sw-btn-next").attr("type","button"):null;var h=(this.options.toolbarSettings.showPreviousButton!==false)?d("").text(this.options.lang.previous).addClass("btn btn-default sw-btn-prev").attr("type","button"):null;var l=d("
").addClass("btn-group navbar-btn sw-btn-group pull-"+this.options.toolbarSettings.toolbarButtonPosition).attr("role","group").append(h,i);var k=null;if(this.options.toolbarSettings.toolbarExtraButtons&&this.options.toolbarSettings.toolbarExtraButtons.length>0){k=d("
").addClass("btn-group navbar-btn sw-btn-group-extra pull-"+this.options.toolbarSettings.toolbarButtonPosition).attr("role","group");d.each(this.options.toolbarSettings.toolbarExtraButtons,function(m,o){o.css=(o.css&&o.css.length>0)?o.css:"btn-default";k.append(d("").text(o.label).addClass("btn "+o.css).attr("type","button").on("click",function(){o.onClick.call(this)}))})}switch(this.options.toolbarSettings.toolbarPosition){case"top":var j=d("").addClass("navbar btn-toolbar sw-toolbar sw-toolbar-top");j.append(l);if(this.options.toolbarSettings.toolbarButtonPosition==="left"){j.append(k)}else{j.prepend(k)}this.container.before(j);break;case"bottom":var g=d("").addClass("navbar btn-toolbar sw-toolbar sw-toolbar-bottom");g.append(l);if(this.options.toolbarSettings.toolbarButtonPosition==="left"){g.append(k)}else{g.prepend(k)}this.container.after(g);break;case"both":var j=d("").addClass("navbar btn-toolbar sw-toolbar sw-toolbar-top");j.append(l);if(this.options.toolbarSettings.toolbarButtonPosition==="left"){j.append(k)}else{j.prepend(k)}this.container.before(j);var g=d("").addClass("navbar btn-toolbar sw-toolbar sw-toolbar-bottom");g.append(l.clone(true));if(this.options.toolbarSettings.toolbarButtonPosition==="left"){g.append(k.clone(true))}else{g.prepend(k.clone(true))}this.container.after(g);break;default:var g=d("").addClass("navbar btn-toolbar sw-toolbar sw-toolbar-bottom");g.append(l);if(this.options.toolbarSettings.toolbarButtonPosition==="left"){g.append(k)}else{g.prepend(k)}this.container.after(g);break}return true},_setEvents:function(){var g=this;d(this.steps).on("click",function(i){i.preventDefault();if(g.options.anchorSettings.anchorClickable===false){return true}var h=g.steps.index(this);if(g.options.anchorSettings.enableAnchorOnDoneStep===false&&g.steps.eq(h).parent("li").hasClass("done")){return true}if(h!==g.current_index){if(g.options.anchorSettings.enableAllAnchors!==false&&g.options.anchorSettings.anchorClickable!==false){g._showStep(h)}else{if(g.steps.eq(h).parent("li").hasClass("done")){g._showStep(h)}}}});d(".sw-btn-next",this.main).on("click",function(h){h.preventDefault();if(g.steps.index(this)!==g.current_index){g._showNext()}});d(".sw-btn-prev",this.main).on("click",function(h){h.preventDefault();if(g.steps.index(this)!==g.current_index){g._showPrevious()}});if(this.options.keyNavigation){d(a).keyup(function(h){g._keyNav(h)})}if(this.options.backButtonSupport){d(c).on("hashchange",function(){if(!g.options.useURLhash){return true}if(c.location.hash){var h=d("a[href*="+c.location.hash+"]");if(h&&h.length>0){g._showStep(g.steps.index(h))}}})}return true},_showNext:function(){var g=this.current_index+1;for(var h=g;h=0;h--){if(!this.steps.eq(h).parent("li").hasClass("disabled")){g=h;break}}if(0>g){if(!this.options.cycleSteps){return false}g=this.steps.length-1}this._showStep(g);return true},_showStep:function(g){if(!this.steps.eq(g)){return false}if(g==this.current_index){return false}if(this.steps.eq(g).parent("li").hasClass("disabled")){return false}this._loadStepContent(g);return true},_loadStepContent:function(g){var h=this;var k=this.steps.eq(g);var j=(k.data("content-url")&&k.data("content-url").length>0)?k.data("content-url"):this.options.contentURL;if(j&&j.length>0&&!k.data("has-content")){var i=(k.length>0)?d(k.attr("href"),this.main):null;d.ajax({url:j,type:"POST",data:({step_number:g}),dataType:"text",beforeSend:function(){k.parent("li").addClass("loading")},error:function(){k.parent("li").removeClass("loading")},success:function(l){if(l&&l.length>0){k.data("has-content",true);i.html(l)}k.parent("li").removeClass("loading");h._transitPage(g)}})}else{this._transitPage(g)}return true},_transitPage:function(h){var i=this;if(this.is_animating){return false}var g=this.steps.eq(this.current_index);var k=(g.length>0)?d(g.attr("href"),this.main):null;var j=this.steps.eq(h);var l=(j.length>0)?d(j.attr("href"),this.main):null;if(this.current_index!==null&&this._triggerEvent("leaveStep",[g,this.current_index])===false){return false}this.is_animating=true;this.options.transitionEffect=this.options.transitionEffect.toLowerCase();this.pages.finish();if(this.options.transitionEffect==="slide"){if(k&&k.length>0){k.slideUp("fast",this.options.transitionEasing,function(){l.slideDown(i.options.transitionSpeed,i.options.transitionEasing)})}else{l.slideDown(this.options.transitionSpeed,this.options.transitionEasing)}}else{if(this.options.transitionEffect==="fade"){if(k&&k.length>0){k.fadeOut("fast",this.options.transitionEasing,function(){l.fadeIn("fast",i.options.transitionEasing,function(){d(this).show()})})}else{l.fadeIn(this.options.transitionSpeed,this.options.transitionEasing,function(){d(this).show()})}}else{if(k&&k.length>0){k.hide()}l.show()}}c.location.hash=j.attr("href");this._setAnchor(h);this._setButtons(h);this._fixHeight(h);this.current_index=h;this.is_animating=false;this._triggerEvent("showStep",[j,this.current_index]);return true},_setAnchor:function(g){this.steps.eq(this.current_index).parent("li").removeClass("active danger loading");if(this.options.anchorSettings.markDoneStep!==false&&this.current_index!==null){this.steps.eq(this.current_index).parent("li").addClass("done")}this.steps.eq(g).parent("li").removeClass("done danger loading").addClass("active");return true},_setButtons:function(g){if(!this.options.cycleSteps){if(0>=g){d(".sw-btn-prev",this.main).addClass("disabled")}else{d(".sw-btn-prev",this.main).removeClass("disabled")}if((this.steps.length-1)<=g){d(".sw-btn-next",this.main).addClass("disabled")}else{d(".sw-btn-next",this.main).removeClass("disabled")}}return true},_keyNav:function(h){var g=this;switch(h.which){case 37:g._showPrevious();h.preventDefault();break;case 39:g._showNext();h.preventDefault();break;default:return}},_fixHeight:function(g){if(this.options.autoAdjustHeight){var h=(this.steps.eq(g).length>0)?d(this.steps.eq(g).attr("href"),this.main):null;this.container.finish().animate({height:h.outerHeight()},this.options.transitionSpeed,function(){})}return true},_triggerEvent:function(g,i){var h=d.Event(g);this.main.trigger(h,i);if(h.isDefaultPrevented()){return false}return h.result},theme:function(g){this.main.removeClass("sw-theme-"+this.options.theme);this.options.theme=g;this.main.addClass("sw-theme-"+this.options.theme)},next:function(){this._showNext()},prev:function(){this._showPrevious()},reset:function(){this.container.stop(true);this.pages.stop(true);this.pages.hide();this.current_index=null;c.location.hash=this.steps.eq(this.options.selected).attr("href");d(".sw-toolbar",this.main).remove();this.steps.removeClass();this.steps.parents("li").removeClass();this.steps.data("has-content",false);this.init()}});d.fn.smartWizard=function(i){var h=arguments;var g;if(i===f||typeof i==="object"){return this.each(function(){if(!d.data(this,"smartWizard")){d.data(this,"smartWizard",new b(this,i))}})}else{if(typeof i==="string"&&i[0]!=="_"&&i!=="init"){g=d.data(this[0],"smartWizard");if(i==="destroy"){d.data(this,"smartWizard",null)}if(g instanceof b&&typeof g[i]==="function"){return g[i].apply(g,Array.prototype.slice.call(h,1))}else{return this}}}}})(jQuery,window,document); \ No newline at end of file