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

This article mainly explains "how to use jQuery to realize the function of online seat selection and reservation in cinema". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "how to use jQuery to realize the function of online seat selection and reservation in cinema".

The code is as follows:

HTML

Let's assume that we go to the seating selection page of the movie "Interstellar". For the layout of the page, please see the larger picture above. On the left side of the page, the seating layout of the cinema will be displayed in # seat-map. On the right, # booking-details will display the relevant information about the movie, as well as the selected seating information # selected-seats and ticket amount information. After selecting the seat, confirm until the payment page is completed.

Screen

Movie: interstellar 3D

Time: 21:00 on November 14th

Seats:

Number of votes: 0

Total: ¥0

Confirm the purchase

CSS

Use CSS to beautify the various elements in the page, especially the seat list layout, set different styles for the seat status (sold, optional seats, selected seats, etc.), we have sorted out the CSS code, of course, you can modify any CSS code according to your own project page style.

Front {width: 300pxbox margin: 5px 32px 45px 32px booking-details 5px 5px color: # f0f0f0; booking-details: # 666ash textline align: center;padding: 3pxborderhorse radius: 5px;} .booking-details {float: right;position: relative;width:200px;height: 450px;} .booking-details h4 {margin: 5px 5px 00; font-size:16px;} .booking-details p {line-height:26px; font-size:16px Color:#999} .booking-details p span {color:#666} p.seatCharts-cell {color:# 182C4Eposition height: 25pxposition width: 25pxposition height: 25pxposition margin: 3pxposition float: left;text-align: center;outline: none;font-size: 13px;} p.seatCharts-seat {color:# fff;cursor: pointer;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius: 5px;} p.seatCharts-row {height: 35px } p.seatCharts-seat.available {background-color: # B9DEA0;} p.seatCharts-seat.focused {background-color: # 76B474 borderline: none;} p.seatCharts-seat.selected {background-color: # E6CAC4;} p.seatCharts-seat.unavailable {background-color: # 472B34 political cursor: not-allowed;} p.seatCharts-container {border-right: 1px dotted # adadad;width: 400pxcontrol padding: 20pxscape float: left;} p.seatCharts-legend {padding-left: 0pxscape position: absolute;bottom: 16px } ul.seatCharts-legendList {padding-left: 0px;}. SeatCharts-legendItem {float:left; width:90px;margin-top: 10px lineline ownership height: 2;} span.seatCharts-legendDescription {margin-left: 5pxash lineweight height: 30px;} .checkout-button {display: block;width:80px; height:24px; line-height:20px;margin: 10px auto;border:1px solid # 999fontscape selected-seats size: 14px; cursor:pointer} # selected-seats {max-height: 150pxoverpower flow: 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 seat selection plug-in: jQuery Seat Charts.

Next, we define elements such as ticket price, seating area, ticket count, and total amount, and then call the plug-in: $('# seat-map'). SeatCharts ().

Let's set up the seating chart first. the seats in a screening hall are fixed. In this example, the third row is the aisle, and the space on the right side of the third or fourth row is the exit, and in the last row we have a couple seat, so the layout of the screening hall is as follows:

Aaaaaaaaaa aaaaaaaaaa _ aaaaaaaa__ aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa aa__aa__aa

We use the letter a for seats and the symbol _ for empty seats, that is, there are no seats. Of course, you can also use the letter a, etc., to represent different levels of seats.

Then define the legend style, the key is the detective click event click (): when the user clicks on the seat, if the seat status is optional (available), then after clicking on the seat, the seat information (several rows of seats) is added to the selected seat list on the right, and the total number of votes and the total amount are calculated. If the seat status is selected (selected), after clicking the seat again, the selected seat information will be removed from the seat list on the right and the status setting is optional; if the seat status is sold (unavailable), the seat cannot be clicked. Finally, use the get () method to set the sold seat number status to sold. The following is the detailed code:

Var price = 80; / / ticket price $(document) .ready (function () {var $cart = $('# selected-seats'), / / seating area $counter = $('# counter'), / / tickets $total = $('# total')) / / Total amount var sc = $('# seat-map'). SeatCharts ({map: [/ / seat chart 'aaaaaaaaaa',' aaaaaaaaaa','_', 'aaaaaaaa__',' aaaaaaaaaa', 'aa__aa__aa'], legend: {/ / define legend node: $(' # legend') Items: [['available',' optional seat'], ['AAA,' unavailable', 'sold']}, click: function () {/ / Click event if (this.status () = = 'available') {/ / optional seat $(''+ (this.settings.row+1) + 'platoon' + this.settings.label+' seat') .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 / updated 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') {/ / return 'unavailable';} else {return this.style ();}) / / seats that have been sold sc.get (['1'2','4'4','4'5 "," 6 "6", 6 "7", 8 "6", 8 "6", 8 "7, 8", 8 ", 7"]). Status ('unavailable');}); / / calculate the total amount function recalculateTotal (sc) {var total = 0 Sc.find ('selected') .each (function () {total + = price;}); return total;}

At this point, I believe you have a deeper understanding of "how to use jQuery to achieve online cinema seat selection and reservation function". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.