apicloud apicloud

注册
查看: 2161|回复: 9

[模块教程] UIMultiSelector模块(选择题)效果展示

实习司机

UID:253705

主题:
53
帖子:
175
云币:
545

[模块教程] UIMultiSelector模块(选择题)效果展示

2161 9 | 发表于 2018-10-19 15:54:25 |阅读模式 | |
UIMultiSelector 封装了一个支持多选的选择器,开发者可自定义该选择器的样式及其数据源。当您的 APP 需要为用户同时提供多种可选项的支持时可以选择该控件快速配置使用节省开发时间。该模块是 multiSelector 模块的优化版本


模块文档链接:
https://docs.apicloud.com/Client-API/UI-Layout/UIMultiSelector

  1. <!DOCTYPE html>
  2. <html>

  3. <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  6.         <title>title</title>
  7.         <link rel="stylesheet" type="text/css" href="../css/api.css" />
  8.         <style>
  9.                 body {
  10.                         padding: 60px
  11.                 }
  12.         </style>
  13. </head>

  14. <body>

  15.         <button tapmode onclick="UIMultiSelector_open()">
  16.                         UIMultiSelector_open
  17.                 </button>e
  18.         <button tapmode onclick="show()">
  19.                         show
  20.                 </button>
  21. </body>
  22. <script type="text/javascript" src="../script/api.js"></script>
  23. <script type="text/javascript">
  24.         function UIMultiSelector_open() {
  25.                 var UIMultiSelector = api.require('UIMultiSelector');
  26.                 UIMultiSelector.open({
  27.                         rect: {
  28.                                 h: 244
  29.                         },
  30.                         text: {
  31.                                 title: '选择宝宝年龄',
  32.                                 leftBtn: '取消',
  33.                                 rightBtn: '确定',
  34.                                 selectAll: '全选'
  35.                         },
  36.                         max: 1,
  37.                         singleSelection: true,
  38.                         maskClose: false,
  39.                         styles: {
  40.                                 //mask: 'rgba(100,100,100,0.4)',
  41.                                 title: {
  42.                                         bg: '#f5f5f5',
  43.                                         color: 'rgb(0,0,0)',
  44.                                         size: 16,
  45.                                         h: 44
  46.                                 },
  47.                                 leftButton: {
  48.                                         w: 80,
  49.                                         h: 35,
  50.                                         marginT: 5,
  51.                                         marginL: 8,
  52.                                         color: 'rgb(0,0,0)',
  53.                                         bg: 'rgb(200,200,200)',
  54.                                         size: 14,
  55.                                 },
  56.                                 rightButton: {
  57.                                         w: 80,
  58.                                         h: 35,
  59.                                         marginT: 5,
  60.                                         marginR: 8,
  61.                                         color: 'rgb(0,0,0)',
  62.                                         bg: '#ffd40d',
  63.                                         size: 14,
  64.                                 },
  65.                                 item: {
  66.                                         h: 35,
  67.                                         bg: '#fff',
  68.                                         bgActive: '#ffd40d',
  69.                                         bgHighlight: '#ffd40d',
  70.                                         color: 'rgb(0,0,0)',
  71.                                         active: 'rgb(255,255,255)',
  72.                                         highlight: 'rgb(255,255,255)',
  73.                                         size: 14,
  74.                                         lineColor: 'rgb(200,200,200)',
  75.                                         textAlign: 'center',
  76.                                 },
  77.                                 // icon: {
  78.                                 //         w: 0
  79.                                 // }
  80.                         },
  81.                         animation: true,
  82.                         items: [{
  83.                                 status: 'normal',
  84.                                 text: "6个月-7个月"
  85.                         }, {
  86.                                 status: 'normal',
  87.                                 text: "8个月-9个月"
  88.                         }, {
  89.                                 status: 'normal',
  90.                                 text: "10个月-12个月"
  91.                         }, {
  92.                                 status: 'normal',
  93.                                 text: "1岁-2岁"
  94.                         }, {
  95.                                 status: 'normal',
  96.                                 text: "2岁-3岁"
  97.                         }, {
  98.                                 status: 'normal',
  99.                                 text: "3岁以上"
  100.                         }]
  101.                 }, function(ret, err) {
  102.                         console.log(JSON.stringify(ret));
  103.                         if (ret.eventType == 'clickLeft' || ret.eventType == 'clickRight') {
  104.                                 UIMultiSelector.hide();
  105.                         }
  106.                         if (ret.eventType == 'clickItem') {
  107.                                 value = ret.items[0];
  108.                         }
  109.                 });
  110.         };

  111.         function show() {
  112.                 var UIMultiSelector = api.require('UIMultiSelector');
  113.                 UIMultiSelector.show();
  114.         }

  115.       
  116. </script>

  117. </html>
复制代码



本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

驾校小白

UID:629974

主题:
6
帖子:
14
云币:
25
发表于 2019-1-27 19:16:08 |
两次调用这个模块,数据不同,但结果出来的内容是一样的。调用了close()方法,但data好像还是在内存里,怎么清理内存呢?

版主

UID:453379

主题:
18
帖子:
6847
云币:
503

圣诞节捣蛋鬼APICloud五岁啦

发表于 2018-10-19 17:05:36 |
感谢分享

驾校小白

UID:735109

主题:
2
帖子:
10
云币:
14
发表于 2018-12-14 09:52:20 |
如何给左右两边加边距呢?

老司机

UID:673413

主题:
175
帖子:
12674
云币:
5646

圣诞节

发表于 2018-12-14 10:13:22 |
不能吧

驾校小白

UID:735109

主题:
2
帖子:
10
云币:
14
发表于 2018-12-21 11:21:32 |
icon 参数 在 ios 不写的话,会一直占着位置, 就算写 icon  宽度写 0 也会占一点位置,导致文字不能居中。

实习司机

UID:253705

主题:
53
帖子:
175
云币:
545
 楼主| 发表于 2018-12-26 19:18:32 |
吴大师 发表于 2018-12-21 11:21
icon 参数 在 ios 不写的话,会一直占着位置, 就算写 icon  宽度写 0 也会占一点位置,导致文字不能居中。 ...

是最新模块版本吗

驾校小白

UID:9548

主题:
5
帖子:
26
云币:
32
发表于 2019-1-16 20:49:00 |
是否支持三级联动?

主题:
1
帖子:
30
云币:
84
发表于 2019-5-7 09:20:54 |
选中一个item 想要取消必须要重新点击选中的那个,能否支持选中其他的item 自动取消之前选中的呢?

主题:
0
帖子:
1
云币:
1
发表于 2019-5-15 22:22:23 |
我怎么通过ajax请求给items赋值,求大佬给个实例,在哪里写ajax请求,然后怎么把请求结果给items
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表