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中文網其他相關文章！