Seat base on jquery, you need to include js file into your HTML as following

<script src="js/jquery.js"></script>
<script src="js/jquery.seat.js"></script>

Initialize the seat without options

$("#main").seat();

You can customize each seat style by setting the template

$("#main").seat({
tpl:'<div style="background-color: black; 
width: 20px; height: 20px; ">
</div>'});

Setting background color for the whole seat map area and the margin to top & left

$("#main").seat({bgcolor:'#000',totop:0,toleft:0});

Push some data into data option

$("#main").seat({data:{
		area:{
			fnames:"Stand 12",
			s:[{"v": "1,0,0,7,44,1,1,1.00,0,0,0,"},{
				"v": "2,0,0,7,39,1,2,1.00,0,0,0,"},{
				"v": "3,0,0,8,44,2,1,1.00,0,0,0,"}
				]
			}
		}});

Data structure of "v" parameter can be like this

Setting the space between two seats. When you mouse over a seat a title can show you some information.

$("#main").seat({space:25,title:true});

Here i would like to make a policy for selecting seats, but the current version(0.6) just support limiting amount of selected seat

$("#main").seat({limit:6});

We can assign a color to a price so that people can recognize a price by the color.

$("#main").seat({
		colorprice:['#FFFF00','#0101DF',
				'#3ADF00','#FA5858']
		});

You can design you seat images, we need five seat class for this plugin, 'selected' class for a selected seat, 'lock' for a locked seat,'tao' for some special ticket such as the season ticket,'sold' which have been sold,'available' for the available seat

$("#main").seat(
		seatcls:{'selected':'selected',
		'available':'available',
		'lock':'lock',
		'sold':'sold',
		'tao':'tao'}
		});

After clicking or touching on a seat, plugin will tell you a result, and here is a returning function. The function has two parameter, first one is an arry, it store some selected seat data, second is the current seat you have operated

$("#main").seat(result:function(da,re){});

You can synchronize the front data with backend in a setting time, here we still not use HTML 5 API such as scoket, but we will do that in a later version.If the interval is 0 we don't synchronize, otherwise we retrieve some new data with the url

$("#main").seat(update:{
			interval:0,
			url:'js/update.json'});