jQuery在线选座位插件seat-charts特效代码分享

本文实例讲述了jQuery在线选座位插件seat-charts特效。分享给大家供大家参考。具体如下：
这是一款基于JQuery实现的在线选座位插件seat-charts源码，是一款适合机票，电影票，客车票选座的jquery.seat-charts插件。点击左侧的座位即可在右侧即时显示座位信息，并且可以有计算累加的功能。
特点：支持自定义座位类型和价格，支持自定义样式，支持设置不可选的座位，也支持键盘控制选座。
运行效果图： -------------------查看效果下载源码-------------------

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的jQuery在线选座位插件seat-charts特效代码如下

<！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 classcategory: "头等舱"},e: {price : 40,classes : "economy-class", //your custom CSS classcategory: "经济舱"}},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 vacatedreturn "available";} else if （this.status（） == "unavailable"） {//seat has been already bookedreturn "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 heresc.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><div align="center" style="clear:both;font-size:12px;color:#666;font:normal 14px/24px "MicroSoft YaHei";"><p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p></div></body></html>

以上就是为大家分享的jQuery在线选座位插件seat-charts特效代码，希望大家可以喜欢。