sphereCloud
插件概述
一个3D球状标签插件。通过本插件的 open 接口，可以打开一个球体，插件所在区域为一个 view， 类似 open 了一个 frame，前端开发者可理解为打开了一个 frame 在指定窗口。开发者可自定义球体上的 item 标签，包括其大小、背景、头像大小和位置、标题（或name）大小和位置及其颜色。插件初始打开时默认在不停的自转（初始自转方向是随机的），当用户通过手势轻扫滑动球体，球体会跟随手势方向自转，点击球体上的标签，该标签会有放大的动画，放大动画结束后插件回调相应单击事件。可通过 hide、shou 接口隐藏、显示插件。注意 close 和 hide 的区别。本插件支持同一个页面打开多个插件，以 ID 区分。
插件接口
open
打开标签控件
open({params}, callback(ret))
params
rect：
- 类型：JSON 对象
- 描述：（可选项）插件的位置及尺寸
- 内部字段：
{
x: 0, //（可选项）数字类型；插件左上角的 x 坐标（相对于所属的 Window 或 Frame）；默认：0
y: 0, //（可选项）数字类型；插件左上角的 y 坐标（相对于所属的 Window 或 Frame）；默认：0
w: 300, //（可选项）数字类型；插件的宽度；默认：auto，屏幕宽度
h: 300 //（可选项）数字类型；插件的高度；默认：auto，屏幕高度
}
styles：
- 类型：JSON 对象
- 描述：（可选项）样式配置
- 内部字段：
{
bg: '', //（可选项）字符串类型；插件背景设置，支持rgb、rgba、#、img(本地路径fs://、widget://)；默认：'#00FFFFFF'
velocity: 1 //（可选性）数字类型；自转速度，为0表示不自转，取值范围：0-10；默认：1
}
data：
- 类型：JSON 数组
- 描述：显示的数据元素及样式组成的数组
- 内部字段：
[{
id:, //数字类型；item的id；默认：所在数组索引index
bg:'', //（可选项）数字类型；单条数据的背景配置，支持rgb、rgba、#、img(本地路径fs://、widget://)；默认：'#00FFFFFF'
w:95, //（可选项）数字类型；item的宽；默认： 95
h:35 , //（可选项）数字类型；item的高；默认： 35
avatar: { //（可选项）JSON对象；头像配置；不传则不显示
path:'', //字符串类型；头像图片路径，支持本地和网络路径；默认：不显示
placeholder:'', //（可选项）字符串类型；当path为网络图片时，本参数表示占位图路径，要求本地路径（widget、fs）；默认：无
marginL:, //（可选项）数字类型；头像距左边框距离；默认：0
marginT:, //（可选项）数字类型；头像距上边框距离；默认：0
w:35, //（可选项）数字类型；头像图片路大小的宽；默认：35
h:35 //（可选项）数字类型；头像图片路大小的高；默认：35
},
name: { //（可选项）JSON对象；名字配置，在item上左右剧中显示；不传则不显示
content:'', //（可选项）字符串类型；名字内容；默认：不显示
color:'', //（可选项）字符串类型；名字字体颜色，支持rgb、rgba、#；默认：#000000
size: 12 , //（可选项）数字类型；名字字体大小；默认：12；
marginL:, //（可选项）数字类型；名字距离左边框距离；默认：35
marginT: //（可选项）数字类型；名字距离上边框距离；默认：11
}
},...]
fixedOn：
- 类型：字符串类型
- 描述：（可选项）插件视图添加到指定 frame 的名字（只指 frame，传 window 无效）
- 默认：插件依附于当前 window
fixed：
- 类型：布尔
- 描述：（可选项）插件是否随所属 window 或 frame 滚动
- 默认值：true（不随之滚动）
callback(ret)
ret：
- 类型：JSON 对象
- 内部字段：
{
status:true, //布尔类型；是否打开成功，为false时错误信息详见err
id:'' //字符串类型；插件的 ID
}
err：
- 类型：JSON 对象
- 内部字段：
{
msg:'' //字符串类型；错误信息
}
示例代码
var datas = new Array();
for (var i=0;i<50;i++) {
var item = {
bg:'',
w:60,
h:60
avatar: {
path:'widget://res/left.jpeg',
w:35,
h:35
},
name: {
content:'',
color:'#000000',
size: 14
}
}
datas.push(item);
}
var obj = api.require('sphereCloud');
obj.open({
rect:{
x:0,
y:0,
w:api.frameWidth,
h:api.frameWidth
},
styles: {
bg: '',
velocity:1
},
data:datas,
fixedOn: api.frameName,
fixed: true
}, function(ret) {
if(ret.status) {
api.alert({msg:'打开了插件'+ret.id});
} else {
api.alert({msg:'插件打开失败'});
}
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
update
刷新整个数据源
update({params}, callback(ret))
params
id：
- 类型：字符串
- 描述：控件 ID，open 接口成功打开后返回
data：
- 类型：JSON 数组
- 描述：显示的数据元素及样式组成的数组
- 内部字段：
[{
id:, //数字类型；item的id；默认：所在数组索引index
bg:'', //（可选项）数字类型；单条数据的背景配置，支持rgb、rgba、#、img(本地路径fs://、widget://)；默认：'#00FFFFFF'
w:95, //（可选项）数字类型；item的宽；默认： 95
h:35 , //（可选项）数字类型；item的高；默认： 35
avatar: { //（可选项）JSON对象；头像配置；不传则不显示
path:'', //字符串类型；头像图片路径，支持本地和网络路径；默认：不显示
placeholder:'', //（可选项）字符串类型；当path为网络图片时，本参数表示占位图路径，要求本地路径（widget、fs）；默认：无
marginL:, //（可选项）数字类型；头像距左边框距离；默认：0
marginT:, //（可选项）数字类型；头像距上边框距离；默认：0
w:35, //（可选项）数字类型；头像图片路大小的宽；默认：35
h:35 //（可选项）数字类型；头像图片路大小的高；默认：35
},
name: { //（可选项）JSON对象；名字配置，在item上左右剧中显示；不传则不显示
content:'', //（可选项）字符串类型；名字内容；默认：不显示
color:'', //（可选项）字符串类型；名字字体颜色，支持rgb、rgba、#；默认：#000000
size: 12 , //（可选项）数字类型；名字字体大小；默认：12；
marginL:, //（可选项）数字类型；名字距离左边框距离；默认：35
marginT: //（可选项）数字类型；名字距离上边框距离；默认：11
}
},...]
示例代码
var datas = new Array();
for (var i=0;i<50;i++) {
var item = {
bg:'rgb(0,0,0,0)',
w:105,
h:35,
avatar: {
path:'http://n.sinaimg.cn/sinacn20120/460/w630h630/20190213/bda9-hswimzz0535274.jpg',
placeholder:'widget://res/chatBox_face1.png',
w:35,
h:35
},
interval: 5.0,
name: {
content:'第'+i+'老师',
color:'#000000',
size: 12,
marginT:10,
marginL:38
}
}
datas.push(item);
}
var obj = api.require('sphereCloud');
obj.update({
id:1,
data:datas
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
updateItem
刷新指定item
updateItem({params}, callback(ret))
params
id：
- 类型：字符串
- 描述：控件 ID，open 接口成功打开后返回
item：
- 类型：JSON 对象
- 描述：显示的数据元素及样式组成的数组
- 内部字段：
{
id:, //数字类型；item的id；
bg:'', //（可选项）数字类型；单条数据的背景配置，支持rgb、rgba、#、img(本地路径fs://、widget://)；默认：'#00FFFFFF'
avatar: { //（可选项）JSON对象；头像配置；不传则不显示
path:'', //字符串类型；头像图片路径，支持本地和网络路径；默认：不显示
placeholder:'', //（可选项）字符串类型；当path为网络图片时，本参数表示占位图路径，要求本地路径（widget、fs）；默认：无
marginL:, //（可选项）数字类型；头像距左边框距离；默认：0
marginT:, //（可选项）数字类型；头像距上边框距离；默认：0
w:35, //（可选项）数字类型；头像图片路大小的宽；默认：35
h:35 //（可选项）数字类型；头像图片路大小的高；默认：35
},
name: { //（可选项）JSON对象；名字配置，在item上左右剧中显示；不传则不显示
content:'', //（可选项）字符串类型；名字内容；默认：不显示
color:'', //（可选项）字符串类型；名字字体颜色，支持rgb、rgba、#；默认：#000000
size: 12 , //（可选项）数字类型；名字字体大小；默认：12；
marginL:, //（可选项）数字类型；名字距离左边框距离；默认：35
marginT: //（可选项）数字类型；名字距离上边框距离；默认：11
}
}
示例代码
var obj = api.require('sphereCloud');
obj.updateItem({
id:1,
item:{
bg:'#7FFF00',
w:80,
h:40,
id:10,
avatar: {
path:'https://b-ssl.duitang.com/uploads/item/201607/02/20160702122710_iRUXT.thumb.700_0.jpeg',
w:40,
h:40
},
interval: 5.0,
name: {
content:'你是谁',
color:'#228B22',
size: 16,
marginT:11,
marginL:43
}
}
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
addEventListener
监听插件相关事件
addEventListener({params}, callback(ret))
params
id：
- 类型：字符串
- 描述：控件 ID，open 接口成功打开后返回
target：
- 类型：字符串
- 描述：（可选项）监听的事件类型
- 默认：click
callback(ret)
ret：
- 类型：JSON 对象
- 内部字段：
{
status:, //布尔类型；是否正常返回，为false时错误信息见err
index:0, //数字类型；点击的 item 的索引（从 0 开始），同 open 接口内 data 顺序一致
id: //数字类型；控件ID
}
err：
- 类型：JSON 对象
- 内部字段：
{
msg:'' //字符串类型；错误信息
}
示例代码
var sphereCloud = api.require('sphereCloud');
sphereCloud.addEventListener({
id:'1',
target: 'click'
}, function(ret) {
api.alert({msg:'点击了' +ret.id+ '的第' + ret.index + '个 item'});
});
可用性
iOS 系统，Android 系统
可提供的 1.0.0 及更高版本
close
关闭插件
close({params}, callback(ret))
params
id：
- 类型：字符串
- 描述：控件 ID，open 接口成功打开后返回
callback(ret)
ret：
- 类型：JSON 对象
- 内部字段：
{
status:true, //布尔类型；是否成功
}
err:
- 类型：JSON对象
- 内部字段：
{
msg: '' //字符串类型；错误信息
}
示例代码
var sphereCloud = api.require('sphereCloud');
sphereCloud.close({
id: '123'
}, function(ret, err) {
if (ret) {
api.alert({msg: JSON.stringify(ret)});
} else {
api.alert({msg: JSON.stringify(err)});
}
});
可用性
iOS 系统，Android 系统
可提供的 1.0.0 及更高版本
hide
隐藏插件视图
hide({params}, callback(ret))
params
id：
- 类型：字符串
- 描述：控件 ID，open 接口成功打开后返回
callback(ret)
ret：
- 类型：JSON 对象
- 内部字段：
{
status:true, //布尔类型；是否成功
}
err:
- 类型：JSON对象
- 内部字段：
{
msg: '' //字符串类型；错误信息
}
示例代码
var sphereCloud = api.require('sphereCloud');
sphereCloud.hide({
id:'123'
}, function(ret, err) {
if (ret) {
api.alert({msg: JSON.stringify(ret)});
} else {
api.alert({msg: JSON.stringify(err)});
}
});
可用性
iOS 系统，Android 系统
可提供的 1.0.0 及更高版本
show
显示插件视图
show({params}, callback(ret))
params
id：
- 类型：字符串
- 描述：控件 ID，open 接口成功打开后返回
callback(ret)
ret：
- 类型：JSON 对象
- 内部字段：
{
status:true, //布尔类型；是否成功
}
err:
- 类型：JSON对象
- 内部字段：
{
msg: '' //字符串类型；错误信息
}
示例代码
var sphereCloud = api.require('sphereCloud');
sphereCloud.show({
id:'123'
}, function(ret, err) {
if (ret) {
api.alert({msg: JSON.stringify(ret)});
} else {
api.alert({msg: JSON.stringify(err)});
}
});
可用性
iOS 系统，Android 系统
可提供的 1.0.0 及更高版本