基于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实现全部删或清空所选的操作
May 27 Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
通过webpack引入第三方库的方法
Jul 20 Javascript
JS实现可视化文件上传
Sep 08 Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 18 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
Oct 08 Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 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读取数据库信息的几种方法
2008/05/24 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
微信小程序监听用户登录事件的实现方法
2019/11/11 Javascript
python列表操作使用示例分享
2014/02/21 Python
python读取文件名称生成list的方法
2018/04/27 Python
Python异常处理操作实例详解
2018/08/28 Python
python pyheatmap包绘制热力图
2018/11/09 Python
python Pandas库基础分析之时间序列的处理详解
2019/07/13 Python
np.random.seed() 的使用详解
2020/01/14 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
比利时香水网上商店:NOTINO
2018/03/28 全球购物
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
文明礼仪倡议书
2015/04/28 职场文书
在职证明范本
2015/06/15 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书
react 项目中引入图片的几种方式
2021/06/02 Javascript