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 相关文章推荐
jquery中show()、hide()和toggle()用法实例
Jan 15 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
基于vue组件实现猜数字游戏
May 28 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 Javascript
JS数组去重常用方法实例小结【4种方法】
May 28 Javascript
JS实现图片切换效果
Nov 17 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
vue中 this.$set的使用详解
Nov 17 Vue.js
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开发环境配置记录
2011/01/14 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
php通过array_push()函数添加多个变量到数组末尾的方法
2015/03/18 PHP
PHP类的封装与继承详解
2015/09/29 PHP
php实现倒计时效果
2015/12/19 PHP
javascript 三种编解码方式
2010/02/01 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
JS获取键盘上任意按键的值(实例代码)
2013/11/12 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
JS插件plupload.js实现多图上传并显示进度条
2016/11/29 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
Python中利用xpath解析HTML的方法
2018/05/14 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
numpy数组做图片拼接的实现(concatenate、vstack、hstack)
2019/11/08 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
大学生个人求职信范文
2013/09/21 职场文书
商务英语本科生的自我评价分享
2013/11/15 职场文书
春节联欢晚会主持词范文
2014/03/24 职场文书
本科生求职信
2014/06/17 职场文书
煤矿安全知识竞赛活动总结
2014/07/07 职场文书
学习考察心得体会
2014/09/04 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
学雷锋感言
2015/08/03 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android