Detailed explanation of the use of jQuery plug-in seat-charts (with code)

This time I bring you a detailed explanation of the use of the jQuery plug-in seat-charts (with code). What are the precautions for the detailed explanation of the use of the jQuery plug-in seat-charts. The following is a practical case, let's take a look.

This is an online seat selection plug-in seat-charts source code implemented based on JQuery. It is a jquery.seat-charts plug-in suitable for seat selection for air tickets, movie tickets, and bus tickets. Click on the seat on the left to instantly display the seat information on the right, and there is a function to calculate the total.

Features: Supports custom seat types and prices, supports custom styles, supports setting non-selectable seats, and also supports keyboard control for seat selection.
Operation renderings:                                                                                                                                                                                                                  

Tips: If the browser cannot run normally, you can try switching the browsing mode.
The jQuery online seat selection plug-in seat-charts special effects code shared with everyone is as follows

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、傲游、搜狗、世界之窗. 

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

jQuery implements a collection of special effects for text buttons in forms

detailed explanation of the steps for jQuery to implement a table with checkboxes

The above is the detailed content of Detailed explanation of the use of jQuery plug-in seat-charts (with code). For more information, please follow other related articles on the PHP Chinese website!