Cinema with online seat selection and Reservation Based on jquery

All those who have bought movie tickets through e-commerce are familiar with this function. How can I use the online seat selection and Booking Application? Next, I will share with you the online seat selection and booking based on jquery, if you are interested, come and watch it for you (source code download is supported ):

We can select seats when purchasing tickets online (such as movie tickets and tickets. The developer will list the seats on the page. You can see the seats you can select and pay at a glance. This article takes cinema ticketing as an example to show you how to select a seat and process the selected data.

Here, I will introduce you to a jQuery-based online seat selection plug-in:JQuery Seat ChartsIt supports custom seating types and prices, custom styles, optional seating settings, and keyboard control.

HTML

Let's assume that we enter the seat selection page of the movie interstellar. For the page layout, see the big picture above. The seat layout of the cinema is shown in # seat-map on the left of the page, # booking-details on the right shows the video information and the selected seat information # selected-seats and fare amount information. After selecting a seat, confirm the payment on the payment page.

Screen Film: Interstellar 3D time: November 14 seats: votes: 0 Total: ￥0

CSS

Use CSS to beautify each element on the page, especially the layout of the seat list, and set different styles for the seat status (sold, available, and selected, we have sorted out the CSS code. Of course, you can modify any CSS code based on the style of your project page.

.front{width: 300px;margin: 5px 32px 45px 32px;background-color: #f0f0f0; color: #666;text-align: center;padding: 3px;border-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} p.seatCharts-cell {color: #182C4E;height: 25px;width: 25px;line-height: 25px;margin: 3px;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;border: none;} p.seatCharts-seat.selected {background-color: #E6CAC4;} p.seatCharts-seat.unavailable {background-color: #472B34;cursor: not-allowed;} p.seatCharts-container {border-right: 1px dotted #adadad;width: 400px;padding: 20px;float: left;} p.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

JQuery

This example is based on jQuery, so do not forget to first load the jquery library and Seat selection plug-in: jQuery Seat Charts.

?