一款实用的 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. });

复制

---

下载