jQuery在线选座位插件seat-charts js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery在线选座位插件seat-charts js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<title>jQuery在线选座位插件seat-charts</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/jquery.seat-charts.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="wrapper">
  <div class="container">
    <div id="seat-map">
      <div class="front-indicator">机头</div>
    </div>
    <div class="booking-details">
      <h3>已选中的座位 (<span id="counter">0</span>):</h3>
      <ul id="selected-seats">
      </ul>
      <p>总价: <b>$<span id="total">0</span></b></p>
      <p><button class="checkout-button">结算</button></p>      
      <div id="legend"></div>
    </div>
  </div>
</div>
<script src="js/jquery-1.11.0.min.js"></script> 
<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: [
						'ff_ff',
						'ff_ff',
						'ee_ee',
						'ee_ee',
						'ee___',
						'ee_ee',
						'ee_ee',
						'ee_ee',
						'ee_ee',
						'eeeee',
					],
					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 : [
							[ 'f', 'available',   '头等舱' ],
							[ 'e', 'available',   '经济舱'],
							[ 'f', 'unavailable', '已预定']
					    ]					
					},
					click: function () {
						if (this.status() == 'available') {
							$('<li>'+this.data().category+this.settings.label+'号座位'+'：<br/>价格：<b>$'+this.data().price+'</b> <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);
							//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>

JS代码(jquery.seat-charts.min.js):

/*! * jQuery-Seat-Charts v1.1.0 * www.sucaijiayuan.com */
console.log("\u767e\u5ea6\u641c\u7d22\u3010\u7d20\u6750\u5bb6\u56ed\u3011\u4e0b\u8f7d\u66f4\u591aJS\u7279\u6548\u4ee3\u7801");
	(function(e){
	e.fn.seatCharts=function(t){
	if(this.data("seatCharts")){
	return this.data("seatCharts")}
var n=this,r={
}
,i=[],s,o={
	animate:false,naming:{
	top:true,left:true,getId:function(e,t,n){
	return t+"_"+n}
,getLabel:function(e,t,n){
	return n}
}
,legend:{
	node:null,items:[]}
,click:function(){
	if(this.status()=="available"){
	return"selected"}
else if(this.status()=="selected"){
	return"available"}
else{
	return this.style()}
}
,focus:function(){
	if(this.status()=="available"){
	return"focused"}
else{
	return this.style()}
}
,blur:function(){
	return this.status()}
,seats:{
}
}
,u=function(t,n){
	return function(i){
	var s=this;
	s.settings=e.extend({
	status:"available",style:"available",data:n.seats[i.character]||{
}
}
,i);
	s.settings.$node=e("<div></div>");
	s.settings.$node.attr({
	id:s.settings.id,role:"checkbox","aria-checked":false,focusable:true,tabIndex:-1}
).text(s.settings.label).addClass(["seatCharts-seat","seatCharts-cell","available"].concat(s.settings.classes,typeof n.seats[s.settings.character]=="undefined"?[]:n.seats[s.settings.character].classes).join(" "));
	s.data=function(){
	return s.settings.data}
;
	s.char=function(){
	return s.settings.character}
;
	s.node=function(){
	return s.settings.$node}
;
	s.style=function(){
	return arguments.length==1?function(e){
	var t=s.settings.style;
	if(e==t){
	return}
s.settings.status=e!="focused"?e:s.settings.status;
	s.settings.$node.attr("aria-checked",e=="selected");
	n.animate?s.settings.$node.switchClass(t,e,200):s.settings.$node.removeClass(t).addClass(e);
	return s.settings.style=e}
(arguments[0]):s.settings.style}
;
	s.status=function(){
	return s.settings.status=arguments.length==1?s.style(arguments[0]):s.settings.status}
;
	(function(i,o,u){
	e.each(["click","focus","blur"],function(e,a){
	s[a]=function(){
	if(a=="focus"){
	if(t.attr("aria-activedescendant")!==undefined){
	r[t.attr("aria-activedescendant")].blur()}
t.attr("aria-activedescendant",u.settings.id);
	u.node().focus()}
return s.style(typeof i[o][a]==="function"?i[o][a].apply(u):n[a].apply(u))}
}
)}
)(n.seats,s.settings.character,s);
	s.node().on("click",s.click).on("mouseenter",s.focus).on("mouseleave",s.blur).on("keydown",function(e,n){
	return function(i){
	var s;
	switch(i.which){
	case 32:i.preventDefault();
	e.click();
	break;
	case 40:case 38:i.preventDefault();
	s=function o(e,t,r){
	var u;
	if(!e.index(r)&&i.which==38){
	u=e.last()}
else if(e.index(r)==e.length-1&&i.which==40){
	u=e.first()}
else{
	u=e.eq(e.index(r)+(i.which==38?-1:+1))}
s=u.find(".seatCharts-seat,.seatCharts-space").eq(t.index(n));
	return s.hasClass("seatCharts-space")?o(e,t,u):s}
(n.parents(".seatCharts-container").find(".seatCharts-row:not(.seatCharts-header)"),n.parents(".seatCharts-row:first").find(".seatCharts-seat,.seatCharts-space"),n.parents(".seatCharts-row:not(.seatCharts-header)"));
	if(!s.length){
	return}
e.blur();
	r[s.attr("id")].focus();
	s.focus();
	t.attr("aria-activedescendant",s.attr("id"));
	break;
	case 37:case 39:i.preventDefault();
	s=function(e){
	if(!e.index(n)&&i.which==37){
	return e.last()}
else if(e.index(n)==e.length-1&&i.which==39){
	return e.first()}
else{
	return e.eq(e.index(n)+(i.which==37?-1:+1))}
}
(n.parents(".seatCharts-container:first").find(".seatCharts-seat:not(.seatCharts-space)"));
	if(!s.length){
	return}
e.blur();
	r[s.attr("id")].focus();
	s.focus();
	t.attr("aria-activedescendant",s.attr("id"));
	break;
	default:break}
}
}
(s,s.node()))}
}
(n,o);
	n.addClass("seatCharts-container");
	e.extend(true,o,t);
	o.naming.rows=o.naming.rows||function(e){
	var t=[];
	for(var n=1;
	n<=e;
	n++){
	t.push(n)}
return t}
(o.map.length);
	o.naming.columns=o.naming.columns||function(e){
	var t=[];
	for(var n=1;
	n<=e;
	n++){
	t.push(n)}
return t}
(o.map[0].split("").length);
	if(o.naming.top){
	var a=e("<div></div>").addClass("seatCharts-row seatCharts-header");
	if(o.naming.left){
	a.append(e("<div></div>").addClass("seatCharts-cell"))}
e.each(o.naming.columns,function(t,n){
	a.append(e("<div></div>").addClass("seatCharts-cell").text(n))}
)}
n.append(a);
	e.each(o.map,function(t,s){
	var a=e("<div></div>").addClass("seatCharts-row");
	if(o.naming.left){
	a.append(e("<div></div>").addClass("seatCharts-cell seatCharts-space").text(o.naming.rows[t]))}
e.each(s.match(/[a-z_]{
	1}
(\[[0-9a-z_]{
	0,}
(,[0-9a-z_ ]+)?\])?/gi),function(n,s){
	var f=s.match(/([a-z_]{
	1}
)(\[([0-9a-z_,]+)\])?/i),l=f[1],c=typeof f[3]!=="undefined"?f[3].split(","):[],h=c.length?c[0]:null,p=c.length===2?c[1]:null;
	a.append(l!="_"?function(e){
	o.seats[l]=l in o.seats?o.seats[l]:{
}
;
	var s=h?h:e.getId(l,e.rows[t],e.columns[n]);
	r[s]=new u({
	id:s,label:p?p:e.getLabel(l,e.rows[t],e.columns[n]),row:t,column:n,character:l}
);
	i.push(s);
	return r[s].node()}
(o.naming):e("<div></div>").addClass("seatCharts-cell seatCharts-space"))}
);
	n.append(a)}
);
	o.legend.items.length?function(t){
	var r=(t.node||e("<div></div").insertAfter(n)).addClass("seatCharts-legend");
	var i=e("<ul></ul>").addClass("seatCharts-legendList").appendTo(r);
	e.each(t.items,function(t,n){
	i.append(e("<li></li>").addClass("seatCharts-legendItem").append(e("<div></div>").addClass(["seatCharts-seat","seatCharts-cell",n[1]].concat(o.classes,typeof o.seats[n[0]]=="undefined"?[]:o.seats[n[0]].classes).join(" "))).append(e("<span></span>").addClass("seatCharts-legendDescription").text(n[2])))}
);
	return r}
(o.legend):null;
	n.attr({
	tabIndex:0}
);
	n.focus(function(){
	if(n.attr("aria-activedescendant")){
	r[n.attr("aria-activedescendant")].blur()}
n.find(".seatCharts-seat:not(.seatCharts-space):first").focus();
	r[i[0]].focus()}
);
	n.data("seatCharts",{
	seats:r,seatIds:i,status:function(){
	var t=this;
	return arguments.length==1?t.seats[arguments[0]].status():function(n,r){
	return typeof n=="string"?t.seats[n].status(r):function(){
	e.each(n,function(e,n){
	t.seats[n].status(r)}
)}
()}
(arguments[0],arguments[1])}
,each:function(e){
	var t=this;
	for(var n in t.seats){
	if(false===e.call(t.seats[n],n)){
	return n}
}
return true}
,node:function(){
	var t=this;
	return e("#"+t.seatIds.join(",#"))}
,find:function(e){
	var t=this;
	var n=t.set();
	return e.length==1?function(e){
	t.each(function(){
	if(this.char()==e){
	n.push(this.settings.id,this)}
}
);
	return n}
(e):function(){
	return e.indexOf(".")>-1?function(){
	var r=e.split(".");
	t.each(function(e){
	if(this.char()==r[0]&&this.status()==r[1]){
	n.push(this.settings.id,this)}
}
);
	return n}
():function(){
	t.each(function(){
	if(this.status()==e){
	n.push(this.settings.id,this)}
}
);
	return n}
()}
()}
,set:function f(){
	var t=this;
	return{
	seats:[],seatIds:[],length:0,status:function(){
	var t=arguments,n=this;
	return this.length==1&&t.length==0?this.seats[0].status():function(){
	e.each(n.seats,function(){
	this.status.apply(this,t)}
)}
()}
,node:function(){
	return t.node.call(this)}
,each:function(){
	return t.each.call(this,arguments[0])}
,get:function(){
	return t.get.call(this,arguments[0])}
,find:function(){
	return t.find.call(this,arguments[0])}
,set:function(){
	return f.call(t)}
,push:function(e,t){
	this.seats.push(t);
	this.seatIds.push(e);
	++this.length}
}
}
,get:function(t){
	var n=this;
	return typeof t=="string"?n.seats[t]:function(){
	var r=n.set();
	e.each(t,function(e,t){
	if(typeof n.seats[t]==="object"){
	r.push(t,n.seats[t])}
}
);
	return r}
()}
}
);
	return n.data("seatCharts")}
}
)(jQuery)

CSS代码(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:#ccc;}
div.seatCharts-container{border-right:1px dotted #adadad;width:200px;padding:20px;float:left;}
div.seatCharts-legend{padding-left:0px;bottom:0;}
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:200px;overflow-y:scroll;overflow-x:hidden;width:170px;}

附件:下载该文件资源,减少时间成本(增值服务)