jQueryプラグインシートチャートの使い方の詳しい説明（コード付き）-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jQueryプラグインシートチャートの使い方の詳しい説明（コード付き）

Apr 25, 2018 am 11:40 AM

jquery 詳しい説明

今回はjQueryプラグインのseat-chartsの使い方の詳しい説明(コード付き)をお届けします。jQueryプラグインのseat-chartsの使い方の注意点は何ですか?以下は実際的なケースですので、見てみましょう。

これは、JQuery に基づいたオンライン座席選択プラグインのシートチャートのソースコードです。航空券、映画チケット、バスチケットの座席選択に適した jquery.seat-charts プラグインです。左側の座席をクリックすると右側に座席情報が瞬時に表示され、合計を計算する機能があります。

特徴: カスタムの座席タイプと価格をサポートし、カスタムスタイルをサポートし、選択できない座席の設定をサポートし、座席選択のためのキーボード制御もサポートします。

レンダリングの実行: ヒント: ブラウザーで正常に実行できない場合は、ブラウズモードを切り替えてみてください。

あなたと共有した jQuery オンライン座席選択プラグインの座席表の特殊効果コードは次のとおりです

&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;jQuery在线选座位插件seat-charts&lt;/title&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/jquery.seat-charts.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/style.css&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p class=&quot;wrapper&quot;&gt;
 &lt;p class=&quot;container&quot;&gt;
 &lt;p id=&quot;seat-map&quot;&gt;
  &lt;p class=&quot;front-indicator&quot;&gt;机头&lt;/p&gt;
 &lt;/p&gt;
 &lt;p class=&quot;booking-details&quot;&gt;
  &lt;h3&gt;已选中的座位 (&lt;span id=&quot;counter&quot;&gt;0&lt;/span&gt;):&lt;/h3&gt;
  &lt;ul id=&quot;selected-seats&quot;&gt;
  &lt;/ul&gt;
  &lt;p&gt;总价: &lt;b&gt;$&lt;span id=&quot;total&quot;&gt;0&lt;/span&gt;&lt;/b&gt;&lt;/p&gt;
  &lt;p&gt;&lt;button class=&quot;checkout-button&quot;&gt;结算&lt;/button&gt;&lt;/p&gt;  
  &lt;p id=&quot;legend&quot;&gt;&lt;/p&gt;
 &lt;/p&gt;
 &lt;/p&gt;
&lt;/p&gt;
&lt;script src=&quot;js/jquery-1.11.0.min.js&quot;&gt;&lt;/script&gt; 
&lt;script src=&quot;js/jquery.seat-charts.min.js&quot;&gt;&lt;/script&gt; 
&lt;script&gt;
 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') {
  $('&lt;li&gt;'+this.data().category+this.settings.label+'号座位'+'：&lt;br/&gt;价格：&lt;b&gt;$'+this.data().price+'&lt;/b&gt; &lt;a href=&quot;#&quot; class=&quot;cancel-cart-item&quot;&gt;[删除]&lt;/a&gt;&lt;/li&gt;')
  .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;
 }
 
 &lt;/script&gt;
&lt;p align=&quot;center&quot; style=&quot;clear:both;font-size:12px;color:#666;font:normal 14px/24px &#39;MicroSoft YaHei&#39;;&quot;&gt;
&lt;p&gt;适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. &lt;/p&gt;
&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

この記事の事例を読んだ後、あなたは方法を習得したと思います。さらに興味深い情報については、他の関連情報に注意してください。 PHP 中国語 Web サイトの記事をご覧ください。

推奨読書:

フォームにテキストボタンを実装するためのjQueryの特殊効果のコレクション

jQueryを使用してチェックボックス付きのテーブルを実装する手順の詳細な説明

以上がjQueryプラグインシートチャートの使い方の詳しい説明（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。