进度插件-Progression.js

所属分类：UI-工具提示

28262 320 查看评论 (1)

分享到微信朋友圈

查看演示立即下载

插件描述：Progression.js是一个jQuery插件，为用户填写表格提供实时提示和进度更新.

Progression.js是一个jQuery插件，为用户填写表格提供实时提示和进度更新.

使用步骤

首先包括jQuery和progression.css的和progress.js文件。</ HEAD>部分

<link href='progression.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="progression.js"></script>

创建一个表单

<form id="myform">
    <p>
    	<label for="">Name</label> 
    	<input data-progression="" type="text" data-helper="Helphinters" name="name" value="" placeholder="" />
    </p>
</form>

启动该插件

一旦你创建你的表格，你需要启动该插件。

在最基本的层面上，你可以启动插件，如：

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