UISelector

open close show

概述

UISelector 是自定义分级联动选择器模块,支持自定义选择器的大小、位置、内容及其级别(android暂仅最大支持3级)和数据源,可手动设置指定选中项,用于实现固定取值范围的内容选择器,多项内容之间有级联关系。本模块是 customSelector 模块的升级版,与 相似(数据源格式不同)

open

打开选择器

open({params}, callback(ret, err))

rect:

  • 类型:JSON 对象
  • 描述:(可选项)模块的位置及尺寸
  • 内部字段:

styles:

  • 类型:JSON 对象
  • 描述:(可选项)模块各部分的样式
  • 内部字段:
  1. bg: 'rgba(0,0,0,0)', //(可选项)字符串类型;模块背景,支持 rgb、rgba、#,图片路径(本地路径,fs://、widget://);默认:'rgba(0,0,0,0)'
  2. text:{ //(可选项)JSON对象;字体样式;默认值见内部字段
  3. size: 22, //(可选项)数字类型;字体大小;默认值:22
  4. selected: '#fff', //(可选项)字符串类型;选中字体色,支持 rgb、rgba、#;默认#fff
  5. normal: '#000' //(可选项)字符串类型;常态字体色;支持 rgb、rgba、#;默认#000
  6. },
  7. item:{ //(可选项)JSON对象;item 样式;默认值见内部字段
  8. w: 80, //(可选项)数字类型;背景视图的宽;默认值:单元格宽-20
  9. h: 45, //(可选项)数字类型;背景视图的高;默认值:单元格高-20
  10. normal: '#87ceeb', //(可选项)字符串类型;常态背景色,支持 rgb、rgba、#;默认值:#87ceeb
  11. selected: '#218868', //(可选项)字符串类型;选中后的背景色,支持 rgb、rgba、#;默认值:#218868
  12. zoomIn: 1.2 //(可选项)数字类型;选中后放大倍数,;默认值:1.2
  13. borderWidth: 1, //(可选项)数字类型;选中后边框宽,;默认值:0
  14. borderColor: '#00FFFF',//(可选项)字符串类型;选中后边框颜色,支持 rgb、rgba、#;默认值:#00FFFF
  15. }
  16. }

data:

  • 类型:数组对象/字符串
  • 描述:选择器的数据源,若为字符串,则表示 json 文件的路径(支持 widget://,fs:// 协议),文件格式同下文内部字段
  • 内部字段:
  1. [{
  2. title: //字符串类型;父级目录的标题
  3. contents: //数组类型;子级目录的内容组成的数组,内容可为字符串或 JSON 对象。若是字符串组成的数组,则表示该不包含子级目录;若本字段内容是 JSON 对象组成的数组,则表示该级包含子级目录,JSON 对象的内部字段依次递归嵌套;
  4. }]
  5. //举例如下:
  6. //一级选择器:['A','B','C','D','E','F','G','H','I','J','K']
  7. //二级选择器: [{
  8. 'title':'A',
  9. 'contents':['10','20','30','40','50','60','70','80','90','100']
  10. 'title':'B',
  11. 'contents':['1d','2d','3d','4d','5d','6d','7d','8d','9d','10d']
  12. },{
  13. 'title':'C',
  14. 'contents':['1q','2q','3q','4q','5q','6q','7q','8q','9q','10q']
  15. }]
  16. //三级选择器: [{
  17. 'title':'A',
  18. 'contents':[{
  19. 'title': 'a1',
  20. 'contents': ['10','20','30','40','50','60','70','80','90','100']
  21. },{
  22. 'title': 'b1',
  23. }]
  24. }]

rows:

  • 类型:数字
  • 描述:(可选项)滚动内容时可见的内容行数,只接受大于1的奇整数。
  • 默认值:5

indexs:

  • 类型:数组
  • 描述:(可选项)各列默认选中项 item 的下标(不可超过本列 item 总数)组成的数组
  • 默认值:[0,0…]//数组个数和级数对应
  • 类型:布尔
  • 描述:(可选项)列表滑动到头是否弹动
  • 默认值:true

fixedOn:

  • 类型:字符串类型
  • 描述:(可选项)模块视图添加到指定 frame 的名字(只指 frame,传 window 无效)
  • 默认:模块依附于当前 window

fixed:

  • 类型:布尔
  • 描述:(可选项)模块是否随所属 window 或 frame 滚动
  • 默认值:true(不随之滚动)

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:

示例代码

  1. var UISelector = api.require('UISelector');
  2. UISelector.open({
  3. rect: {
  4. x: 30,
  5. y: api.frameHeight / 2 - 170,
  6. w: api.frameWidth - 60,
  7. h: 340
  8. },
  9. styles: {
  10. bg: 'rgba(0,0,0,0)',
  11. text: {
  12. size: 14,
  13. selected: '#fff',
  14. normal: '#000'
  15. },
  16. item: {
  17. w: 80,
  18. h: 45,
  19. normal: '#87ceeb',
  20. selected: '#218868',
  21. zoomIn: 1.2
  22. }
  23. },
  24. rows: 5,
  25. bounce: false,
  26. fixedOn: api.frameName,
  27. fixed: false,
  28. data: [{
  29. title: 'A',
  30. contents: [{
  31. title: 'a',
  32. contents: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
  33. }]
  34. }, {
  35. title: 'B',
  36. contents: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
  37. }, {
  38. contents: ['1a', '2b', '3c', '4d', '5e', '6f', '7g', '8h', '9i', '10j']
  39. }, {
  40. title: 'D',
  41. contents: ['1t', '2t', '3t', '4t', '5t', '6t', '7t', '8t', '9t', '10t']
  42. }, {
  43. title: 'E',
  44. contents: ['1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a', '10a']
  45. }, {
  46. title: 'F',
  47. contents: ['1f', '2f', '3f', '4f', '5f', '6f', '7f', '8f', '9f', '10f']
  48. }, {
  49. title: 'G',
  50. contents: ['1!', '2!', '3!', '4!', '5!', '6!', '7!', '8!', '9!', '10!']
  51. }, {
  52. title: 'H',
  53. contents: ['1th', '2th', '3th', '4th', '5th', '6th', '7th', '8th', '9th', '10th']
  54. }, {
  55. title: 'I',
  56. contents: ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten']
  57. }, {
  58. title: 'J',
  59. contents: ['壹', '貮', '叁', '肆', '伍', '陆', '柒', '捌', '玖', '拾']
  60. }, {
  61. title: 'K',
  62. contents: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
  63. }]
  64. }, function(ret, err) {
  65. if (ret) {
  66. alert(JSON.stringify(ret));
  67. } else {
  68. alert(JSON.stringify(err));
  69. }
  70. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

set

设置选择器的选中项

set({params})

indexs:

  • 类型:数组
  • 描述:(可选项)各列默认选中项 item 的下标(不可超过本列 item 总数)组成的数组
  • 默认值:[0,0…]//数组个数和级数对应

示例代码

  1. var UISelector = api.require('UISelector');
  2. UISelector.set({
  3. indexs: [2, 3, 6]
  4. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

close()

示例代码

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏选择器

hide()

示例代码

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

补充说明

隐藏选择器,并没有从内存里清除

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示已隐藏的选择器

show()

  1. var UISelector = api.require('UISelector');

可用性

可提供的1.0.0及更高版本