列車時刻表(12) – 乗車予定登録の見直し(コード)

前記事の列車時刻表画面のコードイメージ。

// JavaScript
function showTrain(train){

  // listviewの要素格納用
  var lvItem = '';
  // 駅名、駅到着/発車時刻、駅インデックス
  var _st_name, _st_time, _st_idx;
  // 駅アイコン(固定)
  var _imgItem = '<img src="/images/icon-jqm/tt_station.png" class="ui-li-icon"/>';
  // リンクアイコン:現在のステータス(乗車/下車)により切り替え
  var _iconOnOff = (gRideMode == 'mode_off')? 'signin' : 'signout';
  // リンク先:駅時刻表画面
  var _link = (gRideMode == 'mode_off')? '#pgTTStation' : '';//li要素ごと無効にしたので不要
  // 乗車駅の駅インデックス
  var st_on_idx = (train.tr_direction == 'Kudari')? 
    gCurStationIdx : train.tr_timesAr.length - gCurStationIdx - 1;

  setAButtonLabel($('#btnTTTrainInfo'), toTrainInfo(train) + '-' + gCurRail.diaInfo.ln_name );
  $('#lvTTTrain').empty();

  // 駅ごとに順次処理
  for (var i=0; i < train.tr_timesAr.length; i++ ){

    // 通過/運行なしの場合は表示しない
    if (!(train.tr_timesAr[i]=='P'||train.tr_timesAr[i]=='N'||train.tr_timesAr[i]=='X')){
      // 当駅の駅インデックス
      _st_idx = (train.tr_direction == 'Kudari')? i : train.tr_timesAr.length - i - 1;
      // 当駅の駅名
      _st_name = gCurRail.stations[_st_idx].st_name;
      // 当駅の到着時刻/発車時刻
      _st_time = train.tr_timesAr[i] + ' / ' + train.tr_timesDp[i];

      // 現在のステータス(乗車/下車)と乗車駅によってアイテムの有効/無効を変える
      if (gRideMode == 'mode_off' || st_on_idx < i) {
        // 乗車していない(下車)ケース、または当駅が乗車駅より後ろにあるケースは有効
        lvItem += '<li stationIdx="' + _st_idx + '">';
      } else {
        // 乗車中、かつ当駅が乗車駅より前にあるケースはアイテムを無効化
        lvItem += '<li class="ui-disabled" stationIdx="' + _st_idx + '">';
      }
      // 駅時刻表へのリンクと駅名、時刻、乗車/下車画面へのリンク
      lvItem += '<a href="' + _link + '" data-transition="slide">' + _imgItem + _st_name +
      '<span class="ui-li-aside">'  + _st_time + '</span></a>' +
      '<a href="#pgTTRide0" data-transition="slide" data-icon="' + _iconOnOff + '"></a>' +
      '</li>';
    }
  }
  // DOM構築
  $('#lvTTTrain').append(lvItem);
  $('#lvTTTrain').listview('refresh');
}

実行例:
つばさ121号を選択
mttview06_b05
大宮駅から乗車
mttview06_b06

カテゴリー: Development タグ: , , パーマリンク