jQuery Step 向导插件参考文档

文档来源：https://github.com/rstaib/jquery-steps/wiki

一、设置/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

设置名称	描述	值的类型	默认值
title	该步骤的标题(可以使用HTML)	String	“”
content	该步骤的内容(可以使用HTML)	String	“”
contentMode	指示内容将如何加载。（html或0 HTML嵌入的内容，iftame或1，IFrame嵌入的内容，async或2异步嵌入的内容）	String or Integer	html或0
contentUrl	获取内容的URI	string	“”

//在向导容器中添加一个步骤
$("#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: falsecontentMode: 0contentUrl: ""title: "Forth Step"
}

三、方法/Methods

设置名称	描述	参数	返回值的类型
add	添加一个新步骤。(chainable)	Object step	Object wizard
insert	将新步骤插入到特定位置。(chainable)	Integer index, Object step	Object wizard
remove	通过给定的索引删除特定的步骤。	Integer index	Boolean
getCurrentStep	获取当前步骤对象	-	Object step
getCurrentIndex	获取当前步骤索引。	-	Integer
getStep	通过索引获取特定的步骤对象。	Integer index	Object step
next	切换到下一个步骤	-	Boolean
previous	切换到上一个步骤	-	Boolean
finish	触发onfinish和onFinished事件。	-	void
destroy	完全删除控件功能，并将当前状态转换为初始的HTML结构。	-	void
skip	跳过一定数量的步骤。没有实现!	Integer count	Boolean

$("#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;}...}
});

jQuery Step 向导插件参考文档相关推荐

dita文档_使用DITADoclet和DITA API专业化生成DITA Java™API参考文档
dita文档 2009年12月11日修订说明:在" 目标"和" 安装org.dita.dost插件 "标题下添加了两个指向可下载资源的链接. 2014年3月7日 ...
CHM格式的可以全文搜索的Spring3.2官方参考文档
Spring的官方参考文档是html格式的,并且没有目录树,用它本身的跳转功能,跳来跳去经常把头给跳晕了! 最重要的一个缺点是没有全文搜索,于是一生气就做了一个CHM格式的有目录,带全文搜索的 ...
View4.5测试参考文档7--View Administrator安装、配置、创建桌面池
View4.5测试参考文档7--View Administrator安装.配置.创建桌面池见附件! 转载于:https://blog.51cto.com/ieihihc/471642
教您怎么从spring 官网下载参考文档
假如您使用spring,那么本经验可能帮助到您. 假如您使用spring的过程中,需要查询一些文档,那么本经验可能帮助到您. 假如您对下载spring的文档有疑惑,那么本经验可能帮助到您. 教您怎么从 ...
RxJava 参考文档
/**************************************************************** RxJava 参考文档* 说明:* 最近无意中发现RxJava这个好 ...
Python 参考文档
Python 参考文档笔者在学习 Python ,查找相关资料时觉得比较有用的参考文档,将持续更新- python 官方文档简明 Python 教程 PyCharm(2018.2)专业版破解PyC ...
PyQt5 参考文档
PyQt5 参考文档笔者在 PyQt5 实践中遇到问题,查找相关资料时觉得比较有用的参考文档,将持续更新- PyQt5 官方文档(英文) PyQt5 官方文档(中文) PyQt5 实现控制台显示功能 ...
Python-OpenCV 参考文档
Python-OpenCV 参考文档笔者在 Python-OpenCV 实践中遇到问题,查找相关资料时觉得比较有用的参考文档.将持续更新- 官方文档 1.在图片/视频中添加中文
mpvue 从零开始女友拉黑了我 5 不在以下request 合法域名列表中，请参考文档
上一篇,才调通了接口,试了几次,都成功,突然,微信报错了. VM6239:1 https://www.easy-mock.com 不在以下 request 合法域名列表中,请参考文档:https:// ...

jQuery Step 向导插件参考文档

一、设置/setting

[1]. 外观设置(Appearance)

[2]. 模板设置(Templates)

[3]. 特性设置(Behaviour)

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

[5]. 事件(Events)

[6]. 标签(Labels)

二、步骤对象/Step Object

三、方法/Methods

四、用例

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

jQuery Step 向导插件参考文档相关推荐

最新文章

热门文章