jQuery在線選座位插件seat-charts特效代碼分享

更新時間：2015年08月27日 14:22:16 投稿：lijiao

這篇文章主要介紹了jQuery在線選座位插件seat-charts特效，推薦給大家，有需要的小伙伴可以參考下。

本文實例講述了jQuery在線選座位插件seat-charts特效。分享給大家供大家參考。具體如下：
這是一款基于JQuery實現(xiàn)的在線選座位插件seat-charts源碼，是一款適合機票，電影票，客車票選座的jquery.seat-charts插件。點擊左側(cè)的座位即可在右側(cè)即時顯示座位信息，并且可以有計算累加的功能。
特點：支持自定義座位類型和價格，支持自定義樣式，支持設(shè)置不可選的座位，也支持鍵盤控制選座。
運行效果圖： -------------------查看效果下載源碼-------------------

小提示：瀏覽器中如果不能正常運行，可以嘗試切換瀏覽模式。
為大家分享的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">結(jié)算</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: '經(jīng)濟艙'
  }  
  
  },
  naming : {
  top : false,
  getLabel : function (character, row, column) {
  return firstSeatLabel++;
  },
  },
  legend : {
  node : $('#legend'),
   items : [
  [ 'f', 'available', '頭等艙' ],
  [ 'e', 'available', '經(jīng)濟艙'],
  [ '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特效代碼，希望大家可以喜歡。

您可能感興趣的文章: