一款实用的 jQuery progression 表单进度

progression.js是一款表单输入完成进度插件。支持自定义提示框大小、方向、左边、动画效果、间距等，也支持是否显示进度条、字体大小、颜色、背景色等。

在线实例

实例演示

使用方法

1. <form?id="myform">?
2. ????<p>?
3. ????????<label>点击一个字段</label>?
4. ????????<input??data-progression?type="text"?data-helper="提示用户帮助"?name="name"?value=""?placeholder=""/>?
5. ????</p>?
6. ?
7. ????<p>?
8. ????????<label>提供更好的用户体验</label>?
9. ????????<input?data-progression?type="text"?data-helper="追踪用户输入表单进度"?name="email"?value=""?placeholder=""/>?
10. ????</p>?
11. ????<p?class="left">?
12. ????????<label>另一个字段</label>?
13. ????????<input?data-progression?type="text"?data-helper="这个提示框是完全可定制的"?name="mytel"?value=""?placeholder=""/>?
14. ????</p>?
15. ????<p>?
16. ????????<label>电话号码</label>?
17. ????????<textarea?data-progression?name=""?data-helper="文本或者进度条可以关闭"></textarea>?
18. ????</p>?
19. ????<p>?
20. ????????<input?type="submit"?class="button"?name=""?value="提?交"?placeholder=""/>?
21. ????</p>?
22. </form>

参数详解

1. $("#myform").progression({?
2. ????tooltipWidth:?‘200‘,?//提示框宽度?
3. ????tooltipPosition:?‘right‘,?//方向?
4. ????tooltipOffset:?‘50‘,?//坐标?
5. ????showProgressBar:?true,?//显示进度条?
6. ????showHelper:?true,?//显示帮助?
7. ????tooltipFontSize:?‘14‘,?//字体大小?
8. ????tooltipFontColor:?‘fff‘,?//字体演示?
9. ????progressBarBackground:?‘fff‘,?//进度条背景色?
10. ????progressBarColor:?‘6EA5E1‘,?//进度条字体颜色?
11. ????tooltipBackgroundColor:?‘a2cbfa‘,?//提示框背景色?
12. ????tooltipPadding:?‘10‘,?//提示框间距padding?
13. ????tooltipAnimate:?true?//提示框动画?
14. });

?

一款实用的 jQuery progression 表单进度

原文：http://zaixianshouce.iteye.com/blog/2312551