当你说今天的烦恼、我想对你说却害怕又说错
来源:互联网 发布:淘宝申请企业店铺 编辑:程序博客网 时间:2024/04/29 19:28
除了电影院在线选座,我们还会接触到飞机机舱选座,当然也有汽车票火车票选座的。假如有一天买火车票也提供在线选座,那么今天我来给大家介绍下如何使用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秒
- 当你说今天的烦恼、我想对你说却害怕又说错
- 我想对你说
- 儿子,我想对你说
- 粗心,我想对你说
- 朋友,我想对你说
- 潘,我想对你说。。。
- 2017我想对你说
- [思语]_心上人,我想对你说
- 应届大学生,我想对你说
- 我想大声对你说--USB
- vb,我想对你说,垃圾
- 女人,我想对你说,要了你之后.....
- 我又没对你说
- 当世界对你说“不”
- 高校面试官有感而发:应届大学生我想对你说
- 大家来猜谜 一句我想对你说的话
- 我想说却说不出来
- 同人女,我想对你说——黄金圣斗士对同人女的真情告白
- new,malloc,GlobalAlloc详解
- JavaScript语言基础12
- 为师的快乐
- android 系统Intent调用
- VC游戏辅助原理第二季,迈入游戏安全领域第二步
- 当你说今天的烦恼、我想对你说却害怕又说错
- Linux多线程模拟生产者/消费者问题
- POJ 3678 经典AND,OR,XOR的2-sat问题
- android应用开发(七)—— 数据储存1
- POJ 2531-Network Saboteur(DFS)
- android Qwerty 键盘搜索联系人分析与实现(支持多音字)
- IHERB上待产包准备指南-宝宝篇
- Extjs批量删除数据
- sdutoj 2144最小生成树