<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>课程选坐</title>
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/jquery.seat-charts.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="seat-map" style="margin-top:10px;">
<div class="coach-ico">教练</div>
</div>
<div class="seat-state-box">
<div class="clb">
<div class="fl kx-ste">可选</div>
<div class="fl yx-ste">已选</div>
<div class="fl yz-ste">已占</div>
</div>
</div>
<div class="booking-details none">
<ul id="selected-seats" class="clb">
</ul>
</div>
<div style="height:50px;"></div>
<a href="#" class="pay-btn" style="display:none;">确认选坐</a>
<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: [
'fffffffff',
'fffffffff',
'fffffffff',
'fffffffff',
'fffffffff',
'fffffffff',
'fffffffff',
'fffffffff',
'fffffffff',
],
seats: {
f: {
price : 100,
classes : 'first-class', //your custom CSS class
category: ''
},
e: {
price : 40,
classes : 'economy-class', //your custom CSS class
category: ''
}
},
naming : {
top : false,
getLabel : function (character, row, column) {
return firstSeatLabel++;
},
},
legend : {
node : $('#legend'),
items : [
]
},
click: function () {
if (this.status() == 'available') {
$(".seat-state-box").hide();
$(".booking-details").show();
$(".pay-btn").show();
var sid=this.settings.id;
var hnum=sid.split("_")[0];
var snum=sid.split("_")[1];
$('<li>已选'+hnum+'排'+snum+'号座位<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);
if(sc.find('selected').length-1==0){
$(".seat-state-box").show();
$(".booking-details").hide();
$(".pay-btn").hide();
}
//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>
</body>
</html>
选座系统，代码简单易改
2星 需积分: 46 82 浏览量
2018-06-07
10:26:42
上传
评论 9
收藏 73KB ZIP 举报 
选坐(1).zip （27个子文件） 
选坐 js 
jquery-1.10.2.min.js 91KB jquery.seat-charts.min.js 7KB .DS_Store 8KB css common.css 2KB style.css 2KB base.css 5KB jquery.seat-charts.css 1KB
index.html 4KB img 
4D66FA87A5B4BDEC750F9AD3356E024B.png 2KB chooseseat_occupied@3x.png 1KB chooseseat_arrowdown@2x.png 1KB logo-iftness副本@2x.png 7KB chooseseat_chosen_seat@3x.png 1KB chooseseat_optional@2x.png 1KB chooseseat_optional@3x.png 2KB chooseseat_chosen_seat@2x.png 1KB chooseseat_arrowdown@3x.png 1KB icon_cancel.png 3KB chooseseat_empty@2x.png 2KB chooseseat_occupied@2x.png 1KB chooseseat_chosen@3x.png 1KB chooseseat_coach@3x.png 1KB chooseseat_empty@3x.png 2KB chooseseat_coach@2x.png 1KB chooseseat_occupied_seat@2x.png 1KB chooseseat_chosen@2x.png 1KB chooseseat_occupied_seat@3x.png 2KB资源评论
yuhaiyu2019-08-15其实没什么用
Cl_Daisy2018-08-20emm。。。没有计算总价钱其他的很可以 ...厉害
D_莫语2019-01-18坑逼，说好的java，数据库呢？只有那个几个css，js，
