Save button added to a "steps" plugin example
For SO question #44915407
HTML
<script src="//www.addressfinder.co.nz/assets/v2/widget.js"></script>
<div id="example-basic">
<h3>Keyboard</h3>
<section>
<p>Try the keyboard navigation by clicking arrow left or right!</p>
</section>
<h3>Effects</h3>
<section>
<p>Wonderful transition effects.</p>
</section>
<h3>Pager</h3>
<section>
<p>The next and previous buttons help you to navigate through your content.</p>
</section>
</div>
<script>
$( window ).load(function() {
$("#example-basic").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
autoFocus: true,
onFinishing: function () {
alert("Hello");
},
onInit: function (event, currentIndex) {
var saveA = $("<a>").attr("href","#").addClass("saveBtn").text("Save");
var saveBtn = $("<li>").attr("aria-disabled",false).append(saveA);
$(document).find(".actions ul").prepend(saveBtn);
$(".actions").find(".saveBtn").hide();
},
onStepChanged:function (event, currentIndex, newIndex) {
console.log("Step changed to: " + currentIndex);
if(currentIndex == 2){
console.log("ok");
$(".actions").find(".saveBtn").show();
//},50);
}else{
$(".actions").find(".saveBtn").hide();
}
return true;
},
});
// on Save button click
$(".saveBtn").on("click",function(){
alert("Saving!");
});
});
/*$("#example-basic").getStep(wizard, index){
console.log(index);
}*/
</script>
CSS
/*
Common
*/
.wizard,
.tabcontrol
{
display: block;
width: 100%;
overflow: hidden;
}
.wizard a,
.tabcontrol a
{
outline: 0;
}
.wizard ul,
.tabcontrol ul
{
list-style: none !important;
padding: 0;
margin: 0;
}
.wizard ul > li,
.tabcontrol ul > li
{
display: block;
padding: 0;
}
/* Accessibility */
.wizard > .steps .current-info,
.tabcontrol > .steps .current-info
{
position: absolute;
left: -999em;
}
.wizard > .content > .title,
.tabcontrol > .content > .title
{
position: absolute;
left: -999em;
}
/*
Wizard
*/
.wizard > .steps
{
position: relative;
display: block;
width: 100%;
}
.wizard.vertical > .steps
{
display: inline;
float: left;
width: 30%;
}
.wizard > .steps .number
{
font-size: 1.429em;
}
.wizard > .steps > ul > li
{
width: 25%;
}
.wizard > .steps > ul > li,
.wizard > .actions > ul > li
{
float: left;
}
.wizard.vertical > .steps > ul > li
{
float: none;
width: 100%;
}
.wizard > .steps a,
.wizard > .steps a:hover,
.wizard > .steps a:active
{
display: block;
width: auto;
margin: 0 0.5em 0.5em;
padding: 1em 1em;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.wizard > .steps .disabled a,
.wizard > .steps .disabled a:hover,
.wizard > .steps .disabled a:active
{
background: #eee;
color: #aaa;
cursor: default;
}
.wizard > .steps .current a,
.wizard > .steps .current a:hover,
.wizard > .steps .current a:active
{
background: #2184be;
color: #fff;
cursor: default;
}
.wizard > .steps .done a,
.wizard > .steps .done a:hover,
.wizard > .steps .done a:active
{
background: #9dc8e2;
color: #fff;
}
.wizard > .steps .error a,
.wizard > .steps .error a:hover,
.wizard > .steps .error a:active
{
background: #ff3111;
color: #fff;
}
.wizard > .content
{
background: #eee;
display: block;
margin: 0.5em;
min-height:...
JavaScript
/*!
* jQuery Steps v1.1.0 - 09/04/2014
* Copyright (c) 2014 Rafael Staib (http://www.jquery-steps.com)
* Licensed under MIT http://www.opensource.org/licenses/MIT
*/
;(function ($, undefined)
{
$.fn.extend({
_aria: function (name, value)
{
return this.attr("aria-" + name, value);
},
_removeAria: function (name)
{
return this.removeAttr("aria-" + name);
},
_enableAria: function (enable)
{
return (enable == null || enable) ?
this.removeClass("disabled")._aria("disabled", "false") :
this.addClass("disabled")._aria("disabled", "true");
},
_showAria: function (show)
{
return (show == null || show) ?
this.show()._aria("hidden", "false") :
this.hide()._aria("hidden", "true");
},
_selectAria: function (select)
{
return (select == null || select) ?
this.addClass("current")._aria("selected", "true") :
this.removeClass("current")._aria("selected", "false");
},
_id: function (id)
{
return (id) ? this.attr("id", id) : this.attr("id");
}
});
if (!String.prototype.format)
{
String.prototype.format = function()
{
var args = (arguments.length === 1 && $.isArray(arguments[0])) ? arguments[0] : arguments;
var formattedString = this;
for (var i = 0; i < args.length; i++)
{
var pattern = new RegExp("\\{" + i + "\\}", "gm");
formattedString = formattedString.replace(pattern, args[i]);
}
return formattedString;
};
}
/**
* A global unique id count.
*
* @static
* @private
* @property _uniqueId
* @type Integer
**/
var _uniqueId = 0;
/**
* The plugin prefix for cookies.
*
* @final
* @private
* @property _cookiePrefix
* @type String
**/
var _cookiePrefix = "jQu3ry_5teps_St@te_";
/**
* Suffix for the unique tab id.
*
* @final
* @private
* @property _tabSuffix
* @type String
* @since 0.9.7
**/
var _tabSuffix =...