标签：function index ystep 月份 wizard step state 时间轴 options
需求：最近要做一个月份的时间轴，整理了一下用ystep去实现
直接上代码，包括引入的我也给贴一下吧：
一、html
效果图
<!DOCTYPE html>
<html>
<head>
<title>ystep流程、步骤</title>
<meta name="keywords" content="ystep,jQuery流程、步骤插件" />
<meta name="description" content="ystep,jQuery流程、步骤插件" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入ystep样式 -->
<link href="css/ystep.css" rel="stylesheet" />
</head>
<body>
<!-- 引入jquery -->
<script src="js/jquery.min.js"></script>
<!-- 引入ystep插件 -->
<script src="js/ystep.js"></script>
<div class="ystep1" style="margin: 100px"></div>
<hr />
<input id="btnPre" type="button" value="上一步" />
<input id="btnNext" type="button" value="下一步" />
<script>
//根据jQuery选择器找到需要加载ystep的容器
//loadStep 方法可以初始化ystep
$(".ystep1").loadStep({
//ystep的外观大小
//可选值：small,large
size: "small",
//ystep配色方案
//可选值：green,blue
color: "green",
//ystep中包含的步骤
steps: [{
//步骤名称
title: "1月",
//步骤内容(鼠标移动到本步骤节点时，会提示该内容)
//content: "实名用户/公益组织发起项目"
}, {
title: "2月",
//content: "乐捐平台工作人员审核项目"
}, {
title: "3月",
//content: "乐捐项目上线接受公众募款"
}, {
title: "4月",
//content: "项目执行者线下开展救护行动"
}, {
title: "5月",
//content: "项目执行者公示善款使用报告"
}, {
title: "6月",
//content: "项目执行者公示善款使用报告"
}, {
title: "7月",
//content: "项目执行者公示善款使用报告"
}, {
title: "8月",
//content: "项目执行者公示善款使用报告"
}, {
title: "9月",
//content: "项目执行者公示善款使用报告"
}, {
title: "10月",
//content: "项目执行者公示善款使用报告"
}, {
title: "11月",
//content: "项目执行者公示善款使用报告"
}, {
title: "12月",
//content: "项目执行者公示善款使用报告"
}]
});
$("#btnPre").click(function () {
//跳转到上一个步骤
$(".ystep1").prevStep();
});
$("#btnNext").click(function () {
//跳转到下一个步骤
$(".ystep1").nextStep();
});
$(".ystep1").setStep(5);
//跳转到下一个步骤
//$(".ystep1").nextStep();
//跳转到上一个步骤
//$(".ystep1").prevStep();
//跳转到指定步骤
//$(".ystep1").setStep(2);
//获取当前在第几步
//$(".ystep1").getStep();
// $.ajax({
// url : "myBonds/ystep",
// type : 'POST',
// dataType : 'json',
// data : {
// 'compsname' : '123'
// },
// success : function(data) {
// if(data.result.code==1){
// console.log(data.result.ystep);
// var ystep=data.result.ystep;
// $("#ystepDiv").setStep(ystep);//跳到指定节点
// }
// }
// })
</script>
</body>
</html>
## 二、ystep.css
/*common css*/
.ystep-container {
font-family: "Helvetica Neue",Helvetica,"Hiragino Sans GB","Wenquanyi Micro Hei","Microsoft Yahei",Arial,sans-serif;
display: inline-block;
position: relative;
color: #000;
}
.ystep-container ul {
list-style: none;
}
.ystep-container ul,.ystep-container li,.ystep-container p {
margin: 0;
padding: 0;
}
/*size css*/
.ystep-sm {
width: 360px;
height: 30px;
font-size: 12px;
line-height: 1;
}
.ystep-lg {
width: 700px;
height: 60px;
font-size: 18px;
/*line-height: .3;*/
}
/*small size css*/
.ystep-sm .ystep-container-steps {
position: absolute;
top: 2px;
cursor: pointer;
z-index: 10;
}
.ystep-sm li {
float: left;
width: 65px;
height: 50px;
}
.ystep-sm .ystep-step-done {
background-position: -119px -76px;
}
.ystep-sm .ystep-step-undone {
background-position: -60px -76px;
}
.ystep-sm .ystep-step-active {
background-position: -182px -76px;
}
.ystep-sm .ystep-progress {
width: 260px;
height: 3px;
position: absolute;
top: 30px;
left: 8px;
float: left;
margin-right: 10px;
overflow: hidden;
}
.ystep-sm .ystep-progress-bar {
width: 260px;
height: 6px;
background: #e4e4e4;
display: inline-block;
float: left;
}
.ystep-sm .ystep-progress-highlight {
height: 6px;
display: block;
}
/*large size css*/
.ystep-lg .ystep-container-steps {
position: absolute;
top: 2px;
cursor: pointer;
z-index: 10;
}
.ystep-lg li {
float: left;
width: 100px;
height: 85px;
}
.ystep-lg .ystep-step-done {
background-position: -278px -132px;
}
.ystep-lg .ystep-step-undone {
background-position: -137px -131px;
}
.ystep-lg .ystep-step-active {
background-position: -414px -131px;
}
.ystep-lg .ystep-progress {
width: 400px;
height: 10px;
position: absolute;
top: 30px;
left: 15px;
float: left;
margin-right: 10px;
overflow: hidden;
}
.ystep-lg .ystep-progress-bar {
width: 400px;
height: 20px;
background: #e4e4e4;
display: inline-block;
float: left;
}
.ystep-lg .ystep-progress-highlight {
height: 20px;
display: block;
}
/*green css*/
.ystep-green .ystep-step-done {
background-image: url("./images/pointes_green.png");
background-repeat: no-repeat;
}
.ystep-green .ystep-step-undone {
background-image: url("./images/pointes_green.png");
background-repeat: no-repeat;
color: #9c9a9b;
}
.ystep-green .ystep-step-active {
background-image: url("./images/pointes_green.png");
background-repeat: no-repeat;
color: #3d8e15;
}
.ystep-green .ystep-progress-highlight {
background: #89bc65;
}
/*blue css*/
.ystep-blue .ystep-step-done {
background-image: url("./images/pointes_blue.png");
background-repeat: no-repeat;
}
.ystep-blue .ystep-step-undone {
background-image: url("./images/pointes_blue.png");
background-repeat: no-repeat;
color: #9c9a9b;
}
.ystep-blue .ystep-step-active {
background-image: url("./images/pointes_blue.png");
background-repeat: no-repeat;
color: #3276b1;
}
.ystep-blue .ystep-progress-highlight {
background: #60baff;
}
/*popover css*/
.popover {
font-family: "Helvetica Neue",Helvetica,"Hiragino Sans GB","Wenquanyi Micro Hei","Microsoft Yahei",Arial,sans-serif;
position: absolute;
top: 0;
left: 0;
z-index: 1010;
display: none;
max-width: 276px;
padding: 1px;
text-align: left;
white-space: normal;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
background-clip: padding-box;
}
.popover.top {
margin-top: -10px;
}
.popover.right {
margin-left: 10px;
}
.popover.bottom {
margin-top: 10px;
}
.popover.left {
margin-left: -10px;
}
.popover-title {
padding: 2px 10px;
margin: 0;
font-size: 12px;
font-weight: bold;
line-height: 18px;
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
border-radius: 5px 5px 0 0;
}
.popover-content {
padding: 4px 10px;
font-size: 12px;
}
.popover .arrow,
.popover .arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.popover .arrow {
border-width: 11px;
}
.popover .arrow:after {
border-width: 10px;
content: "";
}
.popover.top .arrow {
bottom: -11px;
left: 50%;
margin-left: -11px;
border-top-color: #999999;
border-top-color: rgba(0, 0, 0, 0.25);
border-bottom-width: 0;
}
.popover.top .arrow:after {
bottom: 1px;
margin-left: -10px;
border-top-color: #ffffff;
border-bottom-width: 0;
content: " ";
}
.popover.right .arrow {
top: 50%;
left: -11px;
margin-top: -11px;
border-right-color: #999999;
border-right-color: rgba(0, 0, 0, 0.25);
border-left-width: 0;
}
.popover.right .arrow:after {
bottom: -10px;
left: 1px;
border-right-color: #ffffff;
border-left-width: 0;
content: " ";
}
.popover.bottom .arrow {
top: -11px;
left: 50%;
margin-left: -11px;
border-bottom-color: #999999;
border-bottom-color: rgba(0, 0, 0, 0.25);
border-top-width: 0;
}
.popover.bottom .arrow:after {
top: 1px;
margin-left: -10px;
border-bottom-color: #ffffff;
border-top-width: 0;
content: " ";
}
.popover.left .arrow {
top: 50%;
right: -11px;
margin-top: -11px;
border-left-color: #999999;
border-left-color: rgba(0, 0, 0, 0.25);
border-right-width: 0;
}
.popover.left .arrow:after {
right: 1px;
bottom: -10px;
border-left-color: #ffffff;
border-right-width: 0;
content: " ";
}
三、ystep.js
/*!
* 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 = "-t-";
/**
* Suffix for the unique tabpanel id.
*
* @final
* @private
* @property _tabpanelSuffix
* @type String
* @since 0.9.7
**/
var _tabpanelSuffix = "-p-";
/**
* Suffix for the unique title id.
*
* @final
* @private
* @property _titleSuffix
* @type String
* @since 0.9.7
**/
var _titleSuffix = "-h-";
/**
* An error message for an "index out of range" error.
*
* @final
* @private
* @property _indexOutOfRangeErrorMessage
* @type String
**/
var _indexOutOfRangeErrorMessage = "Index out of range.";
/**
* An error message for an "missing corresponding element" error.
*
* @final
* @private
* @property _missingCorrespondingElementErrorMessage
* @type String
**/
var _missingCorrespondingElementErrorMessage = "One or more corresponding step {0} are missing.";
/**
* Adds a step to the cache.
*
* @static
* @private
* @method addStepToCache
* @param wizard {Object} A jQuery wizard object
* @param step {Object} The step object to add
**/
function addStepToCache(wizard, step)
{
getSteps(wizard).push(step);
}
function analyzeData(wizard, options, state)
{
var stepTitles = wizard.children(options.headerTag),
stepContents = wizard.children(options.bodyTag);
// Validate content
if (stepTitles.length > stepContents.length)
{
throwError(_missingCorrespondingElementErrorMessage, "contents");
}
else if (stepTitles.length < stepContents.length)
{
throwError(_missingCorrespondingElementErrorMessage, "titles");
}
var startIndex = options.startIndex;
state.stepCount = stepTitles.length;
// Tries to load the saved state (step position)
if (options.saveState && $.cookie)
{
var savedState = $.cookie(_cookiePrefix + getUniqueId(wizard));
// Sets the saved position to the start index if not undefined or out of range
var savedIndex = parseInt(savedState, 0);
if (!isNaN(savedIndex) && savedIndex < state.stepCount)
{
startIndex = savedIndex;
}
}
state.currentIndex = startIndex;
stepTitles.each(function (index)
{
var item = $(this), // item == header
content = stepContents.eq(index),
modeData = content.data("mode"),
mode = (modeData == null) ? contentMode.html : getValidEnumValue(contentMode,
(/^\s*$/.test(modeData) || isNaN(modeData)) ? modeData : parseInt(modeData, 0)),
contentUrl = (mode === contentMode.html || content.data("url") === undefined) ?
"" : content.data("url"),
contentLoaded = (mode !== contentMode.html && content.data("loaded") === "1"),
step = $.extend({}, stepModel, {
title: item.html(),
content: (mode === contentMode.html) ? content.html() : "",
contentUrl: contentUrl,
contentMode: mode,
contentLoaded: contentLoaded
});
addStepToCache(wizard, step);
});
}
/**
* Triggers the onCanceled event.
*
* @static
* @private
* @method cancel
* @param wizard {Object} The jQuery wizard object
**/
function cancel(wizard)
{
wizard.triggerHandler("canceled");
}
function decreaseCurrentIndexBy(state, decreaseBy)
{
return state.currentIndex - decreaseBy;
}
/**
* Removes the control functionality completely and transforms the current state to the initial HTML structure.
*
* @static
* @private
* @method destroy
* @param wizard {Object} A jQuery wizard object
**/
function destroy(wizard, options)
{
var eventNamespace = getEventNamespace(wizard);
// Remove virtual data objects from the wizard
wizard.unbind(eventNamespace).removeData("uid").removeData("options")
.removeData("state").removeData("steps").removeData("eventNamespace")
.find(".actions a").unbind(eventNamespace);
// Remove attributes and CSS classes from the wizard
wizard.removeClass(options.clearFixCssClass + " vertical");
var contents = wizard.find(".content > *");
// Remove virtual data objects from panels and their titles
contents.removeData("loaded").removeData("mode").removeData("url");
// Remove attributes, CSS classes and reset inline styles on all panels and their titles
contents.removeAttr("id").removeAttr("role").removeAttr("tabindex")
.removeAttr("class").removeAttr("style")._removeAria("labelledby")
._removeAria("hidden");
// Empty panels if the mode is set to 'async' or 'iframe'
wizard.find(".content > [data-mode='async'],.content > [data-mode='iframe']").empty();
var wizardSubstitute = $("<{0} class=\"{1}\"></{0}>".format(wizard.get(0).tagName, wizard.attr("class")));
var wizardId = wizard._id();
if (wizardId != null && wizardId !== "")
{
wizardSubstitute._id(wizardId);
}
wizardSubstitute.html(wizard.find(".content").html());
wizard.after(wizardSubstitute);
wizard.remove();
return wizardSubstitute;
}
/**
* Triggers the onFinishing and onFinished event.
*
* @static
* @private
* @method finishStep
* @param wizard {Object} The jQuery wizard object
* @param state {Object} The state container of the current wizard
**/
function finishStep(wizard, state)
{
var currentStep = wizard.find(".steps li").eq(state.currentIndex);
if (wizard.triggerHandler("finishing", [state.currentIndex]))
{
currentStep.addClass("done").removeClass("error");
wizard.triggerHandler("finished", [state.currentIndex]);
}
else
{
currentStep.addClass("error");
}
}
/**
* Gets or creates if not exist an unique event namespace for the given wizard instance.
*
* @static
* @private
* @method getEventNamespace
* @param wizard {Object} A jQuery wizard object
* @return {String} Returns the unique event namespace for the given wizard
*/
function getEventNamespace(wizard)
{
var eventNamespace = wizard.data("eventNamespace");
if (eventNamespace == null)
{
eventNamespace = "." + getUniqueId(wizard);
wizard.data("eventNamespace", eventNamespace);
}
return eventNamespace;
}
function getStepAnchor(wizard, index)
{
var uniqueId = getUniqueId(wizard);
return wizard.find("#" + uniqueId + _tabSuffix + index);
}
function getStepPanel(wizard, index)
{
var uniqueId = getUniqueId(wizard);
return wizard.find("#" + uniqueId + _tabpanelSuffix + index);
}
function getStepTitle(wizard, index)
{
var uniqueId = getUniqueId(wizard);
return wizard.find("#" + uniqueId + _titleSuffix + index);
}
function getOptions(wizard)
{
return wizard.data("options");
}
function getState(wizard)
{
return wizard.data("state");
}
function getSteps(wizard)
{
return wizard.data("steps");
}
/**
* Gets a specific step object by index.
*
* @static
* @private
* @method getStep
* @param index {Integer} An integer that belongs to the position of a step
* @return {Object} A specific step object
**/
function getStep(wizard, index)
{
var steps = getSteps(wizard);
if (index < 0 || index >= steps.length)
{
throwError(_indexOutOfRangeErrorMessage);
}
return steps[index];
}
/**
* Gets or creates if not exist an unique id from the given wizard instance.
*
* @static
* @private
* @method getUniqueId
* @param wizard {Object} A jQuery wizard object
* @return {String} Returns the unique id for the given wizard
*/
function getUniqueId(wizard)
{
var uniqueId = wizard.data("uid");
if (uniqueId == null)
{
uniqueId = wizard._id();
if (uniqueId == null)
{
uniqueId = "steps-uid-".concat(_uniqueId);
wizard._id(uniqueId);
}
_uniqueId++;
wizard.data("uid", uniqueId);
}
return uniqueId;
}
/**
* Gets a valid enum value by checking a specific enum key or value.
*
* @static
* @private
* @method getValidEnumValue
* @param enumType {Object} Type of enum
* @param keyOrValue {Object} Key as `String` or value as `Integer` to check for
*/
function getValidEnumValue(enumType, keyOrValue)
{
validateArgument("enumType", enumType);
validateArgument("keyOrValue", keyOrValue);
// Is key
if (typeof keyOrValue === "string")
{
var value = enumType[keyOrValue];
if (value === undefined)
{
throwError("The enum key '{0}' does not exist.", keyOrValue);
}
return value;
}
// Is value
else if (typeof keyOrValue === "number")
{
for (var key in enumType)
{
if (enumType[key] === keyOrValue)
{
return keyOrValue;
}
}
throwError("Invalid enum value '{0}'.", keyOrValue);
}
// Type is not supported
else
{
throwError("Invalid key or value type.");
}
}
/**
* Routes to the next step.
*
* @static
* @private
* @method goToNextStep
* @param wizard {Object} The jQuery wizard object
* @param options {Object} Settings of the current wizard
* @param state {Object} The state container of the current wizard
* @return {Boolean} Indicates whether the action executed
**/
function goToNextStep(wizard, options, state)
{
return paginationClick(wizard, options, state, increaseCurrentIndexBy(state, 1));
}
/**
* Routes to the previous step.
*
* @static
* @private
* @method goToPreviousStep
* @param wizard {Object} The jQuery wizard object
* @param options {Object} Settings of the current wizard
* @param state {Object} The state container of the current wizard
* @return {Boolean} Indicates whether the action executed
**/
function goToPreviousStep(wizard, options, state)
{
return paginationClick(wizard, options, state, decreaseCurrentIndexBy(state, 1));
}
/**
* Routes to a specific step by a given index.
*
* @static
* @private
* @method goToStep
* @param wizard {Object} The jQuery wizard object
* @param options {Object} Settings of the current wizard
* @param state {Object} The state container of the current wizard
* @param index {Integer} The position (zero-based) to route to
* @return {Boolean} Indicates whether the action succeeded or failed
**/
function goToStep(wizard, options, state, index)
{
if (index < 0 || index >= state.stepCount)
{
throwError(_indexOutOfRangeErrorMessage);
}
if (options.forceMoveForward && index < state.currentIndex)
{
return;
}
var oldIndex = state.currentIndex;
if (wizard.triggerHandler("stepChanging", [state.currentIndex, index]))
{
// Save new state
state.currentIndex = index;
saveCurrentStateToCookie(wizard, options, state);
// Change visualisation
refreshStepNavigation(wizard, options, state, oldIndex);
refreshPagination(wizard, options, state);
loadAsyncContent(wizard, options, state);
startTransitionEffect(wizard, options, state, index, oldIndex, function()
{
wizard.triggerHandler("stepChanged", [index, oldIndex]);
});
}
else
{
wizard.find(".steps li").eq(oldIndex).addClass("error");
}
return true;
}
function increaseCurrentIndexBy(state, increaseBy)
{
return state.currentIndex + increaseBy;
}
/**
* Initializes the component.
*
* @static
* @private
* @method initialize
* @param options {Object} The component settings
**/
function initialize(options)
{
/*jshint -W040 */
var opts = $.extend(true, {}, defaults, options);
return this.each(function ()
{
var wizard = $(this);
var state = {
currentIndex: opts.startIndex,
currentStep: null,
stepCount: 0,
transitionElement: null
};
// Create data container
wizard.data("options", opts);
wizard.data("state", state);
wizard.data("steps", []);
analyzeData(wizard, opts, state);
render(wizard, opts, state);
registerEvents(wizard, opts);
// Trigger focus
if (opts.autoFocus && _uniqueId === 0)
{
getStepAnchor(wizard, opts.startIndex).focus();
}
wizard.triggerHandler("init", [opts.startIndex]);
});
}
/**
* Inserts a new step to a specific position.
*
* @static
* @private
* @method insertStep
* @param wizard {Object} The jQuery wizard object
* @param options {Object} Settings of the current wizard
* @param state {Object} The state container of the current wizard
* @param index {Integer} The position (zero-based) to add
* @param step {Object} The step object to add
* @example
* $("#wizard").steps().insert(0, {
* title: "Title",
* content: "", // optional
* contentMode: "async", // optional
* contentUrl: "/Content/Step/1" // optional
* });
* @chainable
**/
function insertStep(wizard, options, state, index, step)
{
if (index < 0 || index > state.stepCount)
{
throwError(_indexOutOfRangeErrorMessage);
}
// TODO: Validate step object
// Change data
step = $.extend({}, stepModel, step);
insertStepToCache(wizard, index, step);
if (state.currentIndex !== state.stepCount && state.currentIndex >= index)
{
state.currentIndex++;
saveCurrentStateToCookie(wizard, options, state);
}
state.stepCount++;
var contentContainer = wizard.find(".content"),
header = $("<{0}>{1}</{0}>".format(options.headerTag, step.title)),
body = $("<{0}></{0}>".format(options.bodyTag));
if (step.contentMode == null || step.contentMode === contentMode.html)
{
body.html(step.content);
}
if (index === 0)
{
contentContainer.prepend(body).prepend(header);
}
else
{
getStepPanel(wizard, (index - 1)).after(body).after(header);
}
renderBody(wizard, state, body, index);
renderTitle(wizard, options, state, header, index);
refreshSteps(wizard, options, state, index);
if (index === state.currentIndex)
{
refreshStepNavigation(wizard, options, state);
}
refreshPagination(wizard, options, state);
return wizard;
}
/**
* Inserts a step object to the cache at a specific position.
*
* @static
* @private
* @method insertStepToCache
* @param wizard {Object} A jQuery wizard object
* @param index {Integer} The position (zero-based) to add
* @param step {Object} The step object to add
**/
function insertStepToCache(wizard, index, step)
{
getSteps(wizard).splice(index, 0, step);
}
/**
* Handles the keyup DOM event for pagination.
*
* @static
* @private
* @event keyup
* @param event {Object} An event object
*/
function keyUpHandler(event)
{
var wizard = $(this),
options = getOptions(wizard),
state = getState(wizard);
if (options.suppressPaginationOnFocus && wizard.find(":focus").is(":input"))
{
event.preventDefault();
return false;
}
var keyCodes = { left: 37, right: 39 };
if (event.keyCode === keyCodes.left)
{
event.preventDefault();
goToPreviousStep(wizard, options, state);
}
else if (event.keyCode === keyCodes.right)
{
event.preventDefault();
goToNextStep(wizard, options, state);
}
}
/**
* Loads and includes async content.
*
* @static
* @private
* @method loadAsyncContent
* @param wizard {Object} A jQuery wizard object
* @param options {Object} Settings of the current wizard
* @param state {Object} The state container of the current wizard
*/
function loadAsyncContent(wizard, options, state)
{
if (state.stepCount > 0)
{
var currentIndex = state.currentIndex,
currentStep = getStep(wizard, currentIndex);
if (!options.enableContentCache || !currentStep.contentLoaded)
{
switch (getValidEnumValue(contentMode, currentStep.contentMode))
{
case contentMode.iframe:
wizard.find(".content > .body").eq(state.currentIndex).empty()
.html("<iframe src=\"" + currentStep.contentUrl + "\" frameborder=\"0\" scrolling=\"no\" />")
.data("loaded", "1");
break;
case contentMode.async:
var currentStepContent = getStepPanel(wizard, currentIndex)._aria("busy", "true")
.empty().append(renderTemplate(options.loadingTemplate, { text: options.labels.loading }));
$.ajax({ url: currentStep.contentUrl, cache: false }).done(function (data)
{
currentStepContent.empty().html(data)._aria("busy", "false").data("loaded", "1");
wizard.triggerHandler("contentLoaded", [currentIndex]);
});
break;
}
}
}
}
/**
* Fires the action next or previous click event.
*
* @static
* @private
* @method paginationClick
* @param wizard {Object} The jQuery wizard object
* @param options {Object} Settings of the current wizard
* @param state {Object} The state container of the current wizard
* @param index {Integer} The position (zero-based) to route to
* @return {Boolean} Indicates whether the event fired successfully or not
**/
function paginationClick(wizard, options, state, index)
{
var oldIndex = state.currentIndex;
if (index >= 0 && index < state.stepCount && !(options.forceMoveForward && index < state.currentIndex))
{
var anchor = getStepAnchor(wizard, index),
parent = anchor.parent(),
isDisabled = parent.hasClass("disabled");
// Enable the step to make the anchor clickable!
parent._enableAria();
anchor.click();
// An error occured
if (oldIndex === state.currentIndex && isDisabled)
{
// Disable the step again if current index has not changed; prevents click action.
parent._enableAria(false);
return false;
}
return true;
}
return false;
}
/**
* Fires when a pagination click happens.
*
* @static
* @private
* @event click
* @param event {Object} An event object
*/
function paginationClickHandler(event)
{
event.preventDefault();
var anchor = $(this),
wizard = anchor.parent().parent().parent().parent(),
options = getOptions(wizard),
state = getState(wizard),
href = anchor.attr("href");
switch (href.substring(href.lastIndexOf("#") + 1))
{
case "cancel":
cancel(wizard);
break;
case "finish":
finishStep(wizard, state);
break;
case "next":
goToNextStep(wizard, options, state);
break;
case "previous":
goToPreviousStep(wizard, options, state);
break;
}
}
/**
* Refreshs the visualization state for the entire pagination.
*
* @static
* @private
* @method refreshPagination
* @param wizard {Object} A jQuery wizard object
* @param options {Object} Settings of the current wizard
* @param state {Object} The state container of the current wizard
*/
function refreshPagination(wizard, options, state)
{
if (options.enablePagination)
{
var finish = wizard.find(".actions a[href$='#finish']").parent(),
next = wizard.find(".actions a[href$='#next']").parent();
if (!options.forceMoveForward)
{
var previous = wizard.find(".actions a[href$='#previous']").parent();
previous._enableAria(state.currentIndex > 0);
}
if (options.enableFinishButton && options.showFinishButtonAlways)
{
finish._enableAria(state.stepCount > 0);
next._enableAria(state.stepCount > 1 && state.stepCount > (state.currentIndex + 1));
}
else
{
finish._showAria(options.enableFinishButton && state.stepCount === (state.currentIndex + 1));
next._showAria(state.stepCount === 0 || state.stepCount > (state.currentIndex + 1)).
_enableAria(state.stepCount > (state.currentIndex + 1) || !options.enableFinishButton);
}
}
}
/**
* Refreshs the visualization state for the step navigation (tabs).
*
* @static
* @private
* @method refreshStepNavigation
* @param wizard {Object} A jQuery wizard object
* @param options {Object} Settings of the current wizard
* @param state {Object} The state container of the current wizard
* @param [oldIndex] {Integer} The index of the prior step
*/
function refreshStepNavigation(wizard, options, state, oldIndex)
{
var currentOrNewStepAnchor = getStepAnchor(wizard, state.currentIndex),
currentInfo = $("<span class=\"current-info audible\">" + options.labels.current + " </span>"),
stepTitles = wizard.find(".content > .title");
if (oldIndex != null)
{
var oldStepAnchor = getStepAnchor(wizard, oldIndex);
oldStepAnchor.parent().addClass("done").removeClass("error")._selectAria(false);
stepTitles.eq(oldIndex).removeClass("current").next(".body").removeClass("current");
currentInfo = oldStepAnchor.find(".current-info");
currentOrNewStepAnchor.focus();
}
currentOrNewStepAnchor.prepend(currentInfo).parent()._selectAria().removeClass("done")._enableAria();
stepTitles.eq(state.currentIndex).addClass("current").next(".body").addClass("current");
}
/**
* Refreshes step buttons and their related titles beyond a certain position.
*
* @static
* @private
* @method refreshSteps
* @param wizard {Object} A jQuery wizard object
* @param options {Object} Settings of the current wizard
* @param state {Object} The state container of the current wizard
* @param index {Integer} The start point for refreshing ids
*/
function refreshSteps(wizard, options, state, index)
{
var uniqueId = getUniqueId(wizard);
for (var i = index; i < state.stepCount; i++)
{
var uniqueStepId = uniqueId + _tabSuffix + i,
uniqueBodyId = uniqueId + _tabpanelSuffix + i,
uniqueHeaderId = uniqueId + _titleSuffix + i,
title = wizard.find(".title").eq(i)._id(uniqueHeaderId);
wizard.find(".steps a").eq(i)._id(uniqueStepId)
._aria("controls", uniqueBodyId).attr("href", "#" + uniqueHeaderId)
.html(renderTemplate(options.titleTemplate, { index: i + 1, title: title.html() }));
wizard.find(".body").eq(i)._id(uniqueBodyId)
._aria("labelledby", uniqueHeaderId);
}
}
function registerEvents(wizard, options)
{
var eventNamespace = getEventNamespace(wizard);
wizard.bind("canceled" + eventNamespace, options.onCanceled);
wizard.bind("contentLoaded" + eventNamespace, options.onContentLoaded);
wizard.bind("finishing" + eventNamespace, options.onFinishing);
wizard.bind("finished" + eventNamespace, options.onFinished);
wizard.bind("init" + eventNamespace, options.onInit);
wizard.bind("stepChanging" + eventNamespace, options.onStepChanging);
wizard.bind("stepChanged" + eventNamespace, options.onStepChanged);
if (options.enableKeyNavigation)
{
wizard.bind("keyup" + eventNamespace, keyUpHandler);
}
wizard.find(".actions a").bind("click" + eventNamespace, paginationClickHandler);
}
/**
* Removes a specific step by an given index.
*
* @static
* @private
* @method removeStep
* @param wizard {Object} A jQuery wizard object
* @param options {Object} Settings of the current wizard
* @param state {Object} The state container of the current wizard
* @param index {Integer} The position (zero-based) of the step to remove
* @return Indecates whether the item is removed.
**/
function removeStep(wizard, options, state, index)
{
// Index out of range and try deleting current item will return false.
if (index < 0 || index >= state.stepCount || state.currentIndex === index)
{
return false;
}
// Change data
removeStepFromCache(wizard, index);
if (state.currentIndex > index)
{
state.currentIndex--;
saveCurrentStateToCookie(wizard, options, state);
}
state.stepCount--;
getStepTitle(wizard, index).remove();
getStepPanel(wizard, index).remove();
getStepAnchor(wizard, index).parent().remove();
// Set the "first" class to the new first step button
if (index === 0)
{
wizard.find(".steps li").first().addClass("first");
}
// Set the "last" class to the new last step button
if (index === state.stepCount)
{
wizard.find(".steps li").eq(index).addClass("last");
}
refreshSteps(wizard, options, state, index);
refreshPagination(wizard, options, state);
return true;
}
function removeStepFromCache(wizard, index)
{
getSteps(wizard).splice(index, 1);
}
/**
* Transforms the base html structure to a more sensible html structure.
*
* @static
* @private
* @method render
* @param wizard {Object} A jQuery wizard object
* @param options {Object} Settings of the current wizard
* @param state {Object} The state container of the current wizard
**/
function render(wizard, options, state)
{
// Create a content wrapper and copy HTML from the intial wizard structure
var wrapperTemplate = "<{0} class=\"{1}\">{2}</{0}>",
orientation = getValidEnumValue(stepsOrientation, options.stepsOrientation),
verticalCssClass = (orientation === stepsOrientation.vertical) ? " vertical" : "",
contentWrapper = $(wrapperTemplate.format(options.contentContainerTag, "content " + options.clearFixCssClass, wizard.html())),
stepsWrapper = $(wrapperTemplate.format(options.stepsContainerTag, "steps " + options.clearFixCssClass, "<ul role=\"tablist\"></ul>")),
stepTitles = contentWrapper.children(options.headerTag),
stepContents = contentWrapper.children(options.bodyTag);
// Transform the wizard wrapper and remove the inner HTML
wizard.attr("role", "application").empty().append(stepsWrapper).append(contentWrapper)
.addClass(options.cssClass + " " + options.clearFixCssClass + verticalCssClass);
// Add WIA-ARIA support
stepContents.each(function (index)
{
renderBody(wizard, state, $(this), index);
});
stepTitles.each(function (index)
{
renderTitle(wizard, options, state, $(this), index);
});
refreshStepNavigation(wizard, options, state);
renderPagination(wizard, options, state);
}
/**
* Transforms the body to a proper tabpanel.
*
* @static
* @private
* @method renderBody
* @param wizard {Object} A jQuery wizard object
* @param body {Object} A jQuery body object
* @param index {Integer} The position of the body
*/
function renderBody(wizard, state, body, index)
{
var uniqueId = getUniqueId(wizard),
uniqueBodyId = uniqueId + _tabpanelSuffix + index,
uniqueHeaderId = uniqueId + _titleSuffix + index;
body._id(uniqueBodyId).attr("role", "tabpanel")._aria("labelledby", uniqueHeaderId)
.addClass("body")._showAria(state.currentIndex === index);
}
/**
* Renders a pagination if enabled.
*
* @static
* @private
* @method renderPagination
* @param wizard {Object} A jQuery wizard object
* @param options {Object} Settings of the current wizard
* @param state {Object} The state container of the current wizard
*/
function renderPagination(wizard, options, state)
{
if (options.enablePagination)
{
var pagination = "<{0} class=\"actions {1}\"><ul role=\"menu\" aria-label=\"{2}\">{3}</ul></{0}>",
buttonTemplate = "<li><a href=\"#{0}\" role=\"menuitem\">{1}</a></li>",
buttons = "";
if (!options.forceMoveForward)
{
buttons += buttonTemplate.format("previous", options.labels.previous);
}
buttons += buttonTemplate.format("next", options.labels.next);
if (options.enableFinishButton)
{
buttons += buttonTemplate.format("finish", options.labels.finish);
}
if (options.enableCancelButton)
{
buttons += buttonTemplate.format("cancel", options.labels.cancel);
}
wizard.append(pagination.format(options.actionContainerTag, options.clearFixCssClass,
options.labels.pagination, buttons));
refreshPagination(wizard, options, state);
loadAsyncContent(wizard, options, state);
}
}
/**
* Renders a template and replaces all placeholder.
*
* @static
* @private
* @method renderTemplate
* @param template {String} A template
* @param substitutes {Object} A list of substitute
* @return {String} The rendered template
*/
function renderTemplate(template, substitutes)
{
var matches = template.match(/#([a-z]*)#/gi);
for (var i = 0; i < matches.length; i++)
{
var match = matches[i],
key = match.substring(1, match.length - 1);
if (substitutes[key] === undefined)
{
throwError("The key '{0}' does not exist in the substitute collection!", key);
}
template = template.replace(match, substitutes[key]);
}
return template;
}
/**
* Transforms the title to a step item button.
*
* @static
* @private
* @method renderTitle
* @param wizard {Object} A jQuery wizard object
* @param options {Object} Settings of the current wizard
* @param state {Object} The state container of the current wizard
* @param header {Object} A jQuery header object
* @param index {Integer} The position of the header
*/
function renderTitle(wizard, options, state, header, index)
{
var uniqueId = getUniqueId(wizard),
uniqueStepId = uniqueId + _tabSuffix + index,
uniqueBodyId = uniqueId + _tabpanelSuffix + index,
uniqueHeaderId = uniqueId + _titleSuffix + index,
stepCollection = wizard.find(".steps > ul"),
title = renderTemplate(options.titleTemplate, {
index: index + 1,
title: header.html()
}),
stepItem = $("<li role=\"tab\"><a id=\"" + uniqueStepId + "\" href=\"#" + uniqueHeaderId +
"\" aria-controls=\"" + uniqueBodyId + "\">" + title + "</a></li>");
stepItem._enableAria(options.enableAllSteps || state.currentIndex > index);
if (state.currentIndex > index)
{
stepItem.addClass("done");
}
header._id(uniqueHeaderId).attr("tabindex", "-1").addClass("title");
if (index === 0)
{
stepCollection.prepend(stepItem);
}
else
{
stepCollection.find("li").eq(index - 1).after(stepItem);
}
// Set the "first" class to the new first step button
if (index === 0)
{
stepCollection.find("li").removeClass("first").eq(index).addClass("first");
}
// Set the "last" class to the new last step button
if (index === (state.stepCount - 1))
{
stepCollection.find("li").removeClass("last").eq(index).addClass("last");
}
// Register click event
stepItem.children("a").bind("click" + getEventNamespace(wizard), stepClickHandler);
}
/**
* Saves the current state to a cookie.
*
* @static
* @private
* @method saveCurrentStateToCookie
* @param wizard {Object} A jQuery wizard object
* @param options {Object} Settings of the current wizard
* @param state {Object} The state container of the current wizard
*/
function saveCurrentStateToCookie(wizard, options, state)
{
if (options.saveState && $.cookie)
{
$.cookie(_cookiePrefix + getUniqueId(wizard), state.currentIndex);
}
}
function startTransitionEffect(wizard, options, state, index, oldIndex, doneCallback)
{
var stepContents = wizard.find(".content > .body"),
effect = getValidEnumValue(transitionEffect, options.transitionEffect),
effectSpeed = options.transitionEffectSpeed,
newStep = stepContents.eq(index),
currentStep = stepContents.eq(oldIndex);
switch (effect)
{
case transitionEffect.fade:
case transitionEffect.slide:
var hide = (effect === transitionEffect.fade) ? "fadeOut" : "slideUp",
show = (effect === transitionEffect.fade) ? "fadeIn" : "slideDown";
state.transitionElement = newStep;
currentStep[hide](effectSpeed, function ()
{
var wizard = $(this)._showAria(false).parent().parent(),
state = getState(wizard);
if (state.transitionElement)
{
state.transitionElement[show](effectSpeed, function ()
{
$(this)._showAria();
}).promise().done(doneCallback);
state.transitionElement = null;
}
});
break;
case transitionEffect.slideLeft:
var outerWidth = currentStep.outerWidth(true),
posFadeOut = (index > oldIndex) ? -(outerWidth) : outerWidth,
posFadeIn = (index > oldIndex) ? outerWidth : -(outerWidth);
$.when(currentStep.animate({ left: posFadeOut }, effectSpeed,
function () { $(this)._showAria(false); }),
newStep.css("left", posFadeIn + "px")._showAria()
.animate({ left: 0 }, effectSpeed)).done(doneCallback);
break;
default:
$.when(currentStep._showAria(false), newStep._showAria())
.done(doneCallback);
break;
}
}
/**
* Fires when a step click happens.
*
* @static
* @private
* @event click
* @param event {Object} An event object
*/
function stepClickHandler(event)
{
event.preventDefault();
var anchor = $(this),
wizard = anchor.parent().parent().parent().parent(),
options = getOptions(wizard),
state = getState(wizard),
oldIndex = state.currentIndex;
if (anchor.parent().is(":not(.disabled):not(.current)"))
{
var href = anchor.attr("href"),
position = parseInt(href.substring(href.lastIndexOf("-") + 1), 0);
goToStep(wizard, options, state, position);
}
// If nothing has changed
if (oldIndex === state.currentIndex)
{
getStepAnchor(wizard, oldIndex).focus();
return false;
}
}
function throwError(message)
{
if (arguments.length > 1)
{
message = message.format(Array.prototype.slice.call(arguments, 1));
}
throw new Error(message);
}
/**
* Checks an argument for null or undefined and throws an error if one check applies.
*
* @static
* @private
* @method validateArgument
* @param argumentName {String} The name of the given argument
* @param argumentValue {Object} The argument itself
*/
function validateArgument(argumentName, argumentValue)
{
if (argumentValue == null)
{
throwError("The argument '{0}' is null or undefined.", argumentName);
}
}
/**
* Represents a jQuery wizard plugin.
*
* @class steps
* @constructor
* @param [method={}] The name of the method as `String` or an JSON object for initialization
* @param [params=]* {Array} Additional arguments for a method call
* @chainable
**/
$.fn.steps = function (method)
{
if ($.fn.steps[method])
{
return $.fn.steps[method].apply(this, Array.prototype.slice.call(arguments, 1));
}
else if (typeof method === "object" || !method)
{
return initialize.apply(this, arguments);
}
else
{
$.error("Method " + method + " does not exist on jQuery.steps");
}
};
/**
* Adds a new step.
*
* @method add
* @param step {Object} The step object to add
* @chainable
**/
$.fn.steps.add = function (step)
{
var state = getState(this);
return insertStep(this, getOptions(this), state, state.stepCount, step);
};
/**
* Removes the control functionality completely and transforms the current state to the initial HTML structure.
*
* @method destroy
* @chainable
**/
$.fn.steps.destroy = function ()
{
return destroy(this, getOptions(this));
};
/**
* Triggers the onFinishing and onFinished event.
*
* @method finish
**/
$.fn.steps.finish = function ()
{
finishStep(this, getState(this));
};
/**
* Gets the current step index.
*
* @method getCurrentIndex
* @return {Integer} The actual step index (zero-based)
* @for steps
**/
$.fn.steps.getCurrentIndex = function ()
{
return getState(this).currentIndex;
};
/**
* Gets the current step object.
*
* @method getCurrentStep
* @return {Object} The actual step object
**/
$.fn.steps.getCurrentStep = function ()
{
return getStep(this, getState(this).currentIndex);
};
/**
* Gets a specific step object by index.
*
* @method getStep
* @param index {Integer} An integer that belongs to the position of a step
* @return {Object} A specific step object
**/
$.fn.steps.getStep = function (index)
{
return getStep(this, index);
};
/**
* Inserts a new step to a specific position.
*
* @method insert
* @param index {Integer} The position (zero-based) to add
* @param step {Object} The step object to add
* @example
* $("#wizard").steps().insert(0, {
* title: "Title",
* content: "", // optional
* contentMode: "async", // optional
* contentUrl: "/Content/Step/1" // optional
* });
* @chainable
**/
$.fn.steps.insert = function (index, step)
{
return insertStep(this, getOptions(this), getState(this), index, step);
};
/**
* Routes to the next step.
*
* @method next
* @return {Boolean} Indicates whether the action executed
**/
$.fn.steps.next = function ()
{
return goToNextStep(this, getOptions(this), getState(this));
};
/**
* Routes to the previous step.
*
* @method previous
* @return {Boolean} Indicates whether the action executed
**/
$.fn.steps.previous = function ()
{
return goToPreviousStep(this, getOptions(this), getState(this));
};
/**
* Removes a specific step by an given index.
*
* @method remove
* @param index {Integer} The position (zero-based) of the step to remove
* @return Indecates whether the item is removed.
**/
$.fn.steps.remove = function (index)
{
return removeStep(this, getOptions(this), getState(this), index);
};
/**
* Sets a specific step object by index.
*
* @method setStep
* @param index {Integer} An integer that belongs to the position of a step
* @param step {Object} The step object to change
**/
$.fn.steps.setStep = function (index, step)
{
throw new Error("Not yet implemented!");
};
/**
* Skips an certain amount of steps.
*
* @method skip
* @param count {Integer} The amount of steps that should be skipped
* @return {Boolean} Indicates whether the action executed
**/
$.fn.steps.skip = function (count)
{
throw new Error("Not yet implemented!");
};
/**
* An enum represents the different content types of a step and their loading mechanisms.
*
* @class contentMode
* @for steps
**/
var contentMode = $.fn.steps.contentMode = {
/**
* HTML embedded content
*
* @readOnly
* @property html
* @type Integer
* @for contentMode
**/
html: 0,
/**
* IFrame embedded content
*
* @readOnly
* @property iframe
* @type Integer
* @for contentMode
**/
iframe: 1,
/**
* Async embedded content
*
* @readOnly
* @property async
* @type Integer
* @for contentMode
**/
async: 2
};
/**
* An enum represents the orientation of the steps navigation.
*
* @class stepsOrientation
* @for steps
**/
var stepsOrientation = $.fn.steps.stepsOrientation = {
/**
* Horizontal orientation
*
* @readOnly
* @property horizontal
* @type Integer
* @for stepsOrientation
**/
horizontal: 0,
/**
* Vertical orientation
*
* @readOnly
* @property vertical
* @type Integer
* @for stepsOrientation
**/
vertical: 1
};
/**
* An enum that represents the various transition animations.
*
* @class transitionEffect
* @for steps
**/
var transitionEffect = $.fn.steps.transitionEffect = {
/**
* No transition animation
*
* @readOnly
* @property none
* @type Integer
* @for transitionEffect
**/
none: 0,
/**
* Fade in transition
*
* @readOnly
* @property fade
* @type Integer
* @for transitionEffect
**/
fade: 1,
/**
* Slide up transition
*
* @readOnly
* @property slide
* @type Integer
* @for transitionEffect
**/
slide: 2,
/**
* Slide left transition
*
* @readOnly
* @property slideLeft
* @type Integer
* @for transitionEffect
**/
slideLeft: 3
};
var stepModel = $.fn.steps.stepModel = {
title: "",
content: "",
contentUrl: "",
contentMode: contentMode.html,
contentLoaded: false
};
/**
* An object that represents the default settings.
* There are two possibities to override the sub-properties.
* Either by doing it generally (global) or on initialization.
*
* @static
* @class defaults
* @for steps
* @example
* // Global approach
* $.steps.defaults.headerTag = "h3";
* @example
* // Initialization approach
* $("#wizard").steps({ headerTag: "h3" });
**/
var defaults = $.fn.steps.defaults = {
/**
* The header tag is used to find the step button text within the declared wizard area.
*
* @property headerTag
* @type String
* @default "h1"
* @for defaults
**/
headerTag: "h1",
/**
* The body tag is used to find the step content within the declared wizard area.
*
* @property bodyTag
* @type String
* @default "div"
* @for defaults
**/
bodyTag: "div",
/**
* The content container tag which will be used to wrap all step contents.
*
* @property contentContainerTag
* @type String
* @default "div"
* @for defaults
**/
contentContainerTag: "div",
/**
* The action container tag which will be used to wrap the pagination navigation.
*
* @property actionContainerTag
* @type String
* @default "div"
* @for defaults
**/
actionContainerTag: "div",
/**
* The steps container tag which will be used to wrap the steps navigation.
*
* @property stepsContainerTag
* @type String
* @default "div"
* @for defaults
**/
stepsContainerTag: "div",
/**
* The css class which will be added to the outer component wrapper.
*
* @property cssClass
* @type String
* @default "wizard"
* @for defaults
* @example
* <div class="wizard">
* ...
* </div>
**/
cssClass: "wizard",
/**
* The css class which will be used for floating scenarios.
*
* @property clearFixCssClass
* @type String
* @default "clearfix"
* @for defaults
**/
clearFixCssClass: "clearfix",
/**
* Determines whether the steps are vertically or horizontally oriented.
*
* @property stepsOrientation
* @type stepsOrientation
* @default horizontal
* @for defaults
* @since 1.0.0
**/
stepsOrientation: stepsOrientation.horizontal,
/*
* Tempplates
*/
/**
* The title template which will be used to create a step button.
*
* @property titleTemplate
* @type String
* @default "<span class=\"number\">#index#.</span> #title#"
* @for defaults
**/
titleTemplate: "<span class=\"number\">#index#.</span> #title#",
/**
* The loading template which will be used to create the loading animation.
*
* @property loadingTemplate
* @type String
* @default "<span class=\"spinner\"></span> #text#"
* @for defaults
**/
loadingTemplate: "<span class=\"spinner\"></span> #text#",
/*
* Behaviour
*/
/**
* Sets the focus to the first wizard instance in order to enable the key navigation from the begining if `true`.
*
* @property autoFocus
* @type Boolean
* @default false
* @for defaults
* @since 0.9.4
**/
autoFocus: false,
/**
* Enables all steps from the begining if `true` (all steps are clickable).
*
* @property enableAllSteps
* @type Boolean
* @default false
* @for defaults
**/
enableAllSteps: false,
/**
* Enables keyboard navigation if `true` (arrow left and arrow right).
*
* @property enableKeyNavigation
* @type Boolean
* @default true
* @for defaults
**/
enableKeyNavigation: true,
/**
* Enables pagination if `true`.
*
* @property enablePagination
* @type Boolean
* @default true
* @for defaults
**/
enablePagination: true,
/**
* Suppresses pagination if a form field is focused.
*
* @property suppressPaginationOnFocus
* @type Boolean
* @default true
* @for defaults
**/
suppressPaginationOnFocus: true,
/**
* Enables cache for async loaded or iframe embedded content.
*
* @property enableContentCache
* @type Boolean
* @default true
* @for defaults
**/
enableContentCache: true,
/**
* Shows the cancel button if enabled.
*
* @property enableCancelButton
* @type Boolean
* @default false
* @for defaults
**/
enableCancelButton: false,
/**
* Shows the finish button if enabled.
*
* @property enableFinishButton
* @type Boolean
* @default true
* @for defaults
**/
enableFinishButton: true,
/**
* Not yet implemented.
*
* @property preloadContent
* @type Boolean
* @default false
* @for defaults
**/
preloadContent: false,
/**
* Shows the finish button always (on each step; right beside the next button) if `true`.
* Otherwise the next button will be replaced by the finish button if the last step becomes active.
*
* @property showFinishButtonAlways
* @type Boolean
* @default false
* @for defaults
**/
showFinishButtonAlways: false,
/**
* Prevents jumping to a previous step.
*
* @property forceMoveForward
* @type Boolean
* @default false
* @for defaults
**/
forceMoveForward: false,
/**
* Saves the current state (step position) to a cookie.
* By coming next time the last active step becomes activated.
*
* @property saveState
* @type Boolean
* @default false
* @for defaults
**/
saveState: false,
/**
* The position to start on (zero-based).
*
* @property startIndex
* @type Integer
* @default 0
* @for defaults
**/
startIndex: 0,
/*
* Animation Effect Configuration
*/
/**
* The animation effect which will be used for step transitions.
*
* @property transitionEffect
* @type transitionEffect
* @default none
* @for defaults
**/
transitionEffect: transitionEffect.none,
/**
* Animation speed for step transitions (in milliseconds).
*
* @property transitionEffectSpeed
* @type Integer
* @default 200
* @for defaults
**/
transitionEffectSpeed: 200,
/*
* Events
*/
/**
* Fires before the step changes and can be used to prevent step changing by returning `false`.
* Very useful for form validation.
*
* @property onStepChanging
* @type Event
* @default function (event, currentIndex, newIndex) { return true; }
* @for defaults
**/
onStepChanging: function (event, currentIndex, newIndex) { return true; },
/**
* Fires after the step has change.
*
* @property onStepChanged
* @type Event
* @default function (event, currentIndex, priorIndex) { }
* @for defaults
**/
onStepChanged: function (event, currentIndex, priorIndex) { },
/**
* Fires after cancelation.
*
* @property onCanceled
* @type Event
* @default function (event) { }
* @for defaults
**/
onCanceled: function (event) { },
/**
* Fires before finishing and can be used to prevent completion by returning `false`.
* Very useful for form validation.
*
* @property onFinishing
* @type Event
* @default function (event, currentIndex) { return true; }
* @for defaults
**/
onFinishing: function (event, currentIndex) { return true; },
/**
* Fires after completion.
*
* @property onFinished
* @type Event
* @default function (event, currentIndex) { }
* @for defaults
**/
onFinished: function (event, currentIndex) { },
/**
* Fires after async content is loaded.
*
* @property onContentLoaded
* @type Event
* @default function (event, index) { }
* @for defaults
**/
onContentLoaded: function (event, currentIndex) { },
/**
* Fires when the wizard is initialized.
*
* @property onInit
* @type Event
* @default function (event) { }
* @for defaults
**/
onInit: function (event, currentIndex) { },
/**
* Contains all labels.
*
* @property labels
* @type Object
* @for defaults
**/
labels: {
/**
* Label for the cancel button.
*
* @property cancel
* @type String
* @default "Cancel"
* @for defaults
**/
cancel: "Cancel",
/**
* This label is important for accessability reasons.
* Indicates which step is activated.
*
* @property current
* @type String
* @default "current step:"
* @for defaults
**/
current: "current step:",
/**
* This label is important for accessability reasons and describes the kind of navigation.
*
* @property pagination
* @type String
* @default "Pagination"
* @for defaults
* @since 0.9.7
**/
pagination: "Pagination",
/**
* Label for the finish button.
*
* @property finish
* @type String
* @default "Finish"
* @for defaults
**/
finish: "Finish",
/**
* Label for the next button.
*
* @property next
* @type String
* @default "Next"
* @for defaults
**/
next: "Next",
/**
* Label for the previous button.
*
* @property previous
* @type String
* @default "Previous"
* @for defaults
**/
previous: "Previous",
/**
* Label for the loading animation.
*
* @property loading
* @type String
* @default "Loading ..."
* @for defaults
**/
loading: "Loading ..."
}
};
})(jQuery);
建议：可以从官网上拉取代码事例:
https://github.com/iyangyuan/ystep
标签：function,index,ystep,月份,wizard,step,state,时间轴,options 来源： https://blog.csdn.net/weixin_41698201/article/details/114483624
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。