jQuery在线选座(高铁版)

来源:https://www.sucaihuo.com/js/4.html 2015-04-01 01:54浏览(4622) 收藏

jquery.seat-charts是一款适合高铁票、电影票的在线选座插件。
jQuery在线选座(高铁版)
分类:其它特效 > Ajax 难易:中级
查看演示 下载资源 下载积分: 106 积分

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');//已售出座位
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2