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操作 input type=checkbox的实现代码
Jun 14 Javascript
使用js操作cookie的一点小收获分享
Sep 03 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
May 29 Javascript
jquery使用remove()方法删除指定class子元素
Mar 26 Javascript
js简单正则验证汉字英文及下划线的方法
Nov 28 Javascript
全面解析vue中的数据双向绑定
May 10 Javascript
以v-model与promise两种方式实现vue弹窗组件
May 21 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
用vite搭建vue3应用的实现方法
Feb 22 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
受疫情影响 动画《Re从零开始的异世界生活》第二季延期至7月
2020/03/10 日漫
如何在PHP中使用Oracle数据库(6)
2006/10/09 PHP
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
PHP实现简单登录界面
2019/10/23 PHP
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
以一段代码为实例快速入门Python2.7
2015/03/31 Python
解决matplotlib库show()方法不显示图片的问题
2018/05/24 Python
django云端留言板实例详解
2019/07/22 Python
python实现淘宝购物系统
2019/10/25 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
Python根据指定文件生成XML的方法
2020/06/29 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
初中生期末考试的自我评价
2013/12/17 职场文书
新年主持词
2014/03/27 职场文书
吨的认识教学反思
2014/04/27 职场文书
美术兴趣小组活动总结
2014/07/07 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
思想品德课教学反思
2016/02/24 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
话题作文之关于呼唤
2019/11/29 职场文书
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL
canvas 中如何实现物体的框选
2022/08/05 Javascript