progression表单输入完成进度提示框插件

来源:https://www.sucaihuo.com/js/695.html 2016-01-21 20:36浏览(1117) 收藏

progression.js是一款表单输入完成进度插件。支持自定义提示框大小、方向、左边、动画效果、间距等,也支持是否显示进度条、字体大小、颜色、背景色等。更多进度加载演示请看:http://www.sucaihuo.com/search.html?keyword=%25E8%25BF%259B%25E5%25BA%25A6
progression表单输入完成进度提示框插件
分类:表单代码 > 输入框 难易:高级
查看演示 下载资源 下载积分: 20 积分

带有进度属性data-progression的表单#myform

<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>

调用进度插件progression.js

<script type="text/javascript" src="progression.min.js"></script>
$("#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 //提示框动画
});
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2