jQuery在线选座(高铁版)

收藏

jquery.seat-charts是一款适合高铁票、电影票的在线选座插件。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

左边座位列表，右边选票信息。

<div id="seat_area"> 
   <div class="front">
    03车厢
   </div> 
   <div id="seat_list"></div> 
  </div> 
  <!--右边选座信息-----> 
  <div class="booking-details"> 
   <h3> 选座信息：</h3> 
   <ul id="seats_selected"></ul> 
   <p>票数: <span id="tickets_num"></span></p> 
   <p>总价: ￥<span id="total_price">0</span></p> 
   <input type="button" class="btn" value="确定购买" /> 
   <div id="legend"></div> 
</div>

jQuery

我们在03号车厢内设置一等座和二等座，中间以通道隔开，So布局是这样滴：f代表一等座，e代表二等座，符号"_"代表过道，整个车厢结构图如下：

map: [//座位结构图 f 代表一等座;  e 代表 二等座;  下划线 "_" 代表过道
   'ff__ff',
   'ff__ff',
   '______',
   'eee_ee',
   'eee_ee',
   'eee_ee',
   'eee_ee',
   'eee_ee',
   'eee_ee'
],

接着我们要设置座位的相关属性：

seats: { //设置一等座和二等座属性
    f: {
        price: 125,
        classes: 'first-class',
        category: '一等座'
    },
    e: {
        price: 70,
        classes: 'economy-class',
        category: '二等座'
    }
},

接着我们用naming来定义座位图的行列信息，getLabel用来返回座位信息，如：03B表示03排B座。

naming : { //定义行列等信息 
    top : true,  //显示顶部横坐标（行）
    columns: ['A', 'B', 'C', '', 'D','F'], //定义横坐标（行）
    rows: ['01','02','','03','04','05','06','07','08','09'],  //纵坐标（列）的值
    getLabel : function (character, row, column) {  //返回座位信息
        return row+column; 
    } 
}

接着我们使用legend来定义图例，通过#legend定义座位类型。

legend : { //定义图例 
    node : $('#legend'), 
    items : [ 
        [ 'f', 'available',   '一等座' ], 
        [ 'e', 'available',   '二等座'], 
        [ 'f', 'unavailable', '已售出'] 
    ]                     
}

最后通过click座位事件，计算票数和金额总计等。

click: function () { 
    if (this.status() == 'available') {////若为可选座状态
        $('<li>'+this.data().category+'<br/>01车'+this.settings.label+'号<br/>￥'+this.data().price+'</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') {//若为已选中状态 
        $counter.text(sc.find('selected').length-1);   //更新票数量
        $total.text(recalculateTotal(sc)-this.data().price); //更新票价总金额
        
        $('#cart-item-'+this.settings.id).remove(); //删除已预订座位 
        return 'available'; 
    } else if (this.status() == 'unavailable') {//已售出 
        return 'unavailable'; 
    } else { 
        return this.style(); 
    } 
}

最后，我们使用get()和status()方法设置座位状态，分别为available：空位，unavailable：已售出。

sc.get(['01_A', '04_A', '07_B', '07_F']).status('unavailable');//已售出座位