基于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 相关文章推荐
splice slice区别
Oct 09 Javascript
JXTree对象,读取外部xml文件数据,生成树的函数
Apr 02 Javascript
用倒置滤镜把div倒置,再把table倒置。
Jul 31 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
Jan 29 Javascript
JavaScript解八皇后问题的方法总结
Jun 12 Javascript
footer定位页面底部(代码分享)
Mar 07 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 Javascript
Laravel admin实现消息提醒、播放音频功能
Jul 10 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 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
php 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
php实现文件编码批量转换
2014/03/10 PHP
关于PHP的curl开启问题探讨
2014/04/08 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
基于jquery实现日历签到功能
2020/09/11 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
vue cli2.0单页面title修改方法
2018/06/07 Javascript
开发用到的js封装方法(20种)
2018/10/12 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
Python 模板引擎的注入问题分析
2017/01/01 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
对python字典过滤条件的实例详解
2019/01/22 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
python 对象真假值的实例(哪些视为False)
2020/12/11 Python
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
团日活动总结书
2014/05/08 职场文书
教师工作表现评语
2014/12/31 职场文书
复试通知单模板
2015/04/24 职场文书
学校节水倡议书
2015/04/29 职场文书
个人催款函范文
2015/06/24 职场文书
员工担保书范本
2015/09/22 职场文书
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python