UIMultiSelector

来自于：APICloud 官方立即使用

open show hide close

论坛示例

为帮助用户更好更快的使用模块，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。

模块概述

UIMultiSelector 封装了一个支持多选的选择器，开发者可自定义该选择器的样式及其数据源。当您的 APP 需要为用户同时提供多种可选项的支持时可以选择该控件快速配置使用节省开发时间。该模块是 multiSelector 模块的优化版本

UIMultiSelector - 图1

实例widget下载地址

本模块源码已开源，开源地址为: https://github.com/apicloudcom/UIMultiSelector

open

打开选择器

open({params}, callback(ret))

params

rect：

  • 类型：JSON 对象
  • 描述：（可选项）模块的位置及尺寸
  • 内部字段：
  1. {
  2.     h: 244                             //（可选项）数字类型；模块的高度；默认：244
  3. }

text：

  • 类型：JSON 对象类型
  • 描述：（可选项）模块相应文字设置
  • 内部字段：
  1. {
  2.     title: '标题',                     //（可选项）字符串类型；模块左上按钮和右上按钮中间显示的标题文字，若不传则不显示
  3.     leftBtn: '取消',                   //（可选项）字符串类型；模块左上按钮的显示文字；默认：取消
  4.     rightBtn: '完成',                  //（可选项）字符串类型；模块右上按钮的显示文字；默认：完成
  5.     selectAll: '全选'                  //（可选项）字符串类型；模块的全选项文字，若max值大于0，则本参数被忽略；默认：全选
  6. }

max：

  • 类型：数字类型
  • 描述：（可选项）最多允许同时选中的项数；当值为 0 时可选中所有项，若本字段值大于0则全选项不显示；当值为其它时，选择超过 max 的选项，选项选择无效且回调 ret-> eventType 返回 “overflow”
  • 默认：0

singleSelection:

  • 类型：布尔类型
  • 描述：（可选项）是否为单选框；参数值为 true 时，忽略参数 max，模块呈 “单选项” 模式状态，即选择第二项将自动取消前一项的已选中状态
  • 默认：false

styles：

  • 类型：JSON 类型
  • 描述：（可选项）模块的样式设置
  • 内部字段：
  1. {
  2.     bg: '#fff',                        //（可选项）字符串类型；主体的背景，支持 rgb，rgba，#；默认：#fff
  3.     mask: 'rgba(0,0,0,0.3)',           //（可选项）字符串类型；遮罩层的背景，支持 rgb、rgba、#、img；默认：rgba(0,0,0,0)
  4.     title: {                           //（可选项）JSON 类型；标题栏样式；默认：见内部字段
  5.         bg: '#ddd',                    //（可选项）字符串类型；标题栏的背景，支持 rgb、rgba、#、img；默认：#ddd
  6.         color:'#444',                  //（可选项）字符串类型；标题字体颜色，支持 rgb、gba、#；默认：#444
  7.         size: 16,                      //（可选项）数字类型；标题字体大小；默认：16
  8.         h: 44                          //（可选项）数字类型；标题栏的高度；默认：44
  9.     },
  10.     leftButton: {                      //（可选项）JSON 类型；左上角按钮样式；默认：见内部字段
  11.         bg: '#f00',                    //（可选项）字符串类型；按钮的背景，支持 rgb、rgba、#、img；默认：#f00
  12.         w: 80,                         //（可选项）数字类型；按钮的宽度；默认：80
  13.         h: 35,                         //（可选项）数字类型；按钮的高度；默认：35
  14.         marginT: 5,                    //（可选项）数字类型；按钮的上边距；默认：5
  15.         marginL: 8,                    //（可选项）数字类型；按钮的左边距；默认：8
  16.         color: '#fff',                 //（可选项）字符串类型；按钮的文字颜色，支持 rgb、rgba、#；默认：#fff
  17.         size: 14 ,                      //（可选项）数字类型；按钮的文字大小；默认：14
  18.         cornerRadius:5                 //（可选项）数字类型；按钮的圆角大小；默认：5 
  19.     },
  20.     rightButton: {                     //（可选项）JSON 类型；右上角按钮样式；默认：见内部字段
  21.         bg: '#0f0',                    //（可选项）字符串类型；按钮的背景，支持 rgb、rgba、#、img；默认：#0f0
  22.         w: 80,                         //（可选项）数字类型；按钮的宽度；默认：80
  23.         h: 35,                         //（可选项）数字类型；按钮的高度；默认：35
  24.         marginT: 5,                    //（可选项）数字类型；按钮的上边距；默认：5
  25.         marginR: 8,                    //（可选项）数字类型；按钮的右边距；默认：8
  26.         color: '#fff',                 //（可选项）字符串类型；按钮的文字颜色，支持 rgb、rgba、#；默认：#fff
  27.         size: 14 ,                      //（可选项）数字类型；按钮的文字大小；默认：14
  28.         cornerRadius:6                  //（可选项）数字类型；按钮的圆角大小；默认：5
  30.     },
  31.     item: {                            //（可选项）JSON 类型；每个选项的样式；默认：见内部字段
  32.         distance:0,                       //（可选项）数字类型；标题栏和选项之间的距离；默认：0(仅Android支持)
  33.         h: 44,                         //（可选项）数字类型；按钮的高度；默认：35
  34.         bg: '#fff',                    //（可选项）字符串类型；选项的背景，支持 rgb、rgba、#、img；默认：#fff
  35.         bgActive: '#fff',              //（可选项）字符串类型；已选中选项的背景，支持 rgb、rgba、#、img；默认：bg
  36.         bgHighlight: '#fff',           //（可选项）字符串类型；选项的高亮背景，支持 rgb、rgba、#、img；默认：bg
  37.         color: '#444',                 //（可选项）字符串类型；选项的文字颜色，支持 rgb，rgba，#；默认：#444
  38.         active: '#444',                //（可选项）字符串类型；已选中选项的文字颜色，支持 rgb、rgba、#；默认：#444
  39.         disable:'#444',                   //（可选项）字符串类型；不可选中选项的文字颜色，支持 rgb、rgba、#；默认：#444(仅Android支持)
  40.         highlight: '#444',             //（可选项）字符串类型；选项的高亮文字颜色，支持 rgb、rgba、#；默认：color
  41.         size: 14,                      //（可选项）数字类型；选项的文字大小；默认：14
  42.         activeSize: 14,                //（可选项）数字类型；已选中选项的文字大小；默认：14(仅Android支持)
  43.         disableSize:14,                   //（可选项）数字类型；不可选中选项的文字大小；默认：14(仅Android支持)
  44.         lineColor: '#ccc',             //（可选项）字符串类型；分隔线的颜色，支持 rgb、rgba、#；默认：rgba(0,0,0,0)
  45.         textAlign: 'left'              //（可选项）字符串类型；选项文字的对齐方式，'left|center|right'，当值为 left 或 right 时文字会根据情况空留 icon 已占的位置；默认：left
  46.     },
  47.     icon: {                            //（可选项）JSON 类型；每个选项的状态图标样式，若不传则不显示选中的状态图标
  48.         w: 20,                         //（可选项）数字类型；图标的高度；默认：20
  49.         h: 20,                         //（可选项）数字类型；图标的高度；默认：w
  50.         marginT: 11,                   //（可选项）数字类型；图标的上边距；默认：(item.h - h) / 2
  51.         marginH: 8,                    //（可选项）数字类型；图标的横向边距，与 align 的对齐方向相关；默认：8
  52.         bg: '#fff',                    //（可选项）字符串类型；图标未选中时的背景，支持 rgb、rgba、#、img；默认：rgba(0,0,0,0)
  53.         bgActive: '#fff',              //（可选项）字符串类型；已选中图标的背景，支持 rgb、rgba、#、img；默认：bg
  54.         bgHighlight: '#fff',           //（可选项）字符串类型；选项的高亮背景，支持 rgb、rgba、#、img；默认：bg
  55.         align: 'left'                  //（可选项）字符串类型；图标相对与选项的对齐方式：'left|right'；默认：left
  56.     }
  57. }

animation：

  • 类型：布尔
  • 描述：（可选项）打开关闭时是否显示滑入滑出动画
  • 默认：true

maskClose：

  • 类型：布尔
  • 描述：（可选项）用户点击遮罩层（选择器以外的区域）时，是否关闭选择器
  • 默认：true

