UIPartCircleProgress

open close setProgress setTitles setProgressListener show hide addClickListenner

概述

UIPartCircleProgress是一个半圆形进度条，开发者可以自定义半圆形大小、位置、背景颜色，进度条颜色、进度条宽度，未完成进度条颜色、未完成进度条宽度，标题内容与距离圆心位置、标题颜色与动画和动画时长。

open

显示圆形进度条窗口

open(params)

params

progress:

类型：数字类型
描述：进度值，满进度值为100

animationTime:

类型：数字类型
描述：(可选项）进度条动画时长，不传或传0既是无动画
默认值：0

size:

类型：JSON对象
描述：(可选项）进度条圆心位置坐标及圆半径

{
      x: 100,    //（可选项）数字类型；圆心 x 坐标（相对于所属的 Window 或 Frame）；默认值：100
      y: 100,    //（可选项）数字类型；圆心 y 坐标（相对于所属的 Window 或 Frame）；默认值：100
      radius:10  // (可选项) 数字类型；圆形半径；默认：100
}

styles:

类型：JSON对象
描述：(可选项）插件样式配置

{
      circle:{                    //（可选项）JSON对象；进度环样式配置
          activeBg:'#F7AF60',     //(可选项) 圆形进度条背景颜色，支持支持rgb、rgba、#；默认 '#F7AF60'
          activeWidth:10,         //(可选项) 进度条宽度；默认：10
          normalBg:'#FFEDDA',     //(可选项) 未走过进度条颜色，支持支持rgb、rgba、#；默认 '#FFEDDA'
          normalWidth:5 ,          //(可选项) 未走过进度条宽度；默认:5
          endPointColor:'#F7B365',  //（可选项）字符串类型；进度条结束位置圆点颜色：默认：‘#F7B365’
          endPointRadius:          //（可选项）数字类型；进度条结束位置圆点半径；默认：10
      }
}

title:

类型：JSON对象
描述：插件标题内容与样式配置

{
     content:'标题',      //(可选项) 字符串类型；圆形进度条标题
     distance:30 ,       //(可选项) 数字类型；标题下边缘与距圆心距；默认：30
     color:'#999999',    //(可选项) 字符串类型；标题颜色，支持支持rgb、rgba、#；默认 '#999999'
     size:15            //(可选项) 数字类型；条标题字体大小；默认：15
}

subtitle:

类型：JSON对象
描述：子标题内容与样式配置

{
      content:'子标题',    //(可选项) 字符串类型；子标题
      distance:10 ,       //(可选项) 数字类型；子标题下边缘距圆心距；默认：10
      color:'#F7AF60',    //(可选项) 字符串类型；子标题颜色，支持rgb、rgba、#；默认 '#F7AF60'
      size:30            //(可选项) 数字类型；子标题字体大小；默认 30
}

fixedOn：

类型：字符串类型
描述：（可选项）插件视图添加到指定 frame 的名字（只指 frame，传 window 无效）
默认：插件依附于当前 window

fixed:

类型：布尔
描述：（可选项）插件是否随所属 window 或 frame 滚动
默认值：true（不随之滚动）

callback(ret)

ret:

类型：JSON对象
描述：点击的事件类型；
内部字段：

{
status:true,         //布尔类型；是否成功
id:0,                     //数字类型；打开的环形进度条插件的id
eventType:show     //字符串类型；交互事件类型；取值范围
                  //show
                  //show:打开成功回调事件
}

示例代码

var UIPartCircleProgress = api.require('UIPartCircleProgress');
var params = {
        progress:60,
        animationTime:1,
        size:{
            x:200,
            y:150,
            radius:100              //(可选项) 圆形半径；
        },
        styles:{
            
            bg:'#ffffff',           //(可选项) 圆形背景设置，可以设置颜色或背景图片，颜色支持rgb、rgba、#，图片支持fs,widget；
        circle:{
           activeBg:'#FFA500',     //(可选项) 圆形背景颜色，支持支持rgb、rgba、
            activeWidth:10,         //(可选项) 进度条宽度；
            normalBg:'#D3D3D3',     //(可选项) 未走过进度条颜色，支持支持rgb、rgba、
            normalWidth:5           //(可选项) 未走过进度条宽度；
        }
        },
        title: {
            content:'标题',        //(可选项) 字符串类型；圆形进度条标题
            distance:20 ,         //(可选项) 数字类型；标题下边缘与距圆心距；
            color:'#000000',      //(可选项) 字符串类型；标题颜色，支持支持rgb、rgba、#；
            size:12               //(可选项) 数字类型；条标题字体大小；
        },
        
        subtitle:{
            content:'子标题',    //(可选项) 字符串类型；子标题
            distance:20 ,       //(可选项) 数字类型；子标题上边缘距圆心距；
            color:'#000000',    //(可选项) 字符串类型；子标题颜色，支持rgb、rgba、#
            size:14             //(可选项) 数字类型；子标题字体大小；
            
        },
        fixedOn: api.frameName
};
UIPartCircleProgress.open(params, function(ret) {
    alert(ret.id);
});

可用性

iOS系统，android系统

可提供的1.0.0及更高版本

close

关闭圆形进度条窗口

close(params);

params

id:

类型：数字类型
描述：圆形进度条id

callback(ret)

ret:

类型：JSON对象
描述：点击的事件类型；
内部字段：

{
status:true,         //布尔类型；是否成功
}

示例代码

var UIPartCircleProgress = api.require('UIPartCircleProgress');
UIPartCircleProgress.close({
    id:0
});

可用性

iOS系统，android系统

可提供的1.0.0及更高版本

setProgress

设置进度条进度。

setProgress(params)

params

id:

类型：数字类型
描述：圆形进度条id

progress:

类型：数字类型
描述：进度值，满进度值为100。若不传则显示当前进度

示例代码

var UIPartCircleProgress = api.require('UIPartCircleProgress');
var params = {
       id:1,
       progress:90,
 }
UIPartCircleProgress.setProgress(params);

可用性

iOS系统，android系统

可提供的1.0.0及更高版本

setTitles

设置进度条中显示内容

setTitles(params)

params

id:

类型：数字类型
描述：圆形进度条id

title:

类型：JSON对象
描述：插件标题内容与样式配置

{
     content:'标题',      //字符串类型；圆形进度条标题
     distance:30 ,       //(可选项) 数字类型；标题下边缘与距圆心距；默认：30
     color:'#999999',    //(可选项) 字符串类型；标题颜色，支持支持rgb、rgba、#；默认 '#999999'
     size:15            //(可选项) 数字类型；条标题字体大小；默认：15
}

subtitle:

类型：JSON对象
描述：子标题内容与样式配置

{
      content:'子标题',    //(可选项) 字符串类型；子标题
      distance:10 ,       //(可选项) 数字类型；子标题下边缘距圆心距；默认：10
      color:'#F7AF60',    //(可选项) 字符串类型；子标题颜色，支持rgb、rgba、#；默认 '#F7AF60'
      size:30            //(可选项) 数字类型；子标题字体大小；默认 30
}

示例代码

var UIPartCircleProgress = api.require('UIPartCircleProgress');
var params = {
       id:1,
       title:{},
       subtitle:{},
 }
UIPartCircleProgress.setTitles(params);

可用性

iOS系统，android系统

可提供的1.0.0及更高版本

setProgressListener

设置进度条进度监听

setProgressListener(params)

params

id:

类型：数字类型
描述：圆形进度条id

callback(ret)

ret:

类型：JSON对象
描述：正常回调；
内部字段：

{
status:true,         //布尔类型；是否成功
id:0,                     //数字类型；打开的环形进度条插件的id
progress:,           //数字类型；变化后的进度
}

示例代码

var UIPartCircleProgress = api.require('UIPartCircleProgress');
var params = {
       id:1,
 }
UIPartCircleProgress.setProgressListener(params,function(ret, err){
});

可用性

iOS系统，android系统

可提供的1.0.0及更高版本

show

显示圆形进度条窗口

show(params);

params

id:

类型：数字类型
描述：圆形进度条id

示例代码

var UIPartCircleProgress = api.require('UIPartCircleProgress');
UIPartCircleProgress.show({
    id:0
});

可用性

iOS系统，android系统

可提供的1.0.0及更高版本

hide

隐藏圆形进度条窗口

hide(params);

params

id:

类型：数字类型
描述：圆形进度条id

示例代码

var UIPartCircleProgress = api.require('UIPartCircleProgress');
UIPartCircleProgress.hide({
    id:0
});

可用性

iOS系统，android系统

可提供的1.0.0及更高版本

)