jQuery插件seat-charts使用详解（附代码）

PHP中文网 • 2025年3月8日 11:58:06 • 编程技术 • 阅读 2

这次给大家带来jQuery插件seat-charts使用详解（附代码），jQuery插件seat-charts使用详解的注意事项有哪些，下面就是实战案例，一起来看一下。

这是一款基于JQuery实现的在线选座位插件seat-charts源码，是一款适合机票，电影票，客车票选座的jquery.seat-charts插件。点击左侧的座位即可在右侧即时显示座位信息，并且可以有计算累加的功能。

特点：支持自定义座位类型和价格，支持自定义样式，支持设置不可选的座位，也支持键盘控制选座。
运行效果图：

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

jQuery在线选座位插件seat-charts 
 
  
机头
 
   
已选中的座位 (0):
    
  总价: $0
  
    
 
 
   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') {  $(''+this.data().category+this.settings.label+'号座位'+'：
价格：$'+this.data().price+' [删除]
')  .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; }  
适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.