基于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 相关文章推荐
NiftyCube——轻松实现圆角边框
Feb 20 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
JS常用表单验证方法总结
May 22 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
ES6中module模块化开发实例浅析
Apr 06 Javascript
解决Vue不能检测数组或对象变动的问题
Feb 24 Javascript
js笔试题-接收get请求参数
Jun 15 Javascript
微信小程序在text文本实现多种字体样式
Nov 08 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
js实现全选和全不选
Jul 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将图片转换成base64编码的实现方法
2016/09/13 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
Jquery ui css framework
2010/06/28 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
js转义字符介绍
2013/11/05 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
兼容主流浏览器的JS复制内容到剪贴板
2014/12/12 Javascript
js实现类似新浪微博首页内容渐显效果的方法
2015/04/10 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
JavaScript中的编码和解码函数
2017/02/15 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
Node.js 路由的实现方法
2019/06/05 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
wxPython事件驱动实例详解
2014/09/28 Python
Python正则表达式完全指南
2017/05/25 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
python__name__原理及用法详解
2019/11/02 Python
Python调用.NET库的方法步骤
2019/12/27 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
2014年大班元旦活动方案
2014/02/26 职场文书
关于安全演讲稿
2014/05/09 职场文书
担保书范文
2015/01/20 职场文书
用python批量解压带密码的压缩包
2021/05/31 Python