jquery に基づくオンライン座席選択と予約の映画編

最初にレンダリングをお見せします (ソース コードのダウンロードがサポートされています):

オンラインでチケットを購入するとき (映画のチケット、電車のチケットなど) 、座席は自分で選ぶことができます。開発者はページに座席をリストし、ユーザーは利用可能な座席と支払いを一目で明確に確認できます。この記事では、映画館のチケット購入を例に、座席の選択方法、座席選択データの処理方法などを説明します。

ここでは、jQuery に基づくオンライン座席選択プラグインである jQuery Seat Charts を紹介したいと思います。これは、カスタムの座席タイプと価格、カスタム スタイル、設定をサポートします。選択した座席は、座席のキーボード制御もサポートしています。

HTML

映画「インターステラー」の座席選択ページに入ることを想定しています。ページレイアウトは上の大きな画像をご覧ください。ページは #seat-map に表示されます。 右側の #booking-details には、選択した座席情報、#selected-seats およびチケット金額情報が表示されます。席に着いたら、支払いページに移動して支払いを完了してください。

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

CSS

CSS を使用して各要素を変換しますページ要素の美化、特に座席リストのレイアウトでは、座席ステータス (販売済み、オプションの座席、選択された座席など) のさまざまなスタイルが設定されています。 もちろん、スタイルに応じて CSS コードを変更できます。プロジェクトページのコード。

.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

この例は jQuery に基づいているため、最初に jQuery ライブラリと座席選択プラグインである jQuery Seat Charts をロードすることを忘れないでください。

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

次に、運賃、座席エリア、チケット数、合計金額などの要素を定義し、プラグインを呼び出します: $('#seat-map').seatCharts( ）。

まず座席表を設定します。劇場の座席は固定されています。この例では、3 列目が通路で、3 列目と 4 列目の右側の空席が出口になります。最後列にカップルシートがあるので、上映室のレイアウトは次のとおりです。 🎜>

aaaaaaaaaa

aaaaaaaaaa
__________
aaaaaaaa__
aaaaaaaaaa
aaaaaaaaaa
aaaaaaaaaa
aaaaaaaaaa
aaaaaaaaaa
aa__aa __aa

私たち文字 a を使用して座席を表し、記号 _ Empty は座席がないことを意味します。もちろん、a、b、c などを使用してさまざまなレベルの座席を表すこともできます。

次に、凡例のスタイルを定義します。重要なのは、ユーザーが座席をクリックしたとき、座席ステータスが利用可能 (available) の場合は、クリックした後、クリック イベント click() を検出することです。座席の場合、右側の選択済み座席リストに座席情報（列と列）が表示され、座席ステータスが選択されている場合は合計投票数と合計金額が計算されます。再度座席をクリックすると、右側の座席から選択した座席情報が追加されます。リストから削除し、座席ステータスが販売済み（利用不可）の場合は、座席をクリックできません。最後に、get() メソッドを使用して、販売済みの座席番号のステータスを販売済みに設定します。

以下は詳細なコードです:

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

上記のコードは jquery を使用して劇場のオンライン座席選択と予約を実装しています。