html - 钛移动多选

Question

我在任何地方都找不到实现简单多选弹出窗口的库或模块。我想要与触摸网页上的选项/选择对话框后出现的完全一样的东西。

有没有办法让网页的选项/选择在没有页面的情况下弹出。也许可以创建一个隐藏页面，并自动选择选项对话框，触发它弹出。

是否有可能做到这一点？它在 iOS 上会是什么样子？我只有安卓可以测试。

Answer 1

至少有两种方法可以实现这一点。不需要特殊模块：

• 首先，您可以使用Ti.UI.Picker，它对一小组选择很有用。这看起来像一个日期选择器，在 iOS 和 Android 上非常相似。您可以在文档中找到示例。更新：似乎不可能在钛中使用复选标记，尽管这在本机 iOS 上受支持。

• 或者，您可以在模态或弹出框（仅限 ios）窗口或单独的视图（更适合 android）中使用表格视图（列表）。这对于大量选择很有用，因为您可以提供搜索栏。选择将通过hasCheckmark: true在table view row上设置来触发。（为了更好的用户界面，在表格视图上使用 updateRow 方法并使用动画）

  这是第二个解决方案实施的一部分

  var self = Ti.UI.createWindow(...);
  
  var options = [/*array with all options*/ {title: 'Option 1', value: 1}, {title: 'Option 2', value: 2}];
  var selectedOptions = [0]; // array to store selected options, also pass preselected options
  
  var tableView = Ti.UI.createTableView({...});
  // add rows
  var i = 0, rows = [];
  options.forEach(function(option) {
    var row = Ti.UI.createTableViewRow({hasCheck: selectedOptions.indexOf(i)!==-1, title: option.title });
    rows.push(row);
  });
  tableView.setData(rows);
  
  tableView.addEventListener('click', function(e) {
    var state = e.rowData.hasCheck;
    // reuse existing row (using its configuration, not its instance)
    var row = Ti.UI.createTableViewRow(e.rowData);
    row.hasCheck = !e.rowData.hasCheck;
    // or create a really new one
    var row = Ti.UI.createTableViewRow({
      //config here,
      hasCheck: !e.rowData.hasCheck,
    );
    tableView.updateRow(e.index, row, {animated: true});
    if (state) {
      selectedOptions.push(e.index
    } else {
      selectedOptions.splice(selectedOptions.indexOf(e.index),1);
  });
  
  self.open({modal: true});
  

在这两种情况下都可以进行多项选择。您应该在这两种情况下都提供一个 DONE 按钮来完成工作。