先给大家展示效果图（支持源码下载哦):

查看演示源码下载

我们在线购票时（如电影票、车票等)可以自己选座。开发者会在页面上列出座次席位，用户可以一目了然的看到可以选择的座位及支付。本文以电影院购票为例，为您展示如何选座、处理选座数据等。

在这里，我给大家介绍一款基于jQuery的在线选座插件：jQuery座位图，它支持自定义座位类型和价格，支持自定义样式，支持设置不可选的座位，也支持键盘控制座位。

超文本标记语言

我们假设进入电影《星际穿越》 的选座页面，页面布局请看上面的大图，页面左边将在#座位图中显示影院的座位布局图，右侧#预订-详细信息显示影片相关信息以及选中的座位信息选定座位数和票价金额信息，选择座位后确认到支付页面完成支付。

div class='demo' div id='座椅地图div class='front '屏幕/div/div class='预订-详细信息p影片：span星际穿越3D/span/p p时间：span11月14日21:00/span/p座位：/p ul id='选定座位/ul p票数：span id='counter'0/span/p p总计：span id=' total ' 0/span/p button class=' check out-button '确定购买/button div id='图例/div /div /div CSS

使用半铸钢钢性铸铁(铸造半钢)将页面中的各个元素美化，尤其是座位列表布局，为座位状态（已售出、可选座位、已选座位等)设置不同的样式，我们已经整理好半铸钢钢性铸铁(铸造半钢)代码，当然你可以根据自己项目页面风格自己修改任意半铸钢钢性铸铁(铸造半钢)代码。前{ width : 300 pxmargin : 5px 32px 45px 32px背景-颜色： # f0f 0；颜色： # 666文本对齐：中心；padd : 3px border-半径： 5px} .预订-详情{右侧浮动：相对位置：宽度宽度：200像素高度： 450像素；} .预订-详细信息H3 { margin : 5px 5px 0 0 font-size : 16px；} .预订-详情p {行高：26 pxfont-size :16 pxcolor:#999} .预订-详情p span { color : # 666 } div。座位图-单元格{ color : # 182 c4e高度： 25px宽度： 25px线高： 25pxmargin: 3px向左浮动：文本对齐：中心；大纲：无；font-size : 13px} div。座椅图表-座椅{ color : # fff光标：指针；-web套件-边框-半径：5 px-moz-边界-半径：5 px边界半径： 5px} div。座椅图表-排{高度： 35px} div。座位表-座位。可用{底色： # B9 DeA 0；} div。座位表-座位。聚焦{底色： # 76b 474border:无；} div。座位表-座位。选中{底色： # E6cac 4；} div。座位表-座位。不可用{背景色： # 472 b34不允许cursor:} div。座位图-集装箱{边框-右侧： 1px虚线#阿达达宽度： 400像素；padding: 20px向左浮动：} div。座椅图表-图例{衬垫-左侧： 0px绝对位置：bottom: 16px} ul。座椅图表-LegendList { padding-left : 0px；} .座椅图表-LegenDitem { float :左侧；宽度：90 px页边距-top : 10px；线高： 2;} span。座椅图表-legendDescription { margin-left : 5px；线高： 30px} .结账按钮{显示：块；宽度：80 px高度：24px线高：20 px余量： 10px自动；border:1px固体# 999;font-size : 14px光标：指针} #选定座位{最大高度： 150 px溢出-y:自动；溢出-x:无；宽度： 200像素；} #选定座位li { float:left宽度：72 px高度：26 px线高：26 pxborder:1px固体# d3d 3d 3 background : # f7f 7；margin :6 px font-size :14 px；字体粗细：加粗；文本对齐：center}jQuery

本实例基于jQuery，所以别忘了要先加载jquery库和选座插件：jQuery座位图。

Script type=' text/JavaScript ' src=' http : jquery . js '/Script Script type=' text/JavaScript ' src=' http : jquery . seat-charts . min . js '/Script接下来，我们定义票价、座位区、票数和总金额等元素，然后调用插件：$('#seat-map ')。座位图()。

我们先设置座位表，一个礼堂的座位是固定的。在这个例子中，第三排是过道，第三和第四排的右边空间是出口。在最后一排，我们设置了一个情侣座椅，所以礼堂的布局如下：

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

我们用字母A表示座位，用符号_表示空座，也就是没有座位。当然也可以用A、B、C等来代表不同档次的座位。

然后定义图例样式，关键是侦探点击事件click():当用户点击座位时，如果座位状态为可用，那么在点击座位后，将座位信息(几行和几个座位)添加到右侧选中的座位列表中，并计算投票总数和总金额；如果选择了座位状态，再次点击该座位，所选座位信息将从右侧座位列表中删除，状态设置为可选；如果座位状态不可用，您不能点击座位。最后，使用get()方法将已售座位号状态设置为已售。

以下是详细代码：

var价格=80；//票价$(文件)。ready(function(){ var $ cart=$(' # selected-seats ')，//座位区$counter=$('#counter ')，//票数$ total=$(' # total ')；//总额var sc=$ ('#座位图')。座位图({ map : [//座位图' aaaaaaaaaa '，' aaaaaaaaaa '，' _ _ _ _ _ '，' aaaaaaaaaa _ _ '，' aaaaaaaa '。Aaaaaaaaaa '，' aaaaaaaaaa '，' aa _ _ aa _ _ aa']，图例3360 {//定义图例node3360 $ ('# legend ')，items: [['a '，'可用'，['a '，'不可用'，'已售']]}，click : function(){//click event if(this。status()==' available '){//选择$(' Li '(this . settings . row 1)' this . settings . label '/Li ')。attr('id '，' cart-item-' this.settings.id)。数据(' seatId '，this.settings.id)。appendo($ cart)；$ counter . text(sc . find(' selected ')。长度1)；$total.text(重新计算总价格)；返回“选定”；} else if(这个。status()==' selected '){//selected//updated quantity $ counter . text(sc。查找('选定')。长度-1)；//更新总额$ total.text(重新计算总额(sc)-价格)；//删除预留座位$ ('# cart-item-'this。settings.id)。移除()；//选择return ' available} else if(这个。status ()==“不可用”){//已售退货“不可用”；} else { return this . style()；} } });//已售座位sc.get (['1 _ 2 '，' 4 _ 4 '，' 4 _ 5 '，' 6 _ 6 '，' 6 _ 7 '，' 8 _ 5 '，' 8 _ 6 '，' 8 _ 7 '，})；//计算总额函数重新计算总额(sc){ var total=0；sc.find('选定')。每个(函数(){ total=price});退货总额；}描述

jQuery座位图插件提供了多个选项设置和方法调用。详见项目官网：

https://github.com/mateuszmarkowski/jQuery-Seat-Charts。

以上代码使用jquery实现了在线选座预约的影院章节。希望大家喜欢。