Version ferroviaire à grande vitesse de la sélection de sièges en ligne basée sur jQuery

Version ferroviaire à grande vitesse de la sélection de sièges en ligne basée sur jQuery_jquery

WBOY

Libérer： 2016-05-16 15:42:51

original

1801 Les gens l'ont consulté

Affichage du rendu :

Voir la démo Téléchargement du code source

En plus de la sélection des sièges en ligne dans les salles de cinéma, nous serons également impliqués dans la sélection des sièges dans les cabines d'avion et, bien sûr, dans la sélection des billets de bus et de train. Si un jour vous pouvez acheter des billets de train et également proposer une sélection de sièges en ligne, je vais aujourd'hui vous présenter comment utiliser le plug-in de sélection de sièges jQuery pour compléter la disposition des sièges de train à grande vitesse, la sélection des sièges et la tarification des différentes classes de sièges.

HTML

Identique à l'article précédent : sélection et réservation de sièges en ligne jQuery (théâtre), nous utilisons la même structure html, avec la carte de localisation affichée à gauche et les informations relatives à la sélection de siège affichées à droite.

Veuillez télécharger le code source DEMO pour visualiser le code CSS correspondant, qui ne sera pas détaillé dans cet article.

<div class="container"> 
 <div id="seat-map"> 
 <div class="front">01车</div> 
 </div> 
 <div class="booking-details"> 
 <h3> 选座信息：</h3> 
 <ul id="selected-seats"></ul> 
 <p>票数: <span id="counter"></span></p> 
 <p>总计: ￥<span id="total">0</span></p> 
  
 <button class="checkout-button">确定购买</button> 
 <div id="legend"></div> 
 </div> 
</div>

Copier après la connexion

jQuery

Pour nous concentrer sur le code jQuery, nous utilisons toujours le plug-in de sélection de siège en ligne : jQuery Seat Charts. Tout d'abord, organisez la disposition des sièges du wagon à grande vitesse. Je suppose qu'il y a des sièges de première classe et des sièges de deuxième classe dans la voiture n°01, séparés par des passages d'entrée et de sortie. La disposition générale est la suivante : <🎜. >

map: [ //座位图 
 'ff__ff', 
 'ff__ff', 
 '______', 
 'eee_ee', 
 'eee_ee', 
 'eee_ee', 
 'eee_ee', 
 'eee_ee', 
 'eee_ee' 
],

Copier après la connexion

Le code f ci-dessus représente les sièges de première classe, e représente les sièges de deuxième classe et le symbole « _ » représente l'allée.

Ensuite, nous devons définir les attributs pertinents du type de siège :

seats: { //定义座位属性 
 f: { 
 price : 100, 
 classes : 'first-class', 
 category: '一等座' 
 }, 
 e: { 
 price : 40, 
 classes : 'economy-class', 
 category: '二等座' 
 }  
},

Copier après la connexion

Le code ci-dessus définit le prix, le nom de la catégorie et le style CSS correspondant des sièges de première et de deuxième classe. Ils peuvent être appelés ultérieurement via la méthode data().

Ensuite, nous utilisons la dénomination pour définir les informations de ligne et de colonne du plan de siège. Définir top sur true ci-dessous signifie afficher l'abscisse supérieure (ligne) et les lignes sont utilisées pour définir l'abscisse (ligne) et l'ordonnée (colonne). respectivement Value, getLabel est utilisé pour renvoyer des informations sur le siège, telles que : 01A signifie le siège A dans la rangée 01.

naming : { //定义行列等信息 
 top : true, 
 columns: ['A', 'B', 'C', '', 'D','F'], 
 rows: ['01','02','','03','04','05','06','07','08','09'], 
 getLabel : function (character, row, column) { 
 return row+column; 
 } 
},

Copier après la connexion

Ensuite, nous utilisons legend pour définir la légende. L'élément associé à la légende est #legend et définissons le style correspondant pour le type de siège.

legend : { //定义图例 
 node : $('#legend'), 
 items : [ 
 [ 'f', 'available', '一等座' ], 
 [ 'e', 'available', '二等座'], 
 [ 'f', 'unavailable', '已售出'] 
 ]  
},

Copier après la connexion

Enfin, lorsque vous cliquez sur la position dans le plan de salle à l'extérieur, différents traitements seront effectués en fonction de l'état actuel du siège, notamment le calcul du nombre de billets et du montant total, etc. Vous pouvez vous référer aux instructions dans la salle. chapitre.

click: function () { 
 if (this.status() == 'available') {//可选座 
 $('<li>'+this.data().category+'<br/>01车'+this.settings.label+'号<br/>￥'+this.data().price+'</li>') 
 .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)+this.data().price); 
 return 'selected'; 
 } else if (this.status() == 'selected') {//已选中 
 $counter.text(sc.find('selected').length-1); 
 $total.text(recalculateTotal(sc)-this.data().price); 
 //删除已预订座位 
 $('#cart-item-'+this.settings.id).remove(); 
 return 'available'; 
 } else if (this.status() == 'unavailable') {//已售出 
 //已售出 
 return 'unavailable'; 
 } else { 
 return this.style(); 
 } 
},

Copier après la connexion

Enfin, nous utilisons les méthodes get() et status() pour définir les sièges qui ont été vendus et qui ne sont pas disponibles.

//Vendu, aucune place disponible

sc.get(['01_A', '04_A', '07_B', '07_F']).status('unavailable');

Copier après la connexion

Il est à noter que lorsque les achats de billets sur le site Internet sont très fréquents, vous devez veiller à actualiser le plan des sièges à temps. Si le siège a été préempté, il n'est pas disponible. Nous pouvons utiliser ajax pour faire des requêtes asynchrones et le configurer pour qu'il s'exécute toutes les 10 secondes. Vous pouvez vous référer au code suivant :

setInterval(function() { 
 $.ajax({ 
 type : 'get', 
 url : 'book.php', 
 dataType : 'json', 
 success : function(response) { 
 //遍历所有座位 
 $.each(response.bookings, function(index, booking) { 
 //将已售出的座位状态设置为已售出 
 sc.status(booking.seat_id, 'unavailable'); 
 }); 
 } 
 }); 
}, 10000); //每10秒

Copier après la connexion

Ce qui précède est la version ferroviaire à grande vitesse de la sélection de sièges en ligne basée sur jQuery présentée dans cet article. J'espère qu'elle vous plaira.