jQuery在线选座插件座位图特效代码分享

本文阐述了座位图插件在jQuery在线座位选择中的特殊作用。分享给大家参考。具体如下：这是一个基于JQuery的在线选座插件seat-charts源代码，是一个适用于机票、电影票、公交车票的jquery.seat-charts插件。点击左侧座位，即时显示右侧座位信息，并具有计算累加功能。特点：支持用户自定义座椅类型和价格，支持用户自定义样式，支持设置非选装座椅，支持键盘控制座椅选择。运行渲染：查看效果并下载源代码。

提示：如果浏览器工作不正常，可以尝试切换浏览模式。jQuery在线选座插件座位图的特效代码分享给大家如下

！doctype htmlhtmlheadtitlejQuery在线选座位插件座位图/标题元http-equiv='内容-类型' Content=' text/html；charset=utf-8' /link rel='样式表'类型=' text/CSS ' href=' CSS/jquery。座位表。CSS ' link rel='样式表'类型=' text/CSS ' href=' CSS/style。CSS '/headdydiv class=' wrapper ' div class=' container ' div id=' seat-map ' div class=' front-indicator '机头/div/div class='预订-详情h3已选中的座位(span id=' counter ' 0/span):/H3 ul id=' selected-seats '/ul p总价： $ span id=' total ' 0/span/p pbutton class=' check out-button '结算/button/p div id=' legend '/div/div/div脚本src=' http : js/jquery-1。11 .0 .量滴js '/script script src=' http : js/jquery。座位表。量滴js '/script var first seat label=1；$(文档)。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 '，)，seats: { f: { price : 100，classes : '头等舱',//您的自定义CSS类类别： '头等舱}，e: {价格： 40，类别： '经济舱',//您的自定义CSS类类别： '经济舱} },命名： { top : false，getLabel :函数（字符、行、列){返回firstSeatLabel }，}，图例： { node : $('#legend ')，items : [ [ 'f '，'可用','头等舱]，[ 'e '，'可用','经济舱]，[ 'f '，'不可用','已预定] ] },单击：函数(){ if(this。status()==' available '){ $(' Li ' this。数据()."类别this.settings.label "号座位：br/价格：$' this.data().price ' a href=' # ' class=' cancel-cart-item '[删除]/a/li ').attr('id '，' cart-item-' this.settings.id).数据(' seatId '，this.settings.id).appendo($ cart)；$计数器。文本(sc。查找('选定').长度1);$total.text(重新计算Total(sc) this.data().价格);返回"选定";} else if(这个。status()==' selected '){//更新计数器$计数器。文本(sc。查找('选定').长度-1);//和total $total.text(重新计算Total(sc)-this.data().价格);//从我们的购物车中删除商品$(“# cart-item-”这个。设置。id ).移除();//座位已空出返回"可用";} else if (this.status()=="不可用"){//座位已预订返回"不可用";} else {返回此。style()；} } });//这将处理"[取消]"链接点击$(“选定座位数”).打开('点击','。取消-购物车-商品'，函数(){//我们只需在合适的座位上触发点击事件，这样就不用重复这里的逻辑sc.get($(this).父母(' li:first ').数据('西雅图')。单击();});//让我们假设一些座位已经被预订了sc.get(['1_2 '，' 4_1 '，' 7_1 '，' 7_2']).状态("不可用");});函数重新计算总成本(sc){ var total=0；//基本上找到每个选定的座位，并对其价格sc.find('选定')求和。每个（函数(){ total=this.data().价格；});退货总额；}/script div align=' center ' style=' clear : both；font-size :12 pxcolor : # 666 font : normal 14px/24px ' MicroSoft YaHei '；p适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗/p/div/body/html以上就是为大家分享的jQuery在线选座位插件座位图特效代码，希望大家可以喜欢。