items：

  • 类型：JSON 数组类型
  • 描述：选择器的数据
  • 内部字段：
  1. [{
  2.     text: '选项0',               //字符串类型；选项的文字内容
  3.     status: 'normal',            //字符串类型；选项状态，取值范围如下；默认：normal
  4.                                  //normal：未选中
  5.                                  //selected：已选中
  6.                                  //disable：不可选中
  7.                                  //forever：不可取消
  8. }]

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     eventType:                         //字符串类型；事件交互类型，取值范围如下：
  3.                                        // show：显示完成
  4.                                        // clickRight： 点击右上按钮  
  5.                                        // clickLeft：点击左上按钮
  6.                                        // overflow：用户选择项大于 open 时设置的 max 值
  7.                                        // clickItem：用户点击了列表选项事件
  8.                                        // clickMask：用户点击了选择器区域以外的遮罩层事件
  9.     items:                             //数组类型；返回当前用户所选择的数据项数据，内容格式同传入的 items （支持自定义字段），当 eventType 为 overflow 时本参数无效
  10. }

示例代码

  1.  var UIMultiSelector = api.require('UIMultiSelector');
  2.  UIMultiSelector.open({
  3.      rect: {
  4.          h: 244
  5.      },
  6.      text: {
  7.          title: 'UIMultiSelector',
  8.          leftBtn: 'Cancel',
  9.          rightBtn: 'Finish',
  10.          selectAll: 'ALL'
  11.      },
  12.      max: 0,
  13.      singleSelection: true,
  14.      styles: {
  15.          mask: 'rgba(0,0,0,0)',
  16.          title: {
  17.              bg: 'rgb(0,64,128)',
  18.              color: 'rgb(184,209,5)',
  19.              size: 16,
  20.              h: 44
  21.          },
  22.          leftButton: {
  23.              w: 80,
  24.              h: 35,
  25.              marginT: 5,
  26.              marginL: 8,
  27.              color: 'rgb(0,0,0)',
  28.              size: 14
  29.          },
  30.          rightButton: {
  31.              w: 80,
  32.              h: 35,
  33.              marginT: 5,
  34.              marginR: 8,
  35.              color: 'rgb(0,0,0)',
  36.              size: 14
  37.          },
  38.          item: {
  39.              h: 35,
  40.              bg: 'rgb(121,82,173)',
  41.              bgActive: 'rgb(43,213,166)',
  42.              bgHighlight: 'rgb(238,17,150)',
  43.              color: 'rgb(22,112,233)',
  44.              active: 'rgb(201,118,126)',
  45.              highlight: 'rgb(255,255,0)',
  46.              size: 14,
  47.              lineColor: 'rgb(78,57,255)',
  48.              textAlign: 'center'
  49.          },
  50.          icon: {
  51.              w: 20,
  52.              h: 20,
  53.              marginT: 11,
  54.              marginH: 8,
  55.              bg: '#fff',
  56.              align: 'left'
  57.          }
  58.      },
  59.      animation: true,
  60.      items: [{
  61.          text: 'Monday',
  62.          status: 'normal'
  63.      }, {
  64.          text: 'Tuesday',
  65.          status: 'normal'
  66.      }, {
  67.          text: 'Wednesday',
  68.          status: 'normal'
  69.      }, {
  70.          text: 'Thursday',
  71.          status: 'normal'
  72.      }, {
  73.          text: 'Friday',
  74.          status: 'normal'
  75.      }, {
  76.          text: 'Saturday',
  77.          status: 'normal'
  78.      }, {
  79.          text: 'Sunday',
  80.          status: 'normal'
  81.      }, {
  82.          text: 'from Monday to Sunday',
  83.          status: 'normal'
  84.      }]
  85.  }, function(ret, err) {
  86.      if (ret) {
  87.          alert(JSON.stringify(ret));
  88.      } else {
  89.          alert(JSON.stringify(err));
  90.      }
  91.  });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭选择器（从内存清除）

close()

示例代码

  1. var multiSelector = api.require('UIMultiSelector');
  2. UIMultiSelector.close();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示已隐藏的选择器

show()

示例代码

  1. var UIMultiSelector = api.require('UIMultiSelector');
  2. UIMultiSelector.show();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏选择器（并未从内存清除）

hide()

示例代码

  1. var UIMultiSelector = api.require('UIMultiSelector');
  2. UIMultiSelector.hide();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

论坛示例

为帮助用户更好更快的使用模块，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。