Progress 进度条
简介
进度条在下载、提交或者页面切换的时候经常用到，是管理系统的必备组件。本框架的进度条基于v1.0的版本改造成了js插件。
特点
本进度条插件功能齐全，能满足常见场景需求，其特点如下：
- 1、支持三种外观形式，分别是line条状、circle圆环、semicircle半圆环和gapcircle仪表圆环
- 2、两种HTML结构，line条状使用div结构，而circle、semicircle和gapcircle使用svg结构，都能做到无限放大而不失真
- 3、支持七种颜色主题，分别是primary、secondary、danger、success、warning、info和ad
- 4、在七种颜色主题基础上，支持七种渐变色
- 5、支持三种尺寸，分别是sm、md和lg
- 6、支持显示和隐藏结果文字，也可以将结果文字放到页面的任意地方
- 7、支持圆角和方角的边框
- 8、支持显示和隐藏轨道
- 9、支持自定义结果文字格式
- 10、支持set和get方法，便于与其他组件配合工作
- 10、支持seted和completed监听
- 11、可自定义进度值范围，不限于0~100
使用方法
插件运行方式有两种：
- ax*属性：对ax-progress标签使用
axProgress属性，为了初始化看到效果可以使用value属性，即可按默认参数运行插件。 - js实例：通过
new axProgress('#ID')方式创建实例运行。
-
<div class="ax-row ax-split"> <div class="ax-col ax-col-11"> <div class="ax-progress" axProgress='value:45'></div> </div> <div class="ax-col ax-col-2"></div> <div class="ax-col ax-col-11"> <div class="ax-progress" id="jsIns"></div> </div> </div> -
let jsIns = new axProgress('#jsIns',{ value:25, });
圆环进度条
进度条默认为条状的，可通过type参数更换进度条外观。
type=line：条状进度条。type=circle：全圆进度条。type=semicircle：半圆进度条。type=gapcircle：仪表圆进度条。
<div class="ax-row ax-split">
<div class="ax-col ax-col-8">
<div class="ax-progress" axProgress='value:45,type:"circle"'></div>
</div>
<div class="ax-col ax-col-8">
<div class="ax-progress" axProgress='value:25,type:"semicircle"'></div>
</div>
<div class="ax-col ax-col-8">
<div class="ax-progress" axProgress='value:75,type:"gapcircle"'></div>
</div>
</div>
尺寸
三种类型都支持三种尺寸，通过size参数进行设定。
size=sm：纤细风格进度条，线宽为2px的进度条。size=md：常规风格进度条，线宽为6px的进度条，插件默认尺寸。size=lg：粗壮风格进度条，线宽为12px的进度条。
<div class="ax-row ax-split">
<div class="ax-col ax-col-6">
<div class="ax-progress" axProgress='value:15,size:"sm"'></div>
</div>
<div class="ax-col ax-col-6">
<div class="ax-progress" axProgress='value:45,size:"sm",type:"circle"'></div>
</div>
<div class="ax-col ax-col-6">
<div class="ax-progress" axProgress='value:25,size:"sm",type:"semicircle"'></div>
</div>
<div class="ax-col ax-col-6">
<div class="ax-progress" axProgress='value:75,size:"sm",type:"gapcircle"'></div>
</div>
</div>
<div class="ax-row ax-split">
<div class="ax-col ax-col-6">
<div class="ax-progress" axProgress='value:15,size:"md"'></div>
</div>
<div class="ax-col ax-col-6">
<div class="ax-progress" axProgress='value:45,size:"md",type:"circle"'></div>
</div>
<div class="ax-col ax-col-6">
<div class="ax-progress" axProgress='value:25,size:"md",type:"semicircle"'></div>
</div>
<div class="ax-col ax-col-6">
<div class="ax-progress" axProgress='value:75,size:"md",type:"gapcircle"'></div>
</div>
</div>
<div class="ax-row ax-split">
<div class="ax-col ax-col-6">
<div class="ax-progress" axProgress='value:15,size:"lg"'></div>
</div>
<div class="ax-col ax-col-6">
<div class="ax-progress" axProgress='value:45,size:"lg",type:"circle"'></div>
</div>
<div class="ax-col ax-col-6">
<div class="ax-progress" axProgress='value:25,size:"lg",type:"semicircle"'></div>
</div>
<div class="ax-col ax-col-6">
<div class="ax-progress" axProgress='value:75,size:"lg",type:"gapcircle"'></div>
</div>
</div>
颜色
三种类型都支持多种颜色和渐变。通过color设定颜色风格，可使用primary、secondary、success、danger、warning、info和ad；通过gradient=true使用渐变。
<div class="ax-row ax-split">
<div class="ax-col ax-col-4">
<div class="ax-progress" axProgress='value:25,type:"semicircle",color:"primary"'></div>
</div>
<div class="ax-col ax-col-4">
<div class="ax-progress" axProgress='value:25,type:"semicircle",color:"success"'></div>
</div>
<div class="ax-col ax-col-4">
<div class="ax-progress" axProgress='value:25,type:"semicircle",color:"danger"'></div>
</div>
<div class="ax-col ax-col-4">
<div class="ax-progress" axProgress='value:25,type:"semicircle",color:"warning"'></div>
</div>
<div class="ax-col ax-col-4">
<div class="ax-progress" axProgress='value:25,type:"semicircle",color:"info"'></div>
</div>
<div class="ax-col ax-col-4">
<div class="ax-progress" axProgress='value:25,type:"semicircle",color:"ad"'></div>
</div>
</div>
<div class="ax-row ax-split">
<div class="ax-col ax-col-4">
<div class="ax-progress" axProgress='value:90,type:"semicircle",gradient:true,color:"primary"'></div>
</div>
<div class="ax-col ax-col-4">
<div class="ax-progress" axProgress='value:90,type:"semicircle",gradient:true,color:"success"'></div>
</div>
<div class="ax-col ax-col-4">
<div class="ax-progress" axProgress='value:90,type:"semicircle",gradient:true,color:"danger"'></div>
</div>
<div class="ax-col ax-col-4">
<div class="ax-progress" axProgress='value:90,type:"semicircle",gradient:true,color:"warning"'></div>
</div>
<div class="ax-col ax-col-4">
<div class="ax-progress" axProgress='value:90,type:"semicircle",gradient:true,color:"info"'></div>
</div>
<div class="ax-col ax-col-4">
<div class="ax-progress" axProgress='value:90,type:"semicircle",gradient:true,color:"ad"'></div>
</div>
</div>
自定义文本格式
通过labelFormat参数设置结果文本的HTML格式，默认是按插件内置的格式生成，用户可通过以下方法自定义格式：
- label属性标签：存放进度文本的大容器
- result属性标签：包裹progress和unit
- progress属性标签：存放当前进度值
- unit属性标签：存放进度值单位
- tips属性标签：存放进度提示文本
举例：<div label><div tips></div><div result><i progress></i><i unit></i></div></div>
通过labelText参数设置结果文本的的内容：
- complete：加载完成时的文字，默认“完成!”，可以填标签代码，比如:
<i class="ax-iconfont ax-icon-check-o-f"></i> - unit：默认%，可以填“人”、“日”、“件”等
- tips：进度提示文本，默认“当前进度”
-
<div class="ax-progress" id="textIns"></div> -
let textIns = new axProgress('#textIns',{ value:25, type:'circle', labelFormat:``, labelText:{ unit:'天', tips:'过去了', } });
自定义进度范围
通常用0~100表示进度范围，但是不排除有些场景会使用其他的进度范围，比如日期、步数、资金等；可通过range参数设定个性的进度值。range=[min,max]是一个数组。
因为进度值比较个性，所以通常需要配合labelText.unit参数定义单位。
<div class="ax-row ax-split">
<div class="ax-col ax-col-12">
<div class="ax-progress" axProgress='value:25,type:"circle",range:[0,31],labelText:{unit:"天"}'></div>
</div>
<div class="ax-col ax-col-12">
<div class="ax-progress" axProgress='value:15263,type:"circle",range:[0,20000],labelText:{unit:"步"}'></div>
</div>
</div>
自定义结果文本位置
通过labelPlace参数改变结果文本的存放位置，可以放在页面的任意节点；该参数可以是id、className或节点。
<div class="ax-row ax-split">
<div class="ax-col ax-col-12">
<div class="ax-progress" axProgress='value:25,type:"circle",labelPlace:"#place"'></div>
</div>
<div class="ax-col ax-col-12">
<div id="place"></div>
</div>
</div>
操作方法
通过set方法可改变进度条当前的进度，支持两个参数
- value：进度值，应该在参数range范围内
- callback：回调函数，支持两个参数：
- value：修正后的当前进度值
- trueValue：改变实例状态的真实值，一个半圆的总长是125.6px，如果value是50，那么trueValue则为125.6*0.5px
通过get方法可获得实例当前和之前的数值，返回的是一个对象，对象属性如下：
- value：修正后的当前进度值
- trueValue：改变实例状态的真实值
- lastValue：改变值之前的进度值
- lastTrueValue：改变值之前的真实值
- complete：是否加载完成，返回true或false
按下f12打开控制台查看get方法获取的内容！
-
<div class="ax-progress" id="setIns"></div> <div align="center"> <a href="###" class="ax-btn" id="set0">进度为0</a> <a href="###" class="ax-btn" id="set60">进度为60</a> <a href="###" class="ax-btn" id="set100">进度为100</a> <a href="###" class="ax-btn" id="get">获取</a> </div> -
let setIns = new axProgress('#setIns',{ value:25, type:'circle', }), set0 = document.querySelector('#set0'), set60 = document.querySelector('#set60'), set100 = document.querySelector('#set100'), getBtn = document.querySelector('#get'); set0.onclick=function(){ setIns.set(0); } set60.onclick=function(){ setIns.set(60); } set100.onclick=function(){ setIns.set(100); } getBtn.onclick=function(){ console.log(setIns.get()); }
旋转进度
对于type=circle的进度条可以使用rotate=true以旋转的方式完成进度。
-
<div class="ax-progress" id="rotateIns"></div> <div align="center"> <a href="###" class="ax-btn" id="begin">点我前进</a> <a href="###" class="ax-btn" id="reset">重置</a> </div> -
let rotateIns = new axProgress('#rotateIns',{ value:25, type:'circle', rotate:true, }), begin = document.querySelector('#begin'), reset = document.querySelector('#reset'); begin.onclick=function(){ rotateIns.set(60); setTimeout(function(){ rotateIns.set(80); },2000); setTimeout(function(){ rotateIns.set(100); },4000); } reset.onclick=function(){ rotateIns.set(25); }
监听事件
本插件有若干监听方法，以on为关键字，实例后监听和在参数中监听效果相同。格式是：instance.on('event',function(){})；具体事件说明如下：
seted设置进度的时候执行，支持两个参数- value:当前进度值
- trueValue:当前真实值
started进度为0后执行，无参数completed加载完成后执行，无参数processing加载进行中执行，支持两个参数- value:进度值
- trueValue:真实值
演示实例显示结果使用了console.log方法，请按下F12按键打开开发者工具中的“控制台”查看监听效果。
-
<div class="ax-progress" id="onIns"></div> <div align="center"> <a href="###" class="ax-btn" id="ok">完成进度</a> <a href="###" class="ax-btn" id="back">重置</a> </div> -
let onIns = new axProgress('#onIns', { value: 25, type: 'circle', }), ok = document.querySelector('#ok'), back = document.querySelector('#back'); ok.onclick = function () { onIns.set(100); } back.onclick = function () { onIns.set(25); } onIns.on('seted', function (value, trueValue) { console.log('设置成功，进度值：' + value + '，真实值：' + trueValue) }).on('processing', function (value, trueValue) { console.log('进行中！，当前值：' + value + '，真实值：' + trueValue) }).on('started', function () { console.log('开始加载！') }).on('completed', function () { console.log('加载完成了！') });
参数选项
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new axProgress('#id',{
type: 'line', //进度条类型，可选线性line，大圆circle半圆、semicircle和仪表圆gapcircle
color: '',//进度条颜色风格，默认蓝色+浅灰，可选择primary、secondary、success、danger、info、ad或warning
gradient: false,//是否使用渐变色，默认false不使用，可选择true使用渐变色
linecap: 'round',//线条头尾是否是圆角，默认round，可选square
size: '',//进度条的整体大小（宽高），默认sm，可选择md和lg
range: [0, 100],//取值范围，value不应超出该范围
value: 0,//初始化后进度值，值在range范围
duration: '',//动画执行时间，数值类型，单位毫秒
rotate: false,//是否旋转，建议只对type=circle使用，默认false不旋转，可使用true旋转
trackShow: true,//是否显示轨道，默认true显示，可选择false不显示
labelFormat: '',//定义进度结果文本HTML格式
labelShow: true,//是否显示结果文本，默认为true显示，可选择false不显示
lablePlace: '',//结果文本所在位置，默认为空表示按插件定义的位置存放，可填#id或className自定义位置
labelText: {
unit: '%',
tips: '当前进度',
complete: '完成!',
},//定义进度结果文本内容
started: '',//是一个函数，无参数，监听开始
completed: '',//是一个函数，无参数，监听完成
processing: '',//是一个函数，两个参数：value和trueValue，监听进行中
});
});
以axMenu插件为例，如果在元素上通过ax*使用属性，需要使用类似json的写法，属性不需要使用引号，如果值是字符串需要使用引号包裹，如果值是数字、布尔值、null或undefined不需要引号；比如要设置active，那么在元素的ax*属性中应该这样书写：axMenu="active:2"