Progression.js基础入门
官方网址:http://git.aaronlumsden.com/progression/
GitHub:https://github.com/aarondo/progression.js
简介描述:在用户完成表单时为用户提供实时提示和进度更新
Progression.js一个jQuery插件,在完成表单时为用户提供实时提示和进度更新。Progression.js是一个能够提示用户表单填写完成百分比进度的jQuery表单插件。这款jQuery表单插件十分人性化,而且界面美化的十分漂亮,设计简洁大方。
创建表单
您必须为表单提供唯一的ID。然后,您需要为data-progression每个元素添加一个数据属性,该属性需要是表单进程中的一个步骤。
可以通过添加data-helper到元素来设置工具提示的帮助文本。这在下面说明
<form id="myform">
<p>
<label for="">Name</label>
<input data-progression="" type="text" data-helper="Help users through forms by prividing helpful hinters" name="name" value="" placeholder="" />
</p>
</form>
##### Initiate the plugin
创建表单后,您需要启动插件。在最基本的级别,您可以启动插件,如:
$(document).ready(function ($) {
$("#myform").progression();
});
如果你想用选项启动插件,你可以这样做:
$("#myform").progression({
tooltipWidth: '200',
tooltipPosition: 'right',
tooltipOffset: '50',
showProgressBar: true,
showHelper: true,
tooltipFontSize: '14',
tooltipFontColor: 'fff',
progressBarBackground: 'fff',
progressBarColor: '6EA5E1',
tooltipBackgroundColor: 'a2cbfa',
tooltipPadding: '10',
tooltipAnimate: true
});
