The movie _jquery of the online seat reservation based on jquery

First show you the effect map (support source Download OH):

View Demo Source Download

When we buy tickets online (such as movie tickets, tickets, etc.), we can choose our own seats. The developer will list the seating position on the page and the user can see the choice of seating and payment at a glance. This article takes the movie theater to buy the ticket as an example, shows you how chooses the seat, the processing chooses the seat data and so on.

Here, I introduce a jquery based online selection plug-in:jquery Seat charts, which supports custom seating types and prices, supports custom styles, supports the setting of optional seats, and also supports keyboard control seating.

Html

Let's say we go to the movie "Star Trek" of the Selection page, page layout please look at the larger image above, the left side of the page will be displayed in the #seat-map of the theater layout map, the right #booking-details display the film related information and selected seat information # Selected-seats and fare amount information, select the seat after confirmation to the payment page to complete the payment.

<div class= "Demo" > 
 <div id= "Seat-map" > 
 <div class= "front" > Screen </div>   
 </div > 
 <div class= "Booking-details" > 
 <p> film:<span> Interstellar crossing 3d</span></p> 
 < P> Time: <span>11 month 14th 21:00</span></p> 
 <p> seating:</p> 
 <ul id= "Selected-seats "></ul> 
 <p> 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> 

Css

Use CSS to beautify each element of the page, especially seating list layout, for seating status (sold, optional seats, selected seats, etc.) to set a different style, we have organized CSS code, of course, you can according to their own project page style to modify any CSS code.

. front{width:300px;margin:5px 32px 45px 32px;background-color: #f0f0f0; color: #666; text-align:center;padding:3px;bo 
rder-radius:5px;} 
. booking-details {float:right;position:relative;width:200px;height:450px} 
. 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 don't forget to load the jquery library and the plug-in: jquery Seat charts.

<script type= "Text/javascript" src= "Jquery.js" ></script> 

Next we define elements such as fare, seating area, votes, total amount, and then invoke the plugin: $ (' #seat-map '). Seatcharts ().

We set up the seating chart first, and the seats in the show room are fixed. In this case, the third row is the aisle, and the three or four row of the right seat is the exit, the last row we set up a couple of seats, then the layout of the show Hall is like this:

Aaaaaaaaaa
Aaaaaaaaaa
__________
aaaaaaaa__
Aaaaaaaaaa
Aaaaaaaaaa
Aaaaaaaaaa
Aaaaaaaaaa
Aaaaaaaaaa
Aa__aa__aa

We use the letter A to indicate the seat, with the symbol _ means empty, that is, there is no seat, of course, you can also use A,b,c to represent different levels of seating.

Then define the legend style, the key is the detective clicks the event click (): When the user clicks the seat, if the seat status is optional (available), then after clicking the seat, the seat information (several rows of seats) is added to the list of selected seats on the right, and the total votes and total amount are calculated. If the seat status is selected (selected), then clicking the seat again will remove the selected seat information from the list of seats on the right and set the status to optional; If the seating status is sold (unavailable), you may not be able to click on the seat. Finally, the sold seat number status is set to sold by using the Get () method.

The following is a detailed code:

var price = 80;  Ticket price $ (document). Ready (function () {var $cart = $ (' #selected-seats '),//seating area $counter = $ (' #counter '),//number of votes $total = $ (' #total '); Total amount var sc = $ (' #seat-map '). Seatcharts ({map: [//Seating Chart ' aaaaaaaaaa ', ' aaaaaaaaaa ', ' __________ ', ' aaaaaa Aa__ ', ' aaaaaaaaaa ', ' aaaaaaaaaa ', ' aaaaaaaaaa ', ' aaaaaaaaaa ', ' aaaaaaaaaa ', ' Aa__aa__aa ', legend : {//define 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) + ' platoon ' +t 
   his.settings.label+ ' seat </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 ') {//checked//Update quantity $counter. Text (Sc.find (' selected '). LengtH-1); 
  Update Total $total. Text (Recalculatetotal (SC)-price); 
  Delete reserved seats $ (' #cart-item-' +this.settings.id). Remove (); 
  Optional seat return ' available '; 
  else if (this.status () = = ' unavailable ') {//Sold return ' unavailable '; 
  else {return This.style (); 
 } 
 } 
 }); 
Seats sold 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 '); 
}); 
 Calculates the total amount function Recalculatetotal (SC) {var sum = 0; 
 Sc.find (' selected '). each (function () {total = Price; 
 }); 
return total; }

Description

The JQuery Seat Charts plug-in provides multiple option settings and method calls, which can be referenced at the website of the project:

Https://github.com/mateuszmarkowski/jQuery-Seat-Charts.

The above code uses jquery to achieve the online seat reservation of the theater, I hope you like.