jQuery在线选座位插件seat-charts特效代码分享


Posted in Javascript onAugust 27, 2015

本文实例讲述了jQuery在线选座位插件seat-charts特效。分享给大家供大家参考。具体如下:
这是一款基于JQuery实现的在线选座位插件seat-charts源码,是一款适合机票,电影票,客车票选座的jquery.seat-charts插件。点击左侧的座位即可在右侧即时显示座位信息,并且可以有计算累加的功能。
特点:支持自定义座位类型和价格,支持自定义样式,支持设置不可选的座位,也支持键盘控制选座。
运行效果图:                     -------------------查看效果 下载源码-------------------

jQuery在线选座位插件seat-charts特效代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的jQuery在线选座位插件seat-charts特效代码如下

<!doctype html>
<html>
<head>
<title>jQuery在线选座位插件seat-charts</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/jquery.seat-charts.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="wrapper">
 <div class="container">
 <div id="seat-map">
  <div class="front-indicator">机头</div>
 </div>
 <div class="booking-details">
  <h3>已选中的座位 (<span id="counter">0</span>):</h3>
  <ul id="selected-seats">
  </ul>
  <p>总价: <b>$<span id="total">0</span></b></p>
  <p><button class="checkout-button">结算</button></p>  
  <div id="legend"></div>
 </div>
 </div>
</div>
<script src="js/jquery-1.11.0.min.js"></script> 
<script src="js/jquery.seat-charts.min.js"></script> 
<script>
 var firstSeatLabel = 1;
 
 $(document).ready(function() {
 var $cart = $('#selected-seats'),
  $counter = $('#counter'),
  $total = $('#total'),
  sc = $('#seat-map').seatCharts({
  map: [
  'ff_ff',
  'ff_ff',
  'ee_ee',
  'ee_ee',
  'ee___',
  'ee_ee',
  'ee_ee',
  'ee_ee',
  'ee_ee',
  'eeeee',
  ],
  seats: {
  f: {
  price : 100,
  classes : 'first-class', //your custom CSS class
  category: '头等舱'
  },
  e: {
  price : 40,
  classes : 'economy-class', //your custom CSS class
  category: '经济舱'
  }  
  
  },
  naming : {
  top : false,
  getLabel : function (character, row, column) {
  return firstSeatLabel++;
  },
  },
  legend : {
  node : $('#legend'),
   items : [
  [ 'f', 'available', '头等舱' ],
  [ 'e', 'available', '经济舱'],
  [ 'f', 'unavailable', '已预定']
   ]  
  },
  click: function () {
  if (this.status() == 'available') {
  $('<li>'+this.data().category+this.settings.label+'号座位'+':<br/>价格:<b>$'+this.data().price+'</b> <a href="#" class="cancel-cart-item">[删除]</a></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') {
  //update the counter
  $counter.text(sc.find('selected').length-1);
  //and total
  $total.text(recalculateTotal(sc)-this.data().price);
  
  //remove the item from our cart
  $('#cart-item-'+this.settings.id).remove();
  
  //seat has been vacated
  return 'available';
  } else if (this.status() == 'unavailable') {
  //seat has been already booked
  return 'unavailable';
  } else {
  return this.style();
  }
  }
 });

 //this will handle "[cancel]" link clicks
 $('#selected-seats').on('click', '.cancel-cart-item', function () {
  //let's just trigger Click event on the appropriate seat, so we don't have to repeat the logic here
  sc.get($(this).parents('li:first').data('seatId')).click();
 });

 //let's pretend some seats have already been booked
 sc.get(['1_2', '4_1', '7_1', '7_2']).status('unavailable');
 
 });

 function recalculateTotal(sc) {
 var total = 0;
 
 //basically find every selected seat and sum its price
 sc.find('selected').each(function () {
 total += this.data().price;
 });
 
 return total;
 }
 
 </script>
<div align="center" style="clear:both;font-size:12px;color:#666;font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
</div>
</body>
</html>

以上就是为大家分享的jQuery在线选座位插件seat-charts特效代码,希望大家可以喜欢。

Javascript 相关文章推荐
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
jquery实现的下拉和收缩效果示例
Aug 21 Javascript
node.js中的fs.unlink方法使用说明
Dec 15 Javascript
js封装可使用的构造函数继承用法分析
Jan 28 Javascript
jquery 设置style:display的方法
Jan 29 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 #Javascript
js+div实现文字滚动和图片切换效果代码
Aug 27 #Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 #Javascript
json+jQuery实现的无限级树形菜单效果代码
Aug 27 #Javascript
jQuery on()方法示例及jquery on()方法的优点
Aug 27 #Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 #Javascript
jQuery UI设置固定日期选择特效代码分享
Aug 27 #Javascript
You might like
php不用正则采集速度探究总结
2008/03/24 PHP
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
php实现每日签到功能
2018/11/29 PHP
JavaScript中使用正则匹配多条,且获取每条中的分组数据
2010/11/30 Javascript
js 上传图片预览问题
2010/12/06 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
通用无限极下拉菜单的实现代码
2016/05/31 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
使用原生js+canvas实现模拟心电图的实例
2017/09/20 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
vue样式穿透 ::v-deep的具体使用
2020/06/04 Javascript
vue动态设置页面title的方法实例
2020/08/23 Javascript
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
9种python web 程序的部署方式小结
2014/06/30 Python
解析Python中while true的使用
2015/10/13 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
Django models.py应用实现过程详解
2019/07/29 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
法国娇韵诗官方旗舰店:Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
护士自我介绍信
2014/01/13 职场文书
家长会学生演讲稿
2014/04/26 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
地道战观后感
2015/06/04 职场文书
结婚纪念日感言
2015/08/01 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL