Shulou(Shulou.com)06/02 Report--

How to select seats for jQuery online high-speed rail, many novices are not very clear about this. In order to help you solve this problem, the following editor will explain it in detail. People with this need can come and learn. I hope you can get something.

In addition to the online selection of seats in the cinema, we will also be exposed to the selection of seats in the cabin of airplanes, as well as bus tickets and train tickets. If one day buying train tickets also provides online seat selection, then today I will show you how to use the jQuery seat selection plug-in to complete the high-speed train seat layout, seat selection, seat pricing and other operations.

HTML

Using the same html structure, the location layout diagram is displayed on the left and the seat selection information is displayed on the right.

01 car

Seat selection information:

Number of votes:

Total: ¥0

Confirm the purchase

JQuery

To focus on the jQuery code, we still use the online seat selection plug-in: jQuery Seat Charts. First of all, arrange the seating layout of the high-speed rail car. I assume that there are a number of first-class and second-class seats in compartment 01, separated by entrances and exits. The general layout is as follows:

Map: [/ / seating chart 'ff__ff',' ff__ff','_', 'eee_ee',' eee_ee']

The above code f represents first-class seat, e represents second-class seat, and the symbol "_" indicates aisle.

Then we will define the relevant properties of the seat type:

Seats: {/ / define seat properties f: {price: 100, classes: 'first-class', category:' first class'}, e: {price: 40, classes: 'economy-class', category:' second class'}}

The above code defines the price of first and second class seats, the name of the category, and the corresponding css style. They can be called later through the data () method.

Next, we use naming to define the row and column information of the seating chart. The following top is set to true to show the top Abscissa (row), columns and rows are used to define the Abscissa (row) and ordinate (column) values, respectively, and getLabel is used to return seating information, for example: 01A represents seat 01 row A.

Naming: {/ / define rows, ranks and other information top: true, columns: ['A', 'Bao,' Che,'', 'Dumpty'], rows: ['01',' 01', '02',' 03', '04',' 06,'], getLabel: function (character, row, column) {return row+column;}

Then we use legend to define the legend, the element associated with the legend is # legend, and define the corresponding style for the seat type.

Legend: {/ / define legend node: $('# legend'), items: [['frankly,' available', 'first class'], ['eBay,' available', 'second class'], ['faded,' unavailable', 'sold']}

Finally, when you click on the location in the click seating chart outside, you can make different treatments according to the status of the current seat, including calculating the number of votes and the total amount, etc., you can refer to the description of the cinema section.

Click: function () {if (this.status () = = 'available') {/ / optional seat $(''+ this.data (). Category+'01 car'+ this.settings.label+' ¥'+ this.data () .price+'') .attr ('id',' cart-item-'+this.settings.id) .data ('seatId', this.settings.id) .appendto ($cart); / / updated votes $counter.text (sc.find (' selected') .length+1) / / calculate the total amount of $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 status () methods to set seats that are not available for sale.

/ non-optional seats sc.get (['01customers,' 04seats, '07seats,' 07seats]) have been sold. Status ('unavailable')

It is worth mentioning that when the website buys tickets very frequently, it is necessary to refresh the seating chart in time, and it is not optional if the seat has been occupied. We can use ajax to make asynchronous requests and set it to run every 10 seconds. You can refer to the following code:

SetInterval (function () {$.ajax ({type: 'get', url:' book.php', dataType: 'json', success: function (response) {/ / traverses all seats $.each (response.bookings, function (index, booking) {/ / sets sold seats to sc.status (booking.seat_id,' unavailable');});}, 10000); / / every 10 seconds

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.