jQuery.Step 步骤说明文档

一、设置/setting

[1]. 外观设置(Appearance)

设置名称	描述	值的类型	默认值
headerTag	指定步骤按钮文本所在的标签	String	h1
bodyTag	指定步骤主体内容所在的标签	String	div
contentContainerTag	包装所有步骤内容所用的标签，该标签上有content样式类	String	div
actionContainerTag	包装所有分页导航所用的标签，该标签上有actions样式类	String	div
stepsContainerTag	包装所有步骤按钮所用的标签，该标签上有steps样式类	String	div
cssClass	添加到向导容器上的css类	String	wizard
stepsOrientation	设置步骤按钮是垂直分布还是水平分布，horizontal或者0表示水平分布，vertical或者1表示垂直分布	String or Integer	horizontal or 0

 [2]. 模板设置(Templates)

设置名称	描述	值的类型	默认值
titleTemplate	创建步骤按钮的模板	String	<span class="number">#index#.</span> #title#
loadingTemplate	创建loading动画的模板	String	<span class="spinner"></span> #text#

[3]. 特性设置(Behaviour)

设置名称	描述	值的类型	默认值
autoFocus	是否将焦点将设置为第一个向导实例	Boolean	false
enableAllSteps	启用所有的步骤按钮(是否所有按钮都可以点击)	Boolean	false
enableKeyNavigation	启用键盘导航(向左箭头和向右箭头)。	Boolean	true
enablePagination	启用分页按钮(上一个、下一个和完成按钮)	Boolean	true
suppressPaginationOnFocus	焦点再form表单中时，禁止切换到下一页（可以阻止启用enableKeyNavigation 后键盘切换）	Boolean	true
enableContentCache	为异步加载或iframe嵌入内容启用缓存。	Boolean	true
enableCancelButton	启用取消按钮	Boolean	false
enableFinishButton	启用完成按钮	Boolean	true
showFinishButtonAlways	总是显示完成按钮，如果设置为false，则只会在最后一个步骤显示完成按钮	Boolean	true
forceMoveForward	禁止跳转到上一个步骤(此时也不显示上一步的按钮)	Boolean	false
startIndex	从第几个步骤开始(例：设置为1，则跳过第一个步骤，直接从步骤2开始)	Integer	0

[4]. 转换效果(Transition Effects)

设置名称	描述	值的类型	默认值
transitionEffect	切换步骤时的动画效果(none或者0不设置动画效果，fade或者1淡入淡出，slide或者2上下滑动，slideLeft或者3左右滑动)	String or Integer	none or 0
transitionEffectSpeed	转换速度	Integet	200

[5]. 事件(Events)

设置名称	描述	值的类型	默认值
onStepChanging	在步骤更改之前触发，并可通过返回false来防止步骤更改。对表单验证非常有用。	Event	function (event, currentIndex, newIndex) { return true; }
onStepChanged	在步骤发生变化后触发。	Event	function (event, currentIndex, priorIndex) { }
onCanceled	点击取消按钮之后触发	Event	function (event) { }
onFinishing	在完成之前触发，并可通过返回false来阻止完成。对表单验证非常有用。	Event	function (event, currentIndex) { return true; }
onFinished	完成之后触发	Event	function (event, currentIndex) { }
onInit	初始化时触发。	Event	function (event, currentIndex) { }
onContentLoaded	在异步内容加载后触发。	Event	function (event, currentIndex) { }

[6]. 标签(Labels)

设置名称	描述	值的类型	默认值
cancel	设置“取消”按钮的显示的文本。	String	CanCel
current	这个标签对于可访问性很重要。指示哪个步骤被激活。（当激活“步骤按钮”会current设置信息添加到当前激活的按钮中）	String	current step:
pagination	这个标签对于可访问性很重要，它描述了导航的类型。	String	Pagination
finish	设置“完成”按钮的显示的文本。	String	Finish
next	设置“下一个”按钮的显示的文本。	String	Next
previous	设置“上一个”按钮的显示的文本	String	Previous
loading	加载动画的标签。	String	Loading …

$("#wizard").steps({
    labels: {
        cancel: "Cancel",
        current: "current step:",
        pagination: "Pagination",
        finish: "Finish",
        next: "Next",
        previous: "Previous",
        loading: "Loading ..."
    }
});

二、步骤对象/Step Object

//在向导容器中添加一个步骤
$("#wizard").steps("add", {
    title: "Step Title",
    contentMode: "async",
    contentUrl: "data.xml" //获取内容的URI地址
});

//这是一个获取到的step object
{
	content: "<p>Quisque at sem turpis, id sagittis diam.</p>↵            "
	contentLoaded: false
	contentMode: 0
	contentUrl: ""
	title: "Forth Step"
}

三、方法/Methods

$("#wizard").steps("insert", 0, {
   title: "Step Title",
   content: "<p>Step Body</p>"
});
if($("#wizard").steps("remove", 1)){
  console.log("删除成功");
}

四、用例

[1].如何允许在步骤错误期间后退

$("#wizard").steps({
    onStepChanging: function (event, currentIndex, newIndex)
    {
        // Allways allow step back to the previous step even if the current step is not valid!
        if (currentIndex > newIndex)
        {
            return true;
        }

        ...
    }
});