jQuery在線選座訂座(高鐵版)

除了電影院在線選座,咱們還會接觸到飛機機艙選座,固然也有汽車票火車票選座的。假若有一天買火車票也提供在線選座,那麼今天我來給你們介紹下如何使用jQuery選座插件完成高鐵列車座位佈置、選座、不一樣等級座位計價等操做。javascript

 

HTML

和上一篇文章同樣:jQuery在線選座訂座(影院篇),咱們使用相同的html結構,左側顯示位置佈局圖,右側顯示選座相關信息。相關CSS代碼請下載DEMO源碼查看,本文再也不詳述。php

 
 
<div class="container"> 
    <div id="seat-map"> 
        <div class="front">01車</div> 
    </div> 
    <div class="booking-details"> 
        <h3> 選座信息:</h3> 
        <ul id="selected-seats"></ul> 
        <p>票數: <span id="counter"></span></p> 
        <p>總計: ¥<span id="total">0</span></p> 
                     
        <button class="checkout-button">肯定購買</button> 
        <div id="legend"></div> 
    </div> 
</div> 
 

jQuery

重點來關注jQuery代碼,咱們仍是使用在線選座插件:jQuery Seat Charts。首先安排高鐵車箱座位佈局,我假設在01號車箱內有一等座和二等座若干,中間經過出入口通道隔開,大體佈局以下:css

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

上面的代碼f表示的是一等座,e表示的是二等座,符號"_"表示過道。html

而後咱們要定義座位類型的相關屬性:java

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

上面的代碼定義了一等座和二等座的價格、類別名稱以及對應的css樣式。他們能夠在後面經過data()方法調用。node

接下來咱們用naming來定義座位圖的行列信息,以下top設置爲true則表示顯示頂部橫座標(行),columns和rows分別用來定義橫座標(行)和縱座標(列)的值,getLabel用來返回座位信息,如:01A表示01排A座。web

 
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來定義圖例,對應圖例關聯的元素是#legend,並對座位類型定義對應的樣式。ajax

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

最後在外面點擊(click)座位圖中的位置時,根據當前座位的狀態作出不一樣的處理,包括計算票數和金額總計等,能夠參照影院篇的說明。json

 
click: function () { 
    if (this.status() == 'available') {//可選座 
        $('<li>'+this.data().category+'<br/>01車'+this.settings.label+'號<br/>¥'+this.data().price+'</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') {//已選中 
        $counter.text(sc.find('selected').length-1); 
        $total.text(recalculateTotal(sc)-this.data().price); 
        //刪除已預訂座位 
        $('#cart-item-'+this.settings.id).remove(); 
        return 'available'; 
    } else if (this.status() == 'unavailable') {//已售出 
        //已售出 
        return 'unavailable'; 
    } else { 
        return this.style(); 
    } 
}, 
 

最後,咱們使用get()和status()方法設置已經售出不可選的座位。app

 
//已售出不可選座 
sc.get(['01_A', '04_A', '07_B', '07_F']).status('unavailable'); 
 

值得一提的是,當網站購票很是頻繁時須要注意及時刷新座位圖,若是座位已經被搶佔了則不可選。咱們可使用ajax進行異步請求,而且設置每隔10秒鐘運行一次,能夠參照以下代碼:

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

最後,我整理了源碼並提供下載,歡迎下載源碼:點擊這裏下載

相關文章
相關標籤/搜索