jQuery在线选座(影院版)

jquery.seat-charts是一款适合电影票、高铁票的在线选座插件,支持自定义样式，支持设置座位状态，并且支持键盘控制座位。

分类：其它特效 > Ajax 难易：中级

查看演示下载资源下载积分： 106 积分

HTML

<div id="seat_area"> 
   <div class="front">
    屏幕
   </div> 
  </div> 
  <!--右边选座信息-----> 
  <div class="booking_area"> 
   <p>电影：<span>天将雄师</span></p> 
   <p>时间：<span>03月20日 22:15</span></p> 
   <p>座位：</p> 
   <ul id="seats_chose"></ul> 
   <p>票数：<span id="tickects_num">0</span></p> 
   <p>总价：<b>￥<span id="total_price">0</span></b></p> 
   <input type="button" class="btn" value="确定购买" /> 
   <div id="legend"></div> 
  </div>

jQuery

首先我们要加载jquery库和选座插件：jQuery Seat Charts。

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.seat-charts.min.js"></script>

接下来我们定义好票价、座位区、票数、总计金额等，然后调用插件生成座位区：$('#seat-map').seatCharts()。

var price = 100; //电影票价
$(document).ready(function() {
    var $cart = $('#seats_chose'),
    //座位区
    $tickects_num = $('#tickects_num'),
    //票数
    $total_price = $('#total_price'); //票价总额
    var sc = $('#seat_area').seatCharts({
        map: [ //座位结构图 a 代表座位; 下划线 "_" 代表过道
        'cccccccccc', 'cccccccccc', '__________', 'cccccccc__', 'cccccccccc', 'cccccccccc', 'cccccccccc', 'cccccccccc', 'cccccccccc', 'cc__cc__cc'],
        naming: { //设置行列等信息
            top: false,//不显示顶部横坐标（行） 
            getLabel: function(character, row, column) { //返回座位信息 
                return column;
            }
        },
        legend: { //定义图例
            node: $('#legend'),
            items: [['c', 'available', '可选座'], ['c', 'unavailable', '已售出']]
        },
        click: function() {
            if (this.status() == 'available') { //若为可选座状态，添加座位
                $('<li>' + (this.settings.row + 1) + '排' + this.settings.label + '座</li>').attr('id', 'cart-item-' + this.settings.id).data('seatId', this.settings.id).appendTo($cart);

                $tickects_num.text(sc.find('selected').length + 1); //统计选票数量
                $total_price.text(getTotalPrice(sc) + price); //计算票价总金额
                return 'selected';
            } else if (this.status() == 'selected') { //若为选中状态
                $tickects_num.text(sc.find('selected').length - 1); //更新票数量
                $total_price.text(getTotalPrice(sc) - price); //更新票价总金额
                $('#cart-item-' + this.settings.id).remove(); //删除已预订座位
                return 'available';
            } else if (this.status() == 'unavailable') { //若为已售出状态
                return 'unavailable';
            } else {
                return this.style();
            }
        }
    });

    //设置已售出的座位
    sc.get(['1_3', '1_4', '4_4', '4_5', '4_6', '4_7', '4_8']).status('unavailable');
});

function getTotalPrice(sc) { //计算票价总额
    var total = 0;
    sc.find('selected').each(function() {
        total += price;
    });
    return total;
}