seats
/
step2.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>剧场排座插件</title>
	<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
	<link rel="stylesheet" href="plugin/spectrum/spectrum.css">
	<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
	<script src="plugin/spectrum/spectrum.js"></script>
	<script src="plugin/jdialog/JDialog.min.js"></script>
	<script src="src/seat.js"></script>

</head>
<body>
	<div id="box">
		<h1>设置座位票价和颜色</h1>
		<h4 class="text-danger text-left">Step2：先选中要设置票价的座位，然后填写票价，选择颜色后点击“设置票价”按钮，这个动作可以重复操作N遍，全部设置完了之后点击“下一步”</h4>
	</div>

	<div class="container" style="margin-top: 10px;">

		<div class="form-inline">
			<label>票价</label>
			<input type="text" class="form-control" id="price" value="100" placeholder="票价">
			<input type="text" class="form-control" id="color" value="#cc0000" placeholder="座位颜色">
			<button class="btn btn-info" id="set-price">设置票价</button>
			<a href="step3.html" class="btn btn-success">下一步</a>
		</div>

	</div>
<script>
	try {
		var datas = JSON.parse(localStorage.getItem("seats"));
	} catch (e){}
	var seats = $.seats({
		box:"#box",
		step:2,
		datas:datas
	});

	$('#set-price').on('click', function() {
		var color = $('#color').val();
		var price = $('#price').val();
		seats.setPrice(price, color);
		//更新座位信息
		localStorage.setItem("seats", JSON.stringify(seats.getSeats()));
		JDialog.msg({type:"ok", content:"更新票价成功.", container:"#box"});
	});

	$("#color").spectrum({
		change: function(color) {
			$("#color").val(color.toHexString());
		}
	});
</script>
</body>
</html>