jquery.seat-charts选座

<span style="font-size:18px;"><link href="${basePath}statics/css/jquery.seat-charts.css" rel="stylesheet" type="text/css" />
<script src="${basePath}statics/js/jquery.seat-charts.js"></script>
</span>

<span style="font-size:18px;">
</span>

<span style="font-size:18px;"></span><pre name="code" class="javascript"><span style="font-size:18px;">/**座位状态对应的样式*/
var classMap = {'1' : 'choosen', '2' : 'available', '3' : 'reserved', '4' : 'unavailable'};</span>

<span style="font-size:18px;">map: [ 
<span style="white-space:pre">			</span>'ff__ff',
<span style="white-space:pre">			</span>'ff__ff',
<span style="white-space:pre">			</span>'______',
<span style="white-space:pre">			</span>'eee_ee',
<span style="white-space:pre">			</span>'eee_ee',
<span style="white-space:pre">			</span>'eee_ee',
<span style="white-space:pre">			</span>'eee_ee',
<span style="white-space:pre">			</span>'eee_ee',
<span style="white-space:pre">			</span>'eee_ee'
<span style="white-space:pre">		</span>],</span>

<span style="font-size:18px;">rows:['第1行'...]</span><span style="font-size: 18px; font-family: Arial, Helvetica, sans-serif;">//自定义</span>

<span style="font-size:18px;"></span><pre name="code" class="javascript"><span style="font-size: 18px;">columns:['1号'...]</span><span style="font-size: 18px; font-family: Arial, Helvetica, sans-serif;">//自定义</span>

<span style="font-size:18px;"></span><pre name="code" class="javascript"><span style="font-size: 18px;">seatStatusMap:{'id1' : '1', 'id2' : '2',...}//自定义</span>

<span style="font-size:18px;">function show_seat(map, rows, columns, seatIdMap, seatStatusMap){
	
	var $cart = $('#selected-seats'), //座位区
	$counter = $('#counter'), //票数
	$total = $('#total'); //总计金额
	
	var sc = $('#seat-map').seatCharts({
		map: map,
		seats: { //定义座位属性
			a : {
				classes : ''
			},
			b : {
				classes : ''
			},
			c : {
				classes : ''
			},
			d : {
				classes : ''
			}
		},
		naming : { //定义行列等信息
			top : true,
			columns: columns,
			rows: rows,
			getId  : function(character, row, column) {
				return row + column;
			},
			getLabel : function (character, row, column) {
//				return row+column;
				return '';
			}
		},
		legend : { //定义图例
			node : $('#legend'),
			items : [
				['a', 'choosen', '已选'],
				['b', 'available', '未选'],
				['c', 'reserved', '预留'],
				['d', 'unavailable', '禁用']
			]					
		},
		click: function () {
			if (this.status() == 'available' || this.status() == 'reserved' || this.status() == 'unavailable') {
				$('<li>' + this.settings.id + '</li>').attr('id', seatIdMap[this.settings.id]).appendTo($cart);
				return 'selected';
			} else if (this.status() == 'selected') {
				//删除已预订座位
				$('#' + seatIdMap[this.settings.id]).remove();
				//可选座
				return 'available';
			} 
//			else if (this.status() == 'unavailable') {
//				return 'unavailable';
//			} 
			else {
				return this.style();
			}
		},
		focus  : function() {
			if (this.status() == 'available') {
				$("#seat-info").show().html(this.settings.id);
				var cd = getMousePoint(event);
				$("#seat-info").css({"left":(cd.x+10)+'px',"top":(cd.y-30)+"px"});
				return 'focused';
			} else  {
				return this.style();
			}
		},
		blur   : function() {
			$("#seat-info").hide();
			return this.status();
		}
	});
	
//	console.log(seatStatusMap);
	$.each(seatStatusMap, function(key, value){
		sc.get(key).status(classMap[value]);
	});

}


//获取鼠标坐标位置
function getMousePoint(ev) {  
    // 定义鼠标在视窗中的位置  
    var point = {  
        x:0,  
        y:0  
    };  
   
    // 如果浏览器支持 pageYOffset, 通过 pageXOffset 和 pageYOffset 获取页面和视窗之间的距离  
    if(typeof window.pageYOffset != 'undefined') {  
        point.x = window.pageXOffset;  
        point.y = window.pageYOffset;  
    }  
    // 如果浏览器支持 compatMode, 并且指定了 DOCTYPE, 通过 documentElement 获取滚动距离作为页面和视窗间的距离  
    // IE 中, 当页面指定 DOCTYPE, compatMode 的值是 CSS1Compat, 否则 compatMode 的值是 BackCompat  
    else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {  
        point.x = document.documentElement.scrollLeft;  
        point.y = document.documentElement.scrollTop;  
    }  
    // 如果浏览器支持 document.body, 可以通过 document.body 来获取滚动高度  
    else if(typeof document.body != 'undefined') {  
        point.x = document.body.scrollLeft;  
        point.y = document.body.scrollTop;  
    }  
   
    // 加上鼠标在视窗中的位置  
    point.x += ev.clientX;  
    point.y += ev.clientY;  
   
    // 返回鼠标在视窗中的位置  
    return point;  
} </span>