html - チタンモバイルマルチセレクト

Question

単純な複数選択ポップアップを実装するライブラリまたはモジュールがどこにも見つかりません。Webページのオプション/選択ダイアログをタッチした後に表示されるものとまったく同じものが必要です。

Webページのオプション/選択を取得してページなしでポップアップする方法はありますか？おそらく、非表示のページが作成され、オプションダイアログが自動的に選択されて、ポップアップが表示される可能性があります。

これを行うことは可能ですか？iOSではどのように見えますか？テストするAndroidしかありません。

Answer 1

これを実装する方法は少なくとも 2 つあります。特別なモジュールは必要ありません:

• まず、少数の選択肢に役立つTi.UI.Pickerを使用できます。これは、iOS と Android でかなり似ている日付ピッカーのように見えます。ドキュメントで例を見つけることができます。更新: ネイティブ iOS ではサポートされていますが、チタンでチェックマークを使用することはできないようです。

• または、モーダルまたはポップオーバー (ios のみ) ウィンドウ内でテーブル ビュー(リスト)を使用するか、別のビュー (Android に適しています) を使用できます。検索バーを提供できるため、選択肢が多い場合に便利です。hasCheckmark: true選択は、テーブル ビューの行に設定することによってトリガーされます。(UI を向上させるには、テーブル ビューで updateRow メソッドを使用し、アニメーションを使用します)

  これは、2 番目のソリューションの実装の一部です。

  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 ボタンを提供する必要があります。