jQuery progression 表单进度

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

在线实例

实例演示

使用方法

<form id="myform"> 

    <p> 

        <label>点击一个字段</label> 

        <input  data-progression type="text" data-helper="提示用户帮助" name="name" value="" placeholder=""/> 

    </p> 

 

    <p> 

        <label>提供更好的用户体验</label> 

        <input data-progression type="text" data-helper="追踪用户输入表单进度" name="email" value="" placeholder=""/> 

    </p> 

    <p class="left"> 

        <label>另一个字段</label> 

        <input data-progression type="text" data-helper="这个提示框是完全可定制的" name="mytel" value="" placeholder=""/> 

    </p> 

    <p> 

        <label>电话号码</label> 

        <textarea data-progression name="" data-helper="文本或者进度条可以关闭"></textarea> 

    </p> 

    <p> 

        <input type="submit" class="button" name="" value="提 交" placeholder=""/> 

    </p> 

</form>

复制

参数详解

$("#myform").progression({ 

    tooltipWidth: '200', //提示框宽度 

    tooltipPosition: 'right', //方向 

    tooltipOffset: '50', //坐标 

    showProgressBar: true, //显示进度条 

    showHelper: true, //显示帮助 

    tooltipFontSize: '14', //字体大小 

    tooltipFontColor: 'fff', //字体演示 

    progressBarBackground: 'fff', //进度条背景色 

    progressBarColor: '6EA5E1', //进度条字体颜色 

    tooltipBackgroundColor: 'a2cbfa', //提示框背景色 

    tooltipPadding: '10', //提示框间距padding 

    tooltipAnimate: true //提示框动画 

});

复制 下载

 

转载于:https://www.cnblogs.com/niuboren/p/6384896.html

总结

以上是生活随笔为你收集整理的jQuery progression 表单进度的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。