UIPopupsPicker
论坛示例
为帮助用户更好更快的使用插件，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。
概述
UIPopupsPicker是一个三级联动选择器，以气泡的形式弹出，供用户选择，界面动画效果炫酷。开发者可自定义其位置大小，及其数据源。适用于各种需要选择器的app。
open
打开选择器
open({params}, callback(ret))
params
rect：
- 类型：JSON 类型
- 描述：（可选项）插件的位置及尺寸(底部滑杆)
- 内部字段：
{
x: 30, //（可选项）数字类型；插件左上角的 x 坐标（相对于所属的 Window 或 Frame）；默认值：30
y: 100, //（可选项）数字类型；插件左上角的 y 坐标（相对于所属的 Window 或 Frame）；默认值：0
w: api.frameWidth - 60, //（可选项）数字类型；插件宽度（相对于所属的 Window 或 Frame;默认api.frameWidth - 60
h: 245 //(可选项)数字类型;插件高度（相对于所属的 Window 或 Frame;默认245
}
resource：
- 类型：字符串
- 描述：城市列表的数据源文件路径（支持widget、fs 路径协议），数据源文件必须为
.json文件。城市的JSON数据会在callback时按原格式返回。若为 json 文件则必须是标准的 json格式，否则会报错。 .json文件内部字段：
{
"list":{
"first": [
{
"name": "山东省",
"id": "1",
"second": [{
"name": "济南市",
"id": "1",
"third": [
{
"name": "历下区",
"id": "1"
},
{
"name": "章丘市",
"id": "10"
},
{
"name": "高新区",
"id": "145"
},
{
"name": "市中区",
"id": "2"
},
{
"name": "槐荫区",
"id": "3"
},
{
"name": "天桥区",
"id": "4"
},
{
"name": "历城区",
"id": "5"
},
{
"name": "长清区",
"id": "6"
},
{
"name": "平阴县",
"id": "7"
},
{
"name": "济阳县",
"id": "8"
},
{
"name": "商河县",
"id": "9"
}
]
}]
},
{
"name":"黑龙江省",
"id":"11",
"second": [{
"name": "哈尔滨市",
"id": "145",
"third": [
{
"name": "道里区",
"id": "464"
},
{
"name": "道外区",
"id": "465"
},
{
"name": "南岗区",
"id": "466"
},
{
"name": "平房区",
"id": "467"
},
{
"name": "香坊区",
"id": "468"
},
{
"name": "松北区",
"id": "469"
},
{
"name": "动力区",
"id": "470"
},
{
"name": "开发区",
"id": "471"
},
{
"name": "依兰县",
"id": "472"
},
{
"name": "呼兰区",
"id": "473"
},
{
"name": "方正县",
"id": "474"
},
{
"name": "宾县",
"id": "475"
},
{
"name": "延寿县",
"id": "476"
},
{
"name": "巴彦县",
"id": "477"
},
{
"name": "阿城区",
"id": "478"
},
{
"name": "木兰县",
"id": "479"
},
{
"name": "双城市",
"id": "480"
},
{
"name": "通河县",
"id": "481"
},
{
"name": "尚志市",
"id": "482"
},
{
"name": "五常市",
"id": "483"
}
]}
]}
]}
}
styles：
- 类型：JSON 类型
- 描述：（可选项）插件各部分的样式
- 内部字段：
{
maskBg:'rgba(0,0,0,0.5)', //（可选项）遮罩颜色；支持 rgb，rgba，#；默认：#fff
bg:'#fff', //（可选项）插件背景颜色；支持 rgb，rgba，#；默认：#fff
button: { //（可选项）JSON对象；取消或完成按钮样式
size: 12 //（可选项）数字类型；按钮字体的大小；默认：12
titleColor:'#000000' // (可选项)字符串类型；按钮字体颜色；支持 rgb，rgba，# 默认：'#000000'
},
color:'#fff' //(可选项)字符串类型；按钮的导航条的背景颜色；支持 rgb，rgba，#；默认：'#fff'
fontColor: '#000000', //(可选项)字符串类型；未选中字体颜色；支持 rgb，rgba，#；默认：'#fff'
selectedColor:'#8B0000', //(可选项)字符串类型；选中字体颜色；支持 rgb，rgba，#；默认：'#fff'
textFont: 15, //(可选项)数字类型;未选中的字体大小; 默认:15 只支持iOS
selectedTextFont: 15, //(可选项)数字类型;选中的字体大小; 默认:15
}
fixedOn：
- 类型：字符串类型
- 描述：（可选项）插件视图添加到指定 frame 的名字（只指 frame，传 window 无效）
- 默认：插件依附于当前 window
fixed：
- 类型：布尔
- 描述：（可选项）是否将插件视图固定到窗口上（不跟随窗口上下滚动）
- 默认：true
callback(ret)
ret：
类型：JSON 对象
内部字段：
{
province: //选中的第一级(省)
city: //选中的第二级(市)
county: //选中的第三级(县)
}
示例代码
var UIPopupsPicker = api.require('UIPopupsPicker');
UIPopupsPicker.open({
rect:{
x: 30,
y: 100,
w: api.frameWidth - 60,
h: 245
},
styles:{
maskBg:'rgba(0,0,0,0.5)',
bg:'#fff',
button: {
size: 12,
titleColor:'#00000'
},
color:'#5B5B5B',
resource:'widget://res/city.json',
fontColor: '#000000',
selectedColor:'#8B0000',
},
fixedOn: api.frameName,
fixed:true,
}, function(ret, err) {
if (ret) {
api.alert({
msg: JSON.stringify(ret)
})
} else {
api.alert({
msg: JSON.stringify(err)
})
}
});
可用性
iOS系统，安卓系统
可提供的1.0.0及更高版本
hide
隐藏选择器
hide()
示例代码
var UIPopupsPicker = api.require('UIPopupsPicker');
UIPopupsPicker.hide();
可用性
iOS系统，安卓系统
可提供的1.0.0及更高版本
show
显示选择器
show()
示例代码
var UIPopupsPicker = api.require('UIPopupsPicker');
UIPopupsPicker.show();
可用性
iOS系统，安卓系统
可提供的1.0.0及更高版本
close
关闭选择器
close()
示例代码
var UIPopupsPicker = api.require('UIPopupsPicker');
UIPopupsPicker.close();
可用性
iOS系统，安卓系统
可提供的1.0.0及更高版本
论坛示例
为帮助用户更好更快的使用插件，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。