列車時刻表(10) – 乗車予定リストをアコーディオン表示する

列車時刻表の作成を継続する。これまで、保存した乗車予定は listview を使って一覧を表示してきたが、項目が多くなりそうなので、accordion で表示するように変更する。

各折り畳みブロックのヘッダ(‘h3′)部分に「区間・時刻」「路線名」を、ボディ部分(‘p’)に「列車詳細」「変更ボタン」を表示する。ボタンなどのコンテンツを動的に追加した場合は、

$(selectore).trigger('create');

として表示を更新する。以下のコードでは、各ブロックに共通のクラス名(clsColRideList)をセットしておき、最後にまとめて create している。

// JavaScript
for (var i=0; i < rides.length; i++ ){
  // 各ブロックの組み立て
  // 区間・時刻 
  _section = rides[i].on_stname + ' (' + rides[i].on_time + ') - ' 
    + rides[i].off_stname + ' (' + rides[i].off_time + ')';
  // 路線名
  _lnname = rides[i].ln_name_s;

  colItem += '<div data-role="collapsible" class="clsColRideList">'
  + '<h3>' + _section + '<span class="ui-li-aside">' + _lnname + '</span></h3>'
  + '<p>' + _trinfo
  + '<button data-role="button" data-icon="check">列車変更</button>'
  + '<button data-role="button" data-icon="check">乗車駅変更</button>'
  + '<button data-role="button" data-icon="check">下車駅変更</button>'
  + '<button data-role="button" data-icon="delete">削除</button>' 
  + '</p></div>';
}
$('#colTTRideList').append(colItem);
$('#colTTRideList').collapsibleset('refresh');
$('.clsColRideList').trigger('create');

実行例

• 初期状態
  
• 3番目の項目を開いたところ
  
• 1番目の項目を開いたところ