Kinokapitel zur Online-Sitzplatzauswahl und -reservierung basierend auf jquery

Lassen Sie mich Ihnen zuerst die Renderings zeigen (Download des Quellcodes wird unterstützt):

Wenn wir Tickets online kaufen (z. B. Kinokarten, Bahntickets usw.) , wir können unsere Plätze selbst wählen. Der Entwickler listet die Plätze auf der Seite auf, und Benutzer können die verfügbaren Plätze und die Bezahlung auf einen Blick klar erkennen. In diesem Artikel wird am Beispiel des Kaufs von Kinokarten erläutert, wie Sie Sitzplätze auswählen, Sitzplatzauswahldaten verarbeiten usw.

Hier möchte ich Ihnen ein auf jQuery basierendes Online-Sitzplatzauswahl-Plug-in vorstellen: jQuery Seat Charts, das benutzerdefinierte Sitzplatztypen und -preise, benutzerdefinierte Stile und Einstellungen unterstützt. Der ausgewählte Sitz unterstützt auch die Tastatursteuerung des Sitzes.

HTML

Wir gehen davon aus, dass wir die Sitzplatzauswahlseite des Films „Interstellar“ betreten. Das Seitenlayout finden Sie im großen Bild oben Die Seite wird in #seat-map angezeigt. Die #booking-details auf der rechten Seite zeigen filmbezogene Informationen sowie die ausgewählten Sitzplatzinformationen und #selected-seats-Informationen an Sitzplatz, bestätigen Sie die Zahlungsseite, um die Zahlung abzuschließen.

屏幕影片：星际穿越3D时间：11月14日 21:00座位：票数：0总计：￥0

CSS

Verwenden Sie CSS, um jedes Element zu konvertieren Die Seitenelementverschönerung, insbesondere das Sitzlistenlayout, legt verschiedene Stile für den Sitzplatzstatus fest (verkauft, optionale Sitzplätze, ausgewählte Sitzplätze usw.). Natürlich können Sie jedes CSS entsprechend dem Stil ändern Ihrer Projektseite.

.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

Dieses Beispiel basiert auf jQuery. Vergessen Sie also nicht, zuerst die jQuery-Bibliothek und das Sitzauswahl-Plug-in zu laden: jQuery Seat Charts.

?
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.seat-charts.min.js"></script>

Als nächstes definieren wir Elemente wie Fahrpreis, Sitzplatzbereich, Anzahl der Tickets, Gesamtbetrag und rufen dann das Plug-in auf: $('#seat-map').seatCharts( ).

Wir richten zunächst den Sitzplatzplan ein. Die Sitzplätze in einem Theater sind festgelegt. In diesem Beispiel ist die dritte Reihe der Gang und die freien Sitze auf der rechten Seite der dritten und vierten Reihe sind die Ausgänge. In der letzten Reihe haben wir einige Sitzplätze, daher ist die Aufteilung des Vorführraums wie folgt:

aaaaaaaaaa
aaaaaaaaaa
__________
aaaaaaaa__
aaaaaaaaaa
aaaaaaaaaa
aaaaaaaaaa
aaaaa aaaaa
aaaaaaaaaa
aa__aa __aa

Wir Verwenden Sie den Buchstaben a, um den Sitzplatz darzustellen, und das Symbol _ Leer bedeutet, dass keine Sitzplätze vorhanden sind. Natürlich können Sie auch a, b, c usw. verwenden, um Sitzplätze verschiedener Ebenen darzustellen.

Dann definieren Sie den Legendenstil. Der Schlüssel besteht darin, das Klickereignis click() zu erkennen: Wenn der Benutzer auf den Sitzplatz klickt, ist der Sitzstatus verfügbar (verfügbar), dann nach dem Klicken auf Sitzplatz, die Sitzplatzinformationen (Reihen und Reihen) werden der ausgewählten Sitzplatzliste auf der rechten Seite hinzugefügt und die Gesamtzahl der Stimmen und der Gesamtbetrag werden berechnet, wenn der Sitzplatzstatus ausgewählt ist Nachdem Sie erneut auf den Sitzplatz geklickt haben, werden die ausgewählten Sitzplatzinformationen vom Sitzplatz auf der rechten Seite hinzugefügt. Löschen Sie ihn aus der Liste und setzen Sie den Status auf „Optional“. Wenn der Sitzplatzstatus „Verkauft“ (nicht verfügbar) ist, kann der Sitzplatz nicht angeklickt werden. Verwenden Sie abschließend die Methode get(), um den Status der verkauften Sitzplatznummer auf „Verkauft“ zu setzen.

Das Folgende ist der detaillierte Code:

var price = 80; //票价
$(document).ready(function() {
var $cart = $('#selected-seats'), //座位区
$counter = $('#counter'), //票数
$total = $('#total'); //总计金额
var sc = $('#seat-map').seatCharts({
map: [ //座位图
 'aaaaaaaaaa',
 'aaaaaaaaaa',
 '__________',
 'aaaaaaaa__',
 'aaaaaaaaaa',
 'aaaaaaaaaa',
 'aaaaaaaaaa',
 'aaaaaaaaaa',
 'aaaaaaaaaa',
 'aa__aa__aa'
],
legend : { //定义图例
 node : $('#legend'),
 items : [
 [ 'a', 'available', '可选座' ],
 [ 'a', 'unavailable', '已售出']
 ]  
},
click: function () { //点击事件
 if (this.status() == 'available') { //可选座
 $(&#39;<li>&#39;+(this.settings.row+1)+&#39;排&#39;+this.settings.label+&#39;座</li>&#39;)
  .attr(&#39;id&#39;, &#39;cart-item-&#39;+this.settings.id)
  .data(&#39;seatId&#39;, this.settings.id)
  .appendTo($cart);
 $counter.text(sc.find(&#39;selected&#39;).length+1);
 $total.text(recalculateTotal(sc)+price);
 return &#39;selected&#39;;
 } else if (this.status() == &#39;selected&#39;) { //已选中
 //更新数量
 $counter.text(sc.find(&#39;selected&#39;).length-1);
 //更新总计
 $total.text(recalculateTotal(sc)-price);
 //删除已预订座位
 $(&#39;#cart-item-&#39;+this.settings.id).remove();
 //可选座
 return &#39;available&#39;;
 } else if (this.status() == &#39;unavailable&#39;) { //已售出
 return &#39;unavailable&#39;;
 } else {
 return this.style();
 }
}
});
//已售出的座位
sc.get([&#39;1_2&#39;, &#39;4_4&#39;,&#39;4_5&#39;,&#39;6_6&#39;,&#39;6_7&#39;,&#39;8_5&#39;,&#39;8_6&#39;,&#39;8_7&#39;,&#39;8_8&#39;, &#39;10_1&#39;, &#39;10_2&#39;]).status(&#39;unavailable&#39;);
});
//计算总金额
function recalculateTotal(sc) {
var total = 0;
sc.find(&#39;selected&#39;).each(function () {
total += price;
});
return total;
}

Der obige Code verwendet jquery, um die Online-Sitzplatzauswahl und -reservierung für Theater zu implementieren