High-iron version _jquery based on jquery for online choice of seats

The effect chart shows:

View Demo Source Download

In addition to the movie theater online selection, we will also contact the aircraft cabin to choose seats, of course, there are car ticket train seats. If one day to buy train tickets also provide online selection, then today I would like to tell you how to use the jquery selection of Plug-ins to complete the train seat layout, selection, different levels of seat pricing operations.

Html

As in the previous article: jquery Online selection seat (theater), we use the same HTML structure, the left side of the layout map, display the right side of the information.

Related CSS code please download demo Source view, this article is no longer detailed.

<div class= "Container" > 
 <div id= "Seat-map" > 
 <div class= "front" >01 vehicles </div> 
 < /div> 
 <div class= "Booking-details" > 
  
 

Jquery

Focus on the jquery code, we still use the online selection plug-in: JQuery Seat charts. First of all arrange the seat layout of the high-speed train, I assume that there are first-class seats and second-class seats in compartment No. 01, the middle through the entrance channel separated by the general layout as follows:

Map: [//Seating Chart 
 ' ff__ff ', 
 ' ff__ff ', 
 ' ___ ', 
 ' eee_ee ', 
 ' eee_ee ', 
 ' eee_ee ', 
 ' Eee_ee ', 
 ' Eee_ee ', 
 ' Eee_ee ' 

The above code F represents a first-class seat, E is a second-class block, the symbol "_" means aisle.

Then we want to define the related attributes of the seating type:

Seats: {//define seating Properties 
 f: { 
 price:100, 
 classes: ' First-class ', 
 Category: ' The first-class ' 
 }, 
 e: { 
 PRICE:40, 
 classes: ' Economy-class ', 
 Category: ' Second-seat ' 
 }  

The code above defines the price, category name, and corresponding CSS style for the first-class and second-class seats. They can be invoked later via the data () method.

Next we use naming to define the row and column information of the seating chart, and the following top set to TRUE indicates that the horizontal coordinate (row) is displayed, and columns and rows are used to define the values of the horizontal (rows) and ordinate (columns), Getlabel used to return seat information, For example: 01A means 01 row a block.

Naming: {//define the ranks and other information 
 top:true, 
 columns: [' A ', ' B ', ' C ', ', ' D ', ' F '], 
 rows: [' 01 ', ' 02 ', ', ', ' 03 ', ' 04 ', ' 05 ', ' 0 6 ', ' ', ', ', ', ', 
 getlabel:function (character, row, column) {return 
 row+column; 
 } 

Then we use legend to define the legend, the corresponding element of the legend is #legend, and the style of the seat type is defined.

Legend: {//define legend 
 node: $ (' #legend '), 
 items: [ 
 [' F ', ' available ', ' first-class '], 
 [' E ', ' available ', ' second-class ' ], 
 [' F ', ' unavailable ', ' sold ']] 
   

Finally, when you click on the position in the seating chart, according to the status of the current seat to make a different treatment, including the calculation of votes and amount of total, you can refer to the description of the theater.

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); 
 Update the number of votes 
 $counter. Text (Sc.find (' selected '). length+1); 
 Calculates the total amount 
 $total. Text (Recalculatetotal (SC) +this.data (). Price); 
 Return ' selected '; 
 } else if (this.status () = = ' selected ') {//Selected 
 $counter. Text (Sc.find (' selected '). length-1); 
 $total. Text (Recalculatetotal (SC)-this.data (). Price); 
 Delete reserved seats 
 $ (' #cart-item-' +this.settings.id). Remove (); 
 Return ' available '; 
 } else if (this.status () = = ' unavailable ') {//Sold 
 //Sold return 
 ' unavailable '; 
 } else { 
 return This.style (); 
 } 

Finally, we use the Get () and the status () method to set the seats that have been sold that are not available.

An optional seat has been sold

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

SetInterval (function () { 
 $.ajax ({ 
 type: ' Get ', 
 URL: ' book.php ', 
 dataType: ' JSON ', 
 success: Function (response) { 
 //traverse All seats 
 $.each (response.bookings, function (index, booking) { 
 //Set the sold seat status to sold 
 sc.status (booking.seat_id, ' unavailable '); 
 }); 
 } 
 }; 
}, 10000; Every 10 seconds

The above is the introduction of this article based on jquery online selection of the high iron version, I hope you like.