前記事の列車時刻表画面のコードイメージ。
// 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号を選択
大宮駅から乗車
