你的位置:首页 > Java教程

[Java教程]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. });
复制

下载