JQuery realizes online seat selection (cinema)

We can select seats when purchasing tickets online (such as movie tickets and tickets. The developer will list the seats on the page. You can see the seats you can select and pay at a glance. This article takes cinema ticketing as an example to show you how to select a seat and process the selected data.

Here, I will introduce a jQuery-based online Seat selection plug-in: jQuery Seat Charts, which supports custom Seat types and prices and custom styles, you can set an unselectable seat or use a keyboard to control the seat.
HTML
Let's assume that we enter the seat selection page of the movie Interstellar. For the page layout, see the big picture above. The seat layout of the cinema is shown in # seat-map on the left of the page, # booking-details on the right shows the video information and the selected seat information # selected-seats and fare amount information. After selecting a seat, confirm the payment on the payment page.
 

The code is as follows:

Copy code

<Div class = "demo"> <Div id = "seat-map"> <Div class = "front"> screen </div> </Div> <Div class = "booking-details"> <P> video: <span> interstellar 3D </span> </p> <P> Time: <span> November 14 </span> </p> <P> seat: </p> <Ul id = "selected-seats"> </ul> <P> Number of Votes: <span id = "counter"> 0 </span> </p> <P> total: <B> ￥ <span id = "total"> 0 </span> </B> </p>                      <Button class = "checkout-button"> confirm purchase </button>                      <Div id = "legend"> </div> </Div> </Div> CSS

Use CSS to beautify each element on the page, especially the layout of the seat list, and set different styles for the seat status (sold, available, and Selected, we have sorted out the CSS code. Of course, you can modify any CSS code based on the style of your project page.
 

The code is as follows:

Copy code

. Front {width: 300px; margin: 5px 32px 45px 32px; background-color: # f0f0f0; color: #666; text-align: center; padding: 3px; border-radius: 5px ;} . Booking-details {float: right; position: relative; width: 200px; height: Pixel px ;} . Booking-details h3 {margin: 5px 5px 0 0; font-size: 16px ;} . Booking-details p {line-height: 26px; font-size: 16px; color: #999} . Booking-details p span {color: #666} Div. seatCharts-cell {color: # 182C4E; height: 25px; width: 25px; line-height: 25px; margin: 3px; float: left; text-align: center; outline: none; font-size: 13px ;} Div. seatCharts-seat {color: # fff; cursor: pointer;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px ;} Div. seatCharts-row {height: 35px ;} Div. SeatCharts-seat.available {background-color: # B9DEA0 ;} Div. SeatCharts-seat.focused {background-color: #76B474; border: none ;} Div. SeatCharts-seat.selected {background-color: # E6CAC4 ;} Div. SeatCharts-seat.unavailable {background-color: #472B34; cursor: not-allowed ;} Div. seatCharts-container {border-right: 1px dotted # adadad; width: 400px; padding: 20px; float: left ;} Div. seatCharts-legend {padding-left: 0px; position: absolute; bottom: 16px ;} Ul. seatCharts-legendList {padding-left: 0px ;} . SeatCharts-legendItem {float: left; width: 90px; margin-top: 10px; line-height: 2 ;} Span. seatCharts-legendDescription {margin-left: 5px; line-height: 30px ;} . Checkout-button {display: block; width: 80px; height: 24px; line-height: 20px; margin: 10px auto; border: 1px solid #999; font-size: 14px; cursor: pointer} # Selected-seats {max-height: 150px; overflow-y: auto; overflow-x: none; width: 200px ;} # Selected-seats li {float: left; width: 72px; height: 26px; line-height: 26px; border: 1px solid # d3d3d3; background: # f7f7f7; margin: 6px; font-size: 14px; font-weight: bold; text-align: center} JQuery

This example is based on jQuery, so do not forget to first load the jquery library and Seat selection plug-in: jQuery Seat Charts.
 

The code is as follows:	Copy code
<Script type = "text/javascript" src = "jquery. js"> </script> <Script type = "text/javascript" src = "jquery. Seat-charts.min.js"> </script>

Next, we define elements such as fare, seat area, number of votes, and total amount, and then call the plug-in: $ ('# seat-map'). seatCharts ().
We first set the seat chart. The seats in a screening room are fixed. In this example, the third row is the aisle, and the right side of the third and fourth rows is the exit. In the last row, we set up a couple's seat. The layout of the screening room is as follows:

The code is as follows:	Copy code
Aaaaaaaaaa Aaaaaaaaaa __________ Aaaaaaaa __ Aaaaaaaaaa Aaaaaaaaaa Aaaaaaaaaa Aaaaaaaaaa Aaaaaaaaaa Aa _ aa

We use the letter "a" to indicate the seats. The symbol "_" indicates that there are no seats. Of course, you can also use a, B, and c to represent seats of different levels.
Then define the legend style. The key is the click event click (): When a user clicks a seat, if the seat status is optional (available), after clicking the seat, add the seat information (several rows) to the selected seat list on the right, and calculate the total number of votes and total amount. If the seat status is selected, click the seat again, the selected seat information is deleted from the right-side seat list, and the status is set to optional. If the seat status is sold (unavailable), you cannot click the seat. Finally, use the get () method to set the status of the sold seat number to sold. The following code details:

The code is as follows:

Copy code

Var price = 80; // fare $ (Document). ready (function (){ Var $ cart = $ ('# selected-seats'), // seat area $ Counter = $ ('# counter'), // number of votes $ Total = $ ('# total'); // total amount      Var SC = $ ('# seat-map'). seatCharts ({ Map: [// seat chart 'Aaaaaaaaa ', 'Aaaaaaaaa ', '__________', 'Aaaaaaaa __', 'Aaaaaaaaa ', 'Aaaaaaaaa ', 'Aaaaaaaaa ', 'Aaaaaaaaa ', 'Aaaaaaaaa ', 'AA _ aa' ], Legend: {// define the legend Node: $ ('# Legend '), Items :[ ['A', 'available', 'optional seat '], ['A', 'unavailable', 'Sold ']             ]                     }, Click: function () {// click event If (this. status () = 'available') {// optional seat $ ('<Li>' + (this. settings. row + 1) + ''+ this. settings. label + '</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) + price );                              Return 'selected '; } Else if (this. status () = 'selected') {// selected // Update quantity $ Counter. text (SC. find ('selected'). length-1 ); // Update total $ Total. text (recalculateTotal (SC)-price );                          // Delete the reserved seat $ ('# Cart-item-' + this. settings. id). remove (); // Optional seat Return 'available '; } Else if (this. status () = 'unavailable') {// sold Return 'unavailable '; } Else { Return this. style ();             }         } }); // Sold seats SC. get (['1 _ 2', '4 _ 4', '4 _ 5', '6 _ 6', '6 _ 7', '8 _ 5 ', '8 _ 6', '8 _ 7', '8 _ 8', '10 _ 1', '10 _ 2']). status ('unavailable ');          }); // Calculate the total amount Function recalculateTotal (SC ){ Var total = 0; SC. find ('selected'). each (function (){ Total + = price; });              Return total; }

Description

The jQuery Seat Charts plug-in provides multiple options for setting and calling methods. For details, refer to the official website of the project: https://github.com/mateuszmarkowski/jquery-seat-charts.
Next, helloweba will provide you with more application examples of jQuery Seat Charts. We can use this plug-in to apply it to aircraft Seat selection, train/vehicle Seat selection, and conference and event auditorium Seat selection, restaurant selection, etc. For more highlights, please pay attention to this site.