基于jquery实现在线选座订座之影院篇


Posted in Javascript onAugust 24, 2015

先给大家展示效果图(支持源码下载哦):

基于jquery实现在线选座订座之影院篇

查看演示          源码下载

我们在线购票时(如电影票、车票等)可以自己选座。开发者会在页面上列出座次席位,用户可以一目了然的看到可以选择的座位及支付。本文以电影院购票为例,为您展示如何选座、处理选座数据等。

在这里,我给大家介绍一款基于jQuery的在线选座插件:jQuery Seat Charts,它支持自定义座位类型和价格,支持自定义样式,支持设置不可选的座位,也支持键盘控制座位。

HTML

我们假设进入电影《星际穿越》的选座页面,页面布局请看上面的大图,页面左边将在#seat-map中显示影院的座位布局图,右侧#booking-details显示影片相关信息以及选中的座位信息#selected-seats和票价金额信息,选择座位后确认到支付页面完成支付。

<div class="demo"> 
 <div id="seat-map"> 
 <div class="front">屏幕</div>   
 </div> 
 <div class="booking-details"> 
 <p>影片:<span>星际穿越3D</span></p> 
 <p>时间:<span>11月14日 21:00</span></p> 
 <p>座位:</p> 
 <ul id="selected-seats"></ul> 
 <p>票数:<span id="counter">0</span></p> 
 <p>总计:<b>¥<span id="total">0</span></b></p> 
 <button class="checkout-button">确定购买</button> 
 <div id="legend"></div> 
 </div> 
</div>

CSS

使用CSS将页面中的各个元素美化,尤其是座位列表布局,为座位状态(已售出、可选座位、已选座位等)设置不同的样式,我们已经整理好CSS代码,当然你可以根据自己项目页面风格自己修改任意CSS代码。

.front{width: 300px;margin: 5px 32px 45px 32px;background-color: #f0f0f0; color: #666;text-align: center;padding: 3px;border-radius: 5px;} 
.booking-details {float: right;position: relative;width:200px;height: 450px; } 
.booking-details h3 {margin: 5px 5px 0 0;font-size: 16px;} 
.booking-details p{line-height:26px; font-size:16px; color:#999} 
.booking-details p span{color:#666} 
div.seatCharts-cell {color: #182C4E;height: 25px;width: 25px;line-height: 25px;margin: 3px;float: left;text-align: center;outline: none;font-size: 13px;} 
div.seatCharts-seat {color: #fff;cursor: pointer;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius: 5px;} 
div.seatCharts-row {height: 35px;} 
div.seatCharts-seat.available {background-color: #B9DEA0;} 
div.seatCharts-seat.focused {background-color: #76B474;border: none;} 
div.seatCharts-seat.selected {background-color: #E6CAC4;} 
div.seatCharts-seat.unavailable {background-color: #472B34;cursor: not-allowed;} 
div.seatCharts-container {border-right: 1px dotted #adadad;width: 400px;padding: 20px;float: left;} 
div.seatCharts-legend {padding-left: 0px;position: absolute;bottom: 16px;} 
ul.seatCharts-legendList {padding-left: 0px;} 
.seatCharts-legendItem{float:left; width:90px;margin-top: 10px;line-height: 2;} 
span.seatCharts-legendDescription {margin-left: 5px;line-height: 30px;} 
.checkout-button {display: block;width:80px; height:24px; line-height:20px;margin: 10px auto;border:1px solid #999;font-size: 14px; cursor:pointer} 
#selected-seats {max-height: 150px;overflow-y: auto;overflow-x: none;width: 200px;} 
#selected-seats li{float:left; width:72px; height:26px; line-height:26px; border:1px solid #d3d3d3; background:#f7f7f7; margin:6px; font-size:14px; font-weight:bold; text-align:center}

jQuery

本实例基于jQuery,所以别忘了要先加载jquery库和选座插件:jQuery Seat Charts。

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.seat-charts.min.js"></script>

接下来我们定义好诸如票价,座位区,票数,总计金额之类的元素,然后调用插件:$('#seat-map').seatCharts()。

我们先设置好座位图,一个放映厅的座位是固定好的。在本例中,第三排是过道,以及三四排的右侧空位是出口,最后一排我们设置了情侣座,那么放映厅的布局是这样的:

aaaaaaaaaa
aaaaaaaaaa
__________
aaaaaaaa__
aaaaaaaaaa
aaaaaaaaaa
aaaaaaaaaa
aaaaaaaaaa
aaaaaaaaaa
aa__aa__aa

我们用字母a表示座位,用符号_表示空的,即没有座位,当然你也可以用a,b,c等代表不同等级的座位。

然后定义图例样式,关键是侦探点击事件click():用户点击座位时,如果座位状态为可选(available),那么点击座位后,将座位信息(几排几座)加入到右侧的已选座列表中,并计算总票数和总金额;如果座位状态为已选中(selected),那么再次点击座位后,则会将已选中的座位信息从右侧的座位列表中删除,并将状态设置可选;如果座位状态为已售出(unavailable),则不可点击座位。最后使用get()方法将已售出的座位号状态设置为已售出。

以下是详细代码:

var price = 80; //票价 
$(document).ready(function() { 
 var $cart = $('#selected-seats'), //座位区 
 $counter = $('#counter'), //票数 
 $total = $('#total'); //总计金额 
 var sc = $('#seat-map').seatCharts({ 
 map: [ //座位图 
  'aaaaaaaaaa', 
  'aaaaaaaaaa', 
  '__________', 
  'aaaaaaaa__', 
  'aaaaaaaaaa', 
  'aaaaaaaaaa', 
  'aaaaaaaaaa', 
  'aaaaaaaaaa', 
  'aaaaaaaaaa', 
  'aa__aa__aa' 
 ], 
 legend : { //定义图例 
  node : $('#legend'), 
  items : [ 
  [ 'a', 'available', '可选座' ], 
  [ 'a', 'unavailable', '已售出'] 
  ]   
 }, 
 click: function () { //点击事件 
  if (this.status() == 'available') { //可选座 
  $('<li>'+(this.settings.row+1)+'排'+this.settings.label+'座</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)+price); 
  return 'selected'; 
  } else if (this.status() == 'selected') { //已选中 
  //更新数量 
  $counter.text(sc.find('selected').length-1); 
  //更新总计 
  $total.text(recalculateTotal(sc)-price); 
  //删除已预订座位 
  $('#cart-item-'+this.settings.id).remove(); 
  //可选座 
  return 'available'; 
  } else if (this.status() == 'unavailable') { //已售出 
  return 'unavailable'; 
  } else { 
  return this.style(); 
  } 
 } 
 }); 
 //已售出的座位 
 sc.get(['1_2', '4_4','4_5','6_6','6_7','8_5','8_6','8_7','8_8', '10_1', '10_2']).status('unavailable'); 
}); 
//计算总金额 
function recalculateTotal(sc) { 
 var total = 0; 
 sc.find('selected').each(function () { 
 total += price; 
 }); 
 return total; 
}

说明

jQuery Seat Charts插件提供了多个选项设置和方法调用,具体可参照项目官网:

https://github.com/mateuszmarkowski/jQuery-Seat-Charts。

以上代码使用jquery实现在线选座订座之影院篇,希望大家喜欢。

Javascript 相关文章推荐
JavaScript 闭包在封装函数时的简单分析
Nov 28 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 Javascript
jquery实现图片裁剪思路及实现
Aug 16 Javascript
javascript读写json示例
Apr 11 Javascript
Javascript基础教程之数据类型转换
Jan 18 Javascript
JavaScript仿静态分页实现方法
Aug 04 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 #Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 #Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
Aug 24 #Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 #Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 #Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 #Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 #Javascript
You might like
常用的php ADODB使用方法集锦
2008/03/25 PHP
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2009/08/09 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
js常用DOM方法详解
2017/02/04 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
Python 多线程抓取图片效率对比
2016/02/27 Python
利用python为运维人员写一个监控脚本
2018/03/25 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
金士达面试非笔试
2012/03/14 面试题
护士毕业实习感言
2014/03/05 职场文书
广播节目策划方案
2014/05/23 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
廉政承诺书
2015/01/19 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
运动员入场前导词
2015/07/20 职场文书
公司酒会致辞
2015/07/30 职场文书
2016年教师节慰问信
2015/12/01 职场文书