Chapitre cinéma de sélection et de réservation de sièges en ligne basé sur jquery

Laissez-moi d'abord vous montrer les rendus (le téléchargement du code source est pris en charge) :

Lorsque nous achetons des billets en ligne (comme des billets de cinéma, des billets de train, etc.) , nous pouvons choisir nos propres sièges. Le développeur répertoriera les sièges sur la page et les utilisateurs pourront voir clairement les sièges disponibles et le paiement en un coup d'œil. Cet article prend comme exemple l'achat d'un billet de cinéma pour vous montrer comment sélectionner les sièges, traiter les données de sélection des sièges, etc.

Ici, j'aimerais vous présenter un plug-in de sélection de sièges en ligne basé sur jQuery : jQuery Seat Charts, qui prend en charge les types et prix de sièges personnalisés, les styles et les paramètres personnalisés. Le siège sélectionné prend également en charge le contrôle du siège par clavier.

HTML

Nous supposons que nous entrons dans la page de sélection des sièges du film "Interstellar". Veuillez voir la grande image ci-dessus pour la mise en page. la page sera dans #seat-map La disposition des sièges du théâtre est affichée. Les #détails de la réservation sur la droite affiche les informations relatives au film ainsi que les informations sur les sièges sélectionnés et les informations sur le montant du billet. siège, confirmez sur la page de paiement pour finaliser le paiement.

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

CSS

Utilisez CSS pour convertir chaque élément sur la page d'embellissement des éléments, en particulier la disposition de la liste des sièges, définit différents styles pour le statut des sièges (vendus, sièges optionnels, sièges sélectionnés, etc.). Nous avons trié le code CSS. Bien sûr, vous pouvez modifier n'importe quel CSS en fonction du style. de votre page de projet.

.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

Cet exemple est basé sur jQuery, alors n'oubliez pas de charger d'abord la bibliothèque jquery et le plug-in de sélection de siège : jQuery Seat Charts.

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

Ensuite, nous définissons des éléments tels que le tarif, la zone assise, le nombre de billets, le montant total, puis appelons le plug-in : $('#seat-map').seatCharts( ) .

Nous établissons d'abord le plan de salle Les sièges dans un théâtre sont fixes. Dans cet exemple, la troisième rangée est l'allée et les sièges vides sur le côté droit des troisième et quatrième rangées sont les sorties. Nous avons quelques sièges dans la dernière rangée, donc la disposition de la salle de projection est la suivante :

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

Nous utilisez la lettre a pour représenter le siège et le symbole _ Vide signifie qu'il n'y a pas de sièges. Bien sûr, vous pouvez également utiliser a, b, c, etc. pour représenter des sièges de différents niveaux.

Définissez ensuite le style de la légende. L'essentiel est de détecter l'événement clic click() : lorsque l'utilisateur clique sur le siège, si le statut du siège est disponible (disponible), puis après avoir cliqué sur le siège. siège, les informations sur le siège (rangées et rangées) seront affichées. siège) est ajouté à la liste des sièges sélectionnés sur la droite, et le nombre total de votes et le montant total sont calculés si le statut du siège est sélectionné (sélectionné), alors après avoir cliqué à nouveau sur le siège, les informations sur le siège sélectionné seront ajoutées à partir du siège de droite. Supprimez-le de la liste et définissez le statut sur facultatif. Si le statut du siège est vendu (indisponible), le siège ne peut pas être cliqué. Enfin, utilisez la méthode get() pour définir le statut du numéro de siège vendu sur vendu.

Voici le code détaillé :

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;
}

Le code ci-dessus utilise jquery pour implémenter la sélection et la réservation de sièges en ligne pour les cinémas

<.>