Seat HTML

最新推荐文章于 2022-04-03 10:03:49 发布

auroradad

最新推荐文章于 2022-04-03 10:03:49 发布

阅读量934

点赞数

本文链接：https://blog.csdn.net/auroradad/article/details/44344611

版权

Index.html

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=GBK">
	<title>JSC Demo</title>
	
	<link rel="stylesheet" type="text/css" href="jquery.seat-charts.css">
	<link rel="stylesheet" type="text/css" href="style.css">
	<style type="text/css">
		.container{
			width: 900px;
		}
		div.seatCharts-container{
			width: 500px;
		}
		div.seatCharts-row{
			width: 500px;
		}
		
		div.seatCharts-cell {
			height: 50px;
			width: 50px;
		}
	</style>
	
	
	<script src="jquery-1.11.0.min.js"></script>
	<script src="jquery.seat-charts.js"></script>
	<script>
			var firstSeatLabel = 1;
		
			$(document).ready(function() {
				var $cart = $('#selected-seats'),
					$counter = $('#counter'),
					$total = $('#total'),
					sc = $('#seat-map').seatCharts({
					map: [
						'fff_fff',
						'fff_fff',
						'eee_eee',
						'eee____',
						'eeeeeee',
						//'ee_ee',
						//'ee___',
						//'ee_ee',
						//'ee_ee',
						//'ee_ee',
						//'eeeee',
					],
					seats: {
						f: {
							price   : 100,
							classes : 'first-class', //your custom CSS class
							category: 'First Class'
						},
						e: {
							price   : 40,
							classes : 'economy-class', //your custom CSS class
							category: 'Economy Class'
						}					
					
					},
					naming : {
						top : false,
						getLabel : function (character, row, column) {
							return firstSeatLabel++;
						},
					},
					legend : {
						node : $('#legend'),
					    items : [
							[ 'f', 'available',   'First Class' ],
							[ 'e', 'available',   'Economy Class'],
							[ 'f', 'unavailable', 'Already Booked']
					    ]					
					},
					click: function () {
						if (this.status() == 'available') {
							//let's create a new <li> which we'll add to the cart items
							$('<li>'+this.data().category+' Seat # '+this.settings.label+': <b>$'+this.data().price+'</b> <a href="#" class="cancel-cart-item">[cancel]</a></li>')
								.attr('id', 'cart-item-'+this.settings.id)
								.data('seatId', this.settings.id)
								.appendTo($cart);
							
							/*
							 * Lets update the counter and total
							 *
							 * .find function will not find the current seat, because it will change its stauts only after return
							 * 'selected'. This is why we have to add 1 to the length and the current seat price to the total.
							 */
							$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);
							//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>
</head>

<body>
	<div class="wrapper">
		<div class="container">
			<div id="seat-map" class="seatCharts-container" tabindex="0" aria-activedescendant="5_1">
				<div class="front-indicator">Front</div>
			</div>
			<div class="booking-details">
				<h2>Booking Details</h2>
				<h3>
					Selected Seats (<span id="counter">2</span>):
				</h3>
				<ul id="selected-seats"></ul>
				Total: <b>$<span id="total">0</span></b>
				<button class="checkout-button">Checkout »</button>
				<div id="legend" class="seatCharts-legend"></div>
			</div>
		</div>
	</div>

</body>
</html>

style.css:

body {
	font-family: 'Lato', sans-serif;
}
a {
	color: #b71a4c;
}
.front-indicator {
	width: 145px;
	margin: 5px 32px 15px 32px;
	background-color: #f6f6f6;	
	color: #adadad;
	text-align: center;
	padding: 3px;
	border-radius: 5px;
}
.wrapper {
	width: 100%;
	text-align: center;
}
.container {
	margin: 0 auto;
	width: 500px;
	text-align: left;
}
.booking-details {
	float: left;
	text-align: left;
	margin-left: 35px;
	font-size: 12px;
	position: relative;
	height: 401px;
}
.booking-details h2 {
	margin: 25px 0 20px 0;
	font-size: 17px;
}
.booking-details h3 {
	margin: 5px 5px 0 0;
	font-size: 14px;
}
div.seatCharts-cell {
	color: #182C4E;
	height: 25px;
	width: 25px;
	line-height: 25px;
	
}
div.seatCharts-seat {
	color: #FFFFFF;
	cursor: pointer;	
}
div.seatCharts-row {
	height: 35px;
}
div.seatCharts-seat.available {
	background-color: #B9DEA0;

}
div.seatCharts-seat.available.first-class {
/* 	background: url(vip.png); */
	background-color: #3a78c3;
}
div.seatCharts-seat.focused {
	background-color: #76B474;
}
div.seatCharts-seat.selected {
	background-color: #E6CAC4;
}
div.seatCharts-seat.unavailable {
	background-color: #472B34;
}
div.seatCharts-container {
	border-right: 1px dotted #adadad;
	width: 200px;
	padding: 20px;
	float: left;
}
div.seatCharts-legend {
	padding-left: 0px;
	position: absolute;
	bottom: 16px;
}
ul.seatCharts-legendList {
	padding-left: 0px;
}
span.seatCharts-legendDescription {
	margin-left: 5px;
	line-height: 30px;
}
.checkout-button {
	display: block;
	margin: 10px 0;
	font-size: 14px;
}
#selected-seats {
	max-height: 90px;
	overflow-y: scroll;
	overflow-x: none;
	width: 170px;
}

Instructions:

调整方块大小：
div.seatCharts-cell {
	height: 50px;
	width: 50px;
}

container大小
.container{
	width: 900px;
}
div.seatCharts-container{
	width: 500px;
}
div.seatCharts-row{
	width: 500px;
}

调整方块排列方式
map: [
	'fff_fff', --三个 空格 三个
	'fff_fff',
	'eee_eee',
	'eee____', 三个 后面空的
	'eeeeeee',
	'ee_ee', 两个 空格 两个
	//'ee_ee',
	//'ee___',
	//'ee_ee',
	//'ee_ee',
	//'ee_ee',
	//'eeeee',
],

定义字母f,e对应的css样式和价格
seats: {
	f: {
		price   : 100,
		classes : 'first-class', //your custom CSS class
		category: 'First Class'
	},
	e: {
		price   : 40,
		classes : 'economy-class', //your custom CSS class
		category: 'Economy Class'
	}					

}


定义方块状态
items : [
	[ 'f', 'available',   'First Class' ],
	[ 'e', 'available',   'Economy Class'],
	[ 'f', 'unavailable', 'Already Booked']
]

手动block方块状态
//let's pretend some seats have already been booked
sc.get(['1_2', '4_1', '7_1', '7_2']).status('unavailable');


onClick事件：
click: function () {
	if (this.status() == 'available') {
	...
	}
}

已选中的方块再次click
//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();
});

计算以选中的个数
function recalculateTotal(sc)


For more details:
http://jquer.in/random-jquery-plugins-for-superior-websites/seat-charts/

引用文件：

index.html
jquery-1.11.0.min.js
jquery.seat-charts.css
jquery.seat-charts.js
style.css

auroradad

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Seat HTML

Index.html JSC Demo .container{ width: 900px; } div.seatCharts-container{ width: 500px; } div.seatCharts-row{ width: 500px; } div.seatCharts-cell { height: 50
复制链接

扫一扫