效果图展示:
除了电影院在线选座,我们还会接触到飞机机舱选座,当然也有汽车票火车票选座的。假如有一天买火车票也提供在线选座,那么今天我来给大家介绍下如何使用jQuery选座插件完成高铁列车座位布置、选座、不同等级座位计价等操作。
HTML
和上一篇文章一样:jQuery在线选座订座(影院篇),我们使用相同的html结构,左侧显示位置布局图,右侧显示选座相关信息。
相关CSS代码请下载DEMO源码查看,本文不再详述。
01车
选座信息:
票数:
总计: ¥0
确定购买
jQuery
重点来关注jQuery代码,我们还是使用在线选座插件:jQuery Seat
Charts。首先安排高铁车厢座位布局,我假设在01号车厢内有一等座和二等座若干,中间通过出入口通道隔开,大致布局如下:map: [ //座位图
'ff__ff',
'ff__ff',
'______',
'eee_ee',
'eee_ee',