recherche

Maison >interface Web >js tutoriel >Explication détaillée de l'utilisation des plans de siège du plug-in jQuery (avec code)

Explication détaillée de l'utilisation des plans de siège du plug-in jQuery (avec code)

php中世界最好的语言
php中世界最好的语言original
2018-04-25 11:40:498133parcourir

Cette fois, je vous apporte une explication détaillée de l'utilisation des diagrammes de siège du plug-in jQuery (avec code). Quelles sont les précautions pour l'explication détaillée de l'utilisation du plug-in jQuery-. dans les plans de siège Voici des cas réels, jetons un coup d'oeil.

Il s'agit d'un code source de diagrammes de sièges de plug-in de sélection de sièges en ligne basé sur JQuery. Il s'agit d'un plug-in jquery.seat-charts adapté à la sélection de sièges pour les billets d'avion, de cinéma et de bus. Cliquez sur le siège à gauche pour afficher instantanément les informations sur le siège à droite, et il y a une fonction pour calculer le total.

Caractéristiques : prend en charge les types et les prix de sièges personnalisés, prend en charge les styles personnalisés, prend en charge la définition de sièges non sélectionnables et prend également en charge le contrôle du clavier pour la sélection des sièges.
Exécuter les rendus :

Conseils : Si vous ne parvenez pas à exécuter normalement dans le navigateur, vous pouvez essayer de changer de mode de navigation.
Le code d'effet spécial des graphiques de sièges du plug-in de sélection de siège en ligne jQuery partagé avec vous est le suivant 

<!doctype html>
<html>
<head>
<title>jQuery在线选座位插件seat-charts</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/jquery.seat-charts.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<p class="wrapper">
 <p class="container">
 <p id="seat-map">
  <p class="front-indicator">机头</p>
 </p>
 <p class="booking-details">
  <h3>已选中的座位 (<span id="counter">0</span>):</h3>
  <ul id="selected-seats">
  </ul>
  <p>总价: <b>$<span id="total">0</span></b></p>
  <p><button class="checkout-button">结算</button></p>  
  <p id="legend"></p>
 </p>
 </p>
</p>
<script src="js/jquery-1.11.0.min.js"></script> 
<script src="js/jquery.seat-charts.min.js"></script> 
<script>
 var firstSeatLabel = 1;
 
 $(document).ready(function() {
 var $cart = $('#selected-seats'),
  $counter = $('#counter'),
  $total = $('#total'),
  sc = $('#seat-map').seatCharts({
  map: [
  'ff_ff',
  'ff_ff',
  'ee_ee',
  'ee_ee',
  'ee_',
  'ee_ee',
  'ee_ee',
  'ee_ee',
  'ee_ee',
  'eeeee',
  ],
  seats: {
  f: {
  price : 100,
  classes : 'first-class', //your custom CSS class
  category: '头等舱'
  },
  e: {
  price : 40,
  classes : 'economy-class', //your custom CSS class
  category: '经济舱'
  }  
  
  },
  naming : {
  top : false,
  getLabel : function (character, row, column) {
  return firstSeatLabel++;
  },
  },
  legend : {
  node : $('#legend'),
   items : [
  [ 'f', 'available', '头等舱' ],
  [ 'e', 'available', '经济舱'],
  [ 'f', 'unavailable', '已预定']
   ]  
  },
  click: function () {
  if (this.status() == 'available') {
  $('<li>'+this.data().category+this.settings.label+'号座位'+'：<br/>价格：<b>$'+this.data().price+'</b> <a href="#" class="cancel-cart-item">[删除]</a></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') {
  //update the counter
  $counter.text(sc.find('selected').length-1);
  //and total
  $total.text(recalculateTotal(sc)-this.data().price);
  
  //remove the item from our cart
  $('#cart-item-'+this.settings.id).remove();
  
  //seat has been vacated
  return 'available';
  } else if (this.status() == 'unavailable') {
  //seat has been already booked
  return 'unavailable';
  } else {
  return this.style();
  }
  }
 });
 //this will handle "[cancel]" link clicks
 $('#selected-seats').on('click', '.cancel-cart-item', function () {
  //let's just trigger Click event on the appropriate seat, so we don't have to repeat the logic here
  sc.get($(this).parents('li:first').data('seatId')).click();
 });
 //let's pretend some seats have already been booked
 sc.get(['1_2', '4_1', '7_1', '7_2']).status('unavailable');
 
 });
 function recalculateTotal(sc) {
 var total = 0;
 
 //basically find every selected seat and sum its price
 sc.find('selected').each(function () {
 total += this.data().price;
 });
 
 return total;
 }
 
 </script>
<p align="center" style="clear:both;font-size:12px;color:#666;font:normal 14px/24px &#39;MicroSoft YaHei&#39;;">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
</p>
</body>
</html>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour plus d'excitant. Pour plus d'informations, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Implémentation JQuery de la collection d'effets spéciaux de boutons de texte dans les formulaires

Explication détaillée des étapes à mettre en œuvre Table jQuery avec cases à cocher

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jQuery crée un effet accordéon translucide verticalArticle suivant：jQuery crée un effet accordéon translucide vertical

Articles Liés

Voir plus