jquery Online selection seat reservation (high-speed rail version)

In addition to the movie theater online selection, we also have access to the aircraft cabin selection, of course, there are car ticket train vote. If one day to buy train tickets also provide online seat selection, then today I would like to introduce how to use the jquery optional plug-in to complete high-speed train seat layout, seat selection, different levels of the price of seats and other operations.

Click here to view demo
Html

The same as the previous article: jquery online seat reservation (movie), we use the same HTML structure, the left side of the layout map, the right side of the selection of information related to display. Related CSS code please download the demo Source view, this article is no longer detailed.

<Divclass= "Container">     <DivID= "Seat-map">         <Divclass= "Front">01 Cars</Div>     </Div>     <Divclass= "Booking-details">         <H3>Seat selection Information:</H3>         <ulID= "Selected-seats"></ul>         <P>Number of votes:<spanID= "Counter"></span></P>         <P>Total: ￥<spanID= "Total">0</span></P>                              <Buttonclass= "Checkout-button">Confirm Purchase</Button>         <DivID= "Legend"></Div>     </Div> </Div> 

< Span class= "Html__tag_start" > < Span class= "Html__attr_value" > < Span class= "Html__tag_start" > < Span class= "Html__tag_end" >&NBSP;         

Jquery

Focus on the jquery code, we still use the online selection plugin: jquery Seat Charts. First arrange the high-speed rail car seat layout, I assume that in the number No. 01 compartment, there are a number of second-class seats, in the middle through the entrance channel separated, the approximate layout is as follows:

' Ff__ff ' , ' ff__ff ', ' ___ ', ' Eee_ee ',                         ' Eee_ee ',     ' Eee_ee ',     ' Eee_ee ',     ' Eee_ee ',      ' Eee_ee '

The above code, F, represents a class, E is a two-seater, and the symbol "_" represents the aisle.

Then we want to define the relevant properties of the seat type:

 seats: {//  Define seat properties   f: {price:  100 ' first-class '  Category:  '  ' second seat ' 

The above code defines the price, category name, and corresponding CSS style for the top and second seats. They can be called later through the data () method.

Next we use naming to define the row and column information of the seat map, the following top set to True indicates the top horizontal (row), columns and rows are used to define the horizontal axis (row) and ordinate (column) values, Getlabel used to return the seat information, Such as: 01A represents 01 row a block.

 naming: {//  define columns and other information  top: true   ' A ', ' B ', ' C ', ', ' D ', ' F '  ' n ', ' A ', ' ', ' ', ' ', ' ', ' ', ' ' ', ' ' ', ' ' ', ' ', ' ', ' ', ' ', ' ' 

We then use legend to define the legend, the element associated with the legend is #legend, and the corresponding style is defined for the seat type.

node: $ (' #legend '), items: [' f ', ' available ', ' Class A '], ' e '                           , ' available ',   '         second seat ', ' F ', ' unavailable ', ' sold                     ']

Finally, when you click on the position in the seat map outside, according to the status of the current seat to make different processing, including counting the number of votes and the total amount, you can refer to the description of the cinema chapter.

Click:function () {     if( This. Status () = = ' available ') {//Optional Seat$ (' <li> ' + This. Data (). category+ ' <br/>01 car ' + This. settings.label+ ' <br/>￥ ' + This. Data (). price+ ' </li> '). attr (' id ', ' cart-item-' + This. settings.id). Data (' Seatid ', This. settings.id). AppendTo ($cart); //Number of tickets updated$counter. Text (Sc.find (' selected '). length+1); //Calculate Total Amount$total. Text (Recalculatetotal (SC) + This. Data (). Price); return' Selected '; } Else if( This. Status () = = ' selected ') {//is selected$counter. Text (Sc.find (' selected '). length-1); $total. Text (Recalculatetotal (SC)- This. Data (). Price); //Delete a reserved seat$ (' #cart-item-' + This. settings.id). Remove (); return' Available '; } Else if( This. Status () = = ' unavailable ') {//has been sold        //has been sold        return' Unavailable '; } Else {         return  This. style (); } }, 

                 

Finally, we use the Get () and status () methods to set the seats that are not available for sale.

//

It is worth mentioning that when the site purchase tickets very frequently need to pay attention to the timely refresh of the seat map, if the seat has been preempted is not optional. We can use AJAX to make asynchronous requests, and the settings run every 10 seconds, and you can refer to the following code:

 setinterval (function   () {$.ajax ({type         :  ' get '  ' book.php '  ' json '  funct Ion   (response) { //  traverse all seats  $.each (response.bookings, function   (index, booking) { //  Set the status of the sold seats             Set to sold  Sc.status (booking.seat_id, ' unavailable ' );         }); }     }); },  10000); //  every 10 seconds  

Finally, I compiled the source and provide download, welcome to download the Source: Click here to download

jquery Online selection seat reservation (high-speed rail version)