基于jQuery实现在线选座之高铁版


Posted in Javascript onAugust 24, 2015

效果图展示:

基于jQuery实现在线选座之高铁版

查看演示  源码下载

除了电影院在线选座,我们还会接触到飞机机舱选座,当然也有汽车票火车票选座的。假如有一天买火车票也提供在线选座,那么今天我来给大家介绍下如何使用jQuery选座插件完成高铁列车座位布置、选座、不同等级座位计价等操作。

HTML

和上一篇文章一样:jQuery在线选座订座(影院篇),我们使用相同的html结构,左侧显示位置布局图,右侧显示选座相关信息。

相关CSS代码请下载DEMO源码查看,本文不再详述。

<div class="container"> 
 <div id="seat-map"> 
 <div class="front">01车</div> 
 </div> 
 <div class="booking-details"> 
 <h3> 选座信息:</h3> 
 <ul id="selected-seats"></ul> 
 <p>票数: <span id="counter"></span></p> 
 <p>总计: ¥<span id="total">0</span></p> 
  
 <button class="checkout-button">确定购买</button> 
 <div id="legend"></div> 
 </div> 
</div>

jQuery

重点来关注jQuery代码,我们还是使用在线选座插件:jQuery Seat Charts。首先安排高铁车厢座位布局,我假设在01号车厢内有一等座和二等座若干,中间通过出入口通道隔开,大致布局如下:

map: [ //座位图 
 'ff__ff', 
 'ff__ff', 
 '______', 
 'eee_ee', 
 'eee_ee', 
 'eee_ee', 
 'eee_ee', 
 'eee_ee', 
 'eee_ee' 
],

上面的代码f表示的是一等座,e表示的是二等座,符号"_"表示过道。

然后我们要定义座位类型的相关属性:

seats: { //定义座位属性 
 f: { 
 price : 100, 
 classes : 'first-class', 
 category: '一等座' 
 }, 
 e: { 
 price : 40, 
 classes : 'economy-class', 
 category: '二等座' 
 }  
},

上面的代码定义了一等座和二等座的价格、类别名称以及对应的css样式。他们可以在后面通过data()方法调用。

接下来我们用naming来定义座位图的行列信息,如下top设置为true则表示显示顶部横坐标(行),columns和rows分别用来定义横坐标(行)和纵坐标(列)的值,getLabel用来返回座位信息,如:01A表示01排A座。

naming : { //定义行列等信息 
 top : true, 
 columns: ['A', 'B', 'C', '', 'D','F'], 
 rows: ['01','02','','03','04','05','06','07','08','09'], 
 getLabel : function (character, row, column) { 
 return row+column; 
 } 
},

然后我们使用legend来定义图例,对应图例关联的元素是#legend,并对座位类型定义对应的样式。

legend : { //定义图例 
 node : $('#legend'), 
 items : [ 
 [ 'f', 'available', '一等座' ], 
 [ 'e', 'available', '二等座'], 
 [ 'f', 'unavailable', '已售出'] 
 ]  
},

最后在外面点击(click)座位图中的位置时,根据当前座位的状态做出不同的处理,包括计算票数和金额总计等,可以参照影院篇的说明。

click: function () { 
 if (this.status() == 'available') {//可选座 
 $('<li>'+this.data().category+'<br/>01车'+this.settings.label+'号<br/>¥'+this.data().price+'</li>') 
 .attr('id', 'cart-item-'+this.settings.id) 
 .data('seatId', this.settings.id) 
 .appendTo($cart); 
 //更新票数 
 $counter.text(sc.find('selected').length+1); 
 //计算总计金额 
 $total.text(recalculateTotal(sc)+this.data().price); 
 return 'selected'; 
 } else if (this.status() == 'selected') {//已选中 
 $counter.text(sc.find('selected').length-1); 
 $total.text(recalculateTotal(sc)-this.data().price); 
 //删除已预订座位 
 $('#cart-item-'+this.settings.id).remove(); 
 return 'available'; 
 } else if (this.status() == 'unavailable') {//已售出 
 //已售出 
 return 'unavailable'; 
 } else { 
 return this.style(); 
 } 
},

最后,我们使用get()和status()方法设置已经售出不可选的座位。

//已售出不可选座

sc.get(['01_A', '04_A', '07_B', '07_F']).status('unavailable');

值得一提的是,当网站购票非常频繁时需要注意及时刷新座位图,如果座位已经被抢占了则不可选。我们可以使用ajax进行异步请求,并且设置每隔10秒钟运行一次,可以参照如下代码:

setInterval(function() { 
 $.ajax({ 
 type : 'get', 
 url : 'book.php', 
 dataType : 'json', 
 success : function(response) { 
 //遍历所有座位 
 $.each(response.bookings, function(index, booking) { 
 //将已售出的座位状态设置为已售出 
 sc.status(booking.seat_id, 'unavailable'); 
 }); 
 } 
 }); 
}, 10000); //每10秒

以上就是本文介绍基于jQuery实现在线选座之高铁版,希望大家喜欢。

Javascript 相关文章推荐
javascript 同时在IE和FireFox获取KeyCode的代码
Feb 07 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
jqGrid用法汇总(全经典)
Jun 28 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
ES6新特性六:promise对象实例详解
Apr 21 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
vue项目开发中setTimeout等定时器的管理问题
Sep 13 Javascript
微信小程序实现搜索历史功能
Mar 26 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 #Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 #Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 #Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 #Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 #Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 #Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
Aug 24 #Javascript
You might like
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
javascript 鼠标拖动图标技术
2010/02/07 Javascript
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
javascript实现unicode与ASCII相互转换的方法
2015/12/10 Javascript
详谈javascript异步编程
2016/02/21 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
js的OOP继承实现(必看篇)
2017/02/18 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
jQuery实现简单轮播图效果
2020/12/27 jQuery
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
pyqt5简介及安装方法介绍
2018/01/31 Python
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
python实现归并排序算法
2018/11/22 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
Django 框架模型操作入门教程
2019/11/05 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
学年自我鉴定范文
2013/10/01 职场文书
教学实习自我评价
2014/01/28 职场文书
社区健康教育实施方案
2014/03/18 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
十八大宣传标语
2014/10/09 职场文书
大学生在校表现评语
2014/12/31 职场文书
奔腾年代观后感
2015/06/09 职场文书
关于环保的广播稿
2015/12/17 职场文书
2016年度创先争优活动总结
2016/04/05 职场文书
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript
Pandas 稀疏数据结构的实现
2021/07/25 Python
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers