基于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 相关文章推荐
JS网络游戏-(模拟城市webgame)提供的一些例子下载
Oct 14 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
基于jQuery的message插件实现右下角弹出消息框
Jan 11 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
Express的路由详解
Dec 10 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 Javascript
如何使用less实现随机下雪动画详解
Jan 02 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 Javascript
JS实现在线ps功能详解
Jul 31 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 Javascript
node使用async_hooks模块进行请求追踪
Jan 28 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连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
PHP创建单例后台进程的方法示例
2017/05/23 PHP
用javascript自动显示最后更新时间
2007/03/15 Javascript
javascript web页面刷新的方法收集
2009/07/02 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
2013/08/05 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
js父页面中使用子页面的方法
2016/01/09 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
angular6的table组件开发的实现示例
2018/12/26 Javascript
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
Python中for循环详解
2014/01/17 Python
深入理解python函数递归和生成器
2016/06/06 Python
Python简单生成随机数的方法示例
2018/03/31 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
2014学年自我鉴定
2014/02/23 职场文书
中专生毕业个人鉴定
2014/02/26 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
Python爬虫数据的分类及json数据使用小结
2021/03/29 Python
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript