html影院选座模板,jQuery在线选座(影院版)

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

查看演示

下载资源：

2215

次 下载资源

下载积分：

106

积分

HTML

屏幕

电影：天将雄师

时间：03月20日 22:15

座位：

票数：0

总价：￥0

jQuery

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

接下来我们定义好票价、座位区、票数、总计金额等，然后调用插件生成座位区：$('#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') { //若为可选座状态，添加座位

$('

' + (this.settings.row + 1) + '排' + this.settings.label + '座').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;

}