UIPopupsPicker

来自于:AC模块工作室立即使用

概述

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'

}

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) {
        alert(JSON.stringify(ret));
    } else {
        alert(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及更高版本