jQuery.Step 步骤说明文档

一、设置/setting

[1]. 外观设置(Appearance)

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

 [2]. 模板设置(Templates)

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

[3]. 特性设置(Behaviour)

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

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

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

[5]. 事件(Events)

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

[6]. 标签(Labels)

设置名称描述值的类型默认值
cancel设置“取消”按钮的显示的文本。StringCanCel
current这个标签对于可访问性很重要。指示哪个步骤被激活。(当激活“步骤按钮”会current设置信息添加到当前激活的按钮中)Stringcurrent step:
pagination这个标签对于可访问性很重要,它描述了导航的类型。StringPagination
finish设置“完成”按钮的显示的文本。StringFinish
next设置“下一个”按钮的显示的文本。StringNext
previous设置“上一个”按钮的显示的文本StringPrevious
loading加载动画的标签。StringLoading …
$("#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;
        }

        ...
    }
});
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值