Progression.js基础入门_在用户完成表单时为用户提供实时提示和进度更新

Progression.js基础入门

官方网址:http://git.aaronlumsden.com/progression/

Progression.js基础入门_在用户完成表单时为用户提供实时提示和进度更新

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
 });

海计划公众号
(0)
上一篇 2020/03/11 04:51
下一篇 2020/03/11 05:54

您可能感兴趣的内容