suchen

Heim >Web-Frontend >js-Tutorial >Ausführliche Erklärung der Verwendung des jQuery-Plug-Ins Seat-Charts (mit Code)

Ausführliche Erklärung der Verwendung des jQuery-Plug-Ins Seat-Charts (mit Code)

php中世界最好的语言
php中世界最好的语言Original
2018-04-25 11:40:498146Durchsuche

Dieses Mal bringe ich Ihnen eine detaillierte Erklärung der Verwendung des jQuery-Plug-Ins (mit Code). Was sind die Vorsichtsmaßnahmen für die detaillierte Erklärung der Verwendung des jQuery-Plug-ins? in Sitzplatzplänen? Hier sind praktische Fälle, werfen wir einen Blick darauf.

Dies ist ein auf JQuery basierender Online-Sitzplatzauswahl-Plug-in-Quellcode. Es handelt sich um ein jquery.seat-charts-Plug-in, das für die Sitzplatzauswahl für Flugtickets, Kinokarten und Bustickets geeignet ist. Klicken Sie auf den Sitzplatz auf der linken Seite, um sofort die Sitzplatzinformationen auf der rechten Seite anzuzeigen, und es gibt eine Funktion zur Berechnung der Gesamtsumme.

Funktionen: Unterstützt benutzerdefinierte Sitzplatztypen und -preise, unterstützt benutzerdefinierte Stile, unterstützt die Einstellung nicht auswählbarer Sitzplätze und unterstützt auch die Tastatursteuerung für die Sitzplatzauswahl.
Führen Sie die Renderings aus:

Tipps: Wenn Sie den Browser nicht normal ausführen können, können Sie versuchen, den Suchmodus zu wechseln.
Der mit Ihnen geteilte Spezialeffektcode für das jQuery-Online-Sitzplatzauswahl-Plug-in lautet wie folgt: 

<!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>

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie unter: Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

JQuery-Implementierung der Sammlung von Textschaltflächen-Spezialeffekten in Formularen

Detaillierte Erläuterung der zu implementierenden Schritte jQuery-Tabelle mit Kontrollkästchen

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung der Verwendung des jQuery-Plug-Ins Seat-Charts (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery erzeugt einen vertikalen durchscheinenden AkkordeoneffektNächster Artikel：jQuery erzeugt einen vertikalen durchscheinenden Akkordeoneffekt

In Verbindung stehende Artikel

Mehr sehen