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. <p>
7. <label>提供更好的用户体验</label>
8. <input data-progression type="text" data-helper="追踪用户输入表单进度" name="email" value="" placeholder=""/>
9. </p>
10. <p class="left">
11. <label>另一个字段</label>
12. <input data-progression type="text" data-helper="这个提示框是完全可定制的" name="mytel" value="" placeholder=""/>
13. </p>
14. <p>
15. <label>电话号码</label>
16. <textarea data-progression name="" data-helper="文本或者进度条可以关闭"></textarea>
17. </p>
18. <p>
19. <input type="submit" class="button" name="" value="提 交" placeholder=""/>
20. </p>
21. </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. });

复制

下载