jQuery插件seat-charts使用详解（附代码）

这次给大家带来jQuery插件seat-charts使用详解（附代码），jQuery插件seat-charts使用详解的注意事项有哪些，下面就是实战案例，一起来看一下。

这是一款基于JQuery实现的在线选座位插件seat-charts源码，是一款适合机票，电影票，客车票选座的jquery.seat-charts插件。点击左侧的座位即可在右侧即时显示座位信息，并且可以有计算累加的功能。

特点：支持自定义座位类型和价格，支持自定义样式，支持设置不可选的座位，也支持键盘控制选座。
运行效果图：                   

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

nbsp;html>


<title>jQuery在线选座位插件seat-charts</title>
<meta>
<link>
<link>


<p>
 </p><p>
 </p><p>
  </p><p>机头</p>
 
 <p>
  </p><h3 id="已选中的座位-span-span">已选中的座位 (<span>0</span>):</h3>
  

  

  

总价: $0

  

结算

     

    <script></script>  <script></script>  <script> var firstSeatLabel = 1; $(document).ready(function() { var $cart = $(&#39;#selected-seats&#39;), $counter = $(&#39;#counter&#39;), $total = $(&#39;#total&#39;), sc = $(&#39;#seat-map&#39;).seatCharts({ map: [ &#39;ff_ff&#39;, &#39;ff_ff&#39;, &#39;ee_ee&#39;, &#39;ee_ee&#39;, &#39;ee_&#39;, &#39;ee_ee&#39;, &#39;ee_ee&#39;, &#39;ee_ee&#39;, &#39;ee_ee&#39;, &#39;eeeee&#39;, ], seats: { f: { price : 100, classes : &#39;first-class&#39;, //your custom CSS class category: &#39;头等舱&#39; }, e: { price : 40, classes : &#39;economy-class&#39;, //your custom CSS class category: &#39;经济舱&#39; } }, naming : { top : false, getLabel : function (character, row, column) { return firstSeatLabel++; }, }, legend : { node : $(&#39;#legend&#39;), items : [ [ &#39;f&#39;, &#39;available&#39;, &#39;头等舱&#39; ], [ &#39;e&#39;, &#39;available&#39;, &#39;经济舱&#39;], [ &#39;f&#39;, &#39;unavailable&#39;, &#39;已预定&#39;] ] }, click: function () { if (this.status() == &#39;available&#39;) { $(&#39;<li>&#39;+this.data().category+this.settings.label+&#39;号座位&#39;+&#39;：<br/>价格：<b>$&#39;+this.data().price+&#39; <a href="#" class="cancel-cart-item">[删除]&#39;) .attr(&#39;id&#39;,&#39;cart-item-&#39;+this.settings.id) .data(&#39;seatId&#39;, this.settings.id) .appendTo($cart); $counter.text(sc.find(&#39;selected&#39;).length+1); $total.text(recalculateTotal(sc)+this.data().price); return &#39;selected&#39;; } else if (this.status() == &#39;selected&#39;) { //update the counter $counter.text(sc.find(&#39;selected&#39;).length-1); //and total $total.text(recalculateTotal(sc)-this.data().price); //remove the item from our cart $(&#39;#cart-item-&#39;+this.settings.id).remove(); //seat has been vacated return &#39;available&#39;; } else if (this.status() == &#39;unavailable&#39;) { //seat has been already booked return &#39;unavailable&#39;; } else { return this.style(); } } }); //this will handle "[cancel]" link clicks $(&#39;#selected-seats&#39;).on(&#39;click&#39;, &#39;.cancel-cart-item&#39;, function () { //let&#39;s just trigger Click event on the appropriate seat, so we don&#39;t have to repeat the logic here sc.get($(this).parents(&#39;li:first&#39;).data(&#39;seatId&#39;)).click(); }); //let&#39;s pretend some seats have already been booked sc.get([&#39;1_2&#39;, &#39;4_1&#39;, &#39;7_1&#39;, &#39;7_2&#39;]).status(&#39;unavailable&#39;); }); function recalculateTotal(sc) { var total = 0; //basically find every selected seat and sum its price sc.find(&#39;selected&#39;).each(function () { total += this.data().price; }); return total; } </script>

适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jQuery实现表单里文字按钮特效合集

jquery实现带复选框表格步骤详解

以上是jQuery插件seat-charts使用详解（附代码）的详细内容。更多信息请关注PHP中文网其他相关文章！