除了購(gòu)買(mǎi)電影票在線(xiàn)選座，我們還接觸過(guò)飛機(jī)機(jī)艙選座，隨著科技的發(fā)展，之后火車(chē)、汽車(chē)都會(huì)支持在線(xiàn)選座，下面給大家分享基于jQuery實(shí)現(xiàn)在線(xiàn)選座之高鐵版，需要的朋友可以參考下

效果圖展示：

查看演示源碼下載

除了電影院在線(xiàn)選座，我們還會(huì)接觸到飛機(jī)機(jī)艙選座，當(dāng)然也有汽車(chē)票火車(chē)票選座的。假如有一天買(mǎi)火車(chē)票也提供在線(xiàn)選座，那么今天我來(lái)給大家介紹下如何使用jQuery選座插件完成高鐵列車(chē)座位布置、選座、不同等級(jí)座位計(jì)價(jià)等操作。

HTML

和上一篇文章一樣：jQuery在線(xiàn)選座訂座（影院篇），我們使用相同的html結(jié)構(gòu)，左側(cè)顯示位置布局圖，右側(cè)顯示選座相關(guān)信息。

相關(guān)CSS代碼請(qǐng)下載DEMO源碼查看，本文不再詳述。

<div class="container"> 
 <div id="seat-map"> 
 <div class="front">01車(chē)</div> 
 </div> 
 <div class="booking-details"> 
 <h3> 選座信息：</h3> 
 <ul id="selected-seats"></ul> 
 <p>票數(shù): <span id="counter"></span></p> 
 <p>總計(jì): ￥<span id="total">0</span></p> 
  
 <button class="checkout-button">確定購(gòu)買(mǎi)</button> 
 <div id="legend"></div> 
 </div> 
</div>

jQuery

重點(diǎn)來(lái)關(guān)注jQuery代碼，我們還是使用在線(xiàn)選座插件：jQuery Seat Charts。首先安排高鐵車(chē)廂座位布局，我假設(shè)在01號(hào)車(chē)廂內(nèi)有一等座和二等座若干，中間通過(guò)出入口通道隔開(kāi)，大致布局如下：

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

上面的代碼f表示的是一等座，e表示的是二等座，符號(hào)"_"表示過(guò)道。

然后我們要定義座位類(lèi)型的相關(guān)屬性：

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

上面的代碼定義了一等座和二等座的價(jià)格、類(lèi)別名稱(chēng)以及對(duì)應(yīng)的css樣式。他們可以在后面通過(guò)data()方法調(diào)用。

接下來(lái)我們用naming來(lái)定義座位圖的行列信息，如下top設(shè)置為true則表示顯示頂部橫坐標(biāo)（行），columns和rows分別用來(lái)定義橫坐標(biāo)（行）和縱坐標(biāo)（列）的值，getLabel用來(lái)返回座位信息，如：01A表示01排A座。

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

然后我們使用legend來(lái)定義圖例，對(duì)應(yīng)圖例關(guān)聯(lián)的元素是#legend，并對(duì)座位類(lèi)型定義對(duì)應(yīng)的樣式。

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

最后在外面點(diǎn)擊（click）座位圖中的位置時(shí)，根據(jù)當(dāng)前座位的狀態(tài)做出不同的處理，包括計(jì)算票數(shù)和金額總計(jì)等，可以參照影院篇的說(shuō)明。

click: function () { 
 if (this.status() == 'available') {//可選座 
 $('<li>'+this.data().category+'<br/>01車(chē)'+this.settings.label+'號(hào)<br/>￥'+this.data().price+'</li>') 
 .attr('id', 'cart-item-'+this.settings.id) 
 .data('seatId', this.settings.id) 
 .appendTo($cart); 
 //更新票數(shù) 
 $counter.text(sc.find('selected').length+1); 
 //計(jì)算總計(jì)金額 
 $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); 
 //刪除已預(yù)訂座位 
 $('#cart-item-'+this.settings.id).remove(); 
 return 'available'; 
 } else if (this.status() == 'unavailable') {//已售出 
 //已售出 
 return 'unavailable'; 
 } else { 
 return this.style(); 
 } 
},

最后，我們使用get()和status()方法設(shè)置已經(jīng)售出不可選的座位。

//已售出不可選座

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

值得一提的是，當(dāng)網(wǎng)站購(gòu)票非常頻繁時(shí)需要注意及時(shí)刷新座位圖，如果座位已經(jīng)被搶占了則不可選。我們可以使用ajax進(jìn)行異步請(qǐng)求，并且設(shè)置每隔10秒鐘運(yùn)行一次，可以參照如下代碼：

setInterval(function() { 
 $.ajax({ 
 type : 'get', 
 url : 'book.php', 
 dataType : 'json', 
 success : function(response) { 
 //遍歷所有座位 
 $.each(response.bookings, function(index, booking) { 
 //將已售出的座位狀態(tài)設(shè)置為已售出 
 sc.status(booking.seat_id, 'unavailable'); 
 }); 
 } 
 }); 
}, 10000); //每10秒

以上就是本文介紹基于jQuery實(shí)現(xiàn)在線(xiàn)選座之高鐵版，希望大家喜歡。

您可能感興趣的文章: