本文實(shí)例講述了jQuery在線選座位插件seat-charts特效。分享給大家供大家參考。具體如下：
這是一款基于JQuery實(shí)現(xiàn)的在線選座位插件seat-charts源碼，是一款適合機(jī)票，電影票，客車(chē)票選座的jquery.seat-charts插件。點(diǎn)擊左側(cè)的座位即可在右側(cè)即時(shí)顯示座位信息，并且可以有計(jì)算累加的功能。
特點(diǎn)：支持自定義座位類型和價(jià)格，支持自定義樣式，支持設(shè)置不可選的座位，也支持鍵盤(pán)控制選座。
運(yùn)行效果圖： -------------------查看效果 下載源碼-------------------
小提示：瀏覽器中如果不能正常運(yùn)行，可以嘗試切換瀏覽模式。
為大家分享的jQuery在線選座位插件seat-charts特效代碼如下
<!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><div class="wrapper"> <div class="container"> <div id="seat-map"> <div class="front-indicator">機(jī)頭</div> </div> <div class="booking-details"> <h3>已選中的座位 (<span id="counter">0</span>):</h3> <ul id="selected-seats"> </ul> <p>總價(jià): <b>$<span id="total">0</span></b></p> <p><button class="checkout-button">結(jié)算</button></p> <div id="legend"></div> </div> </div></div><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: '經(jīng)濟(jì)艙' } }, naming : { top : false, getLabel : function (character, row, column) { return firstSeatLabel++; }, }, legend : { node : $('#legend'), items : [ [ 'f', 'available', '頭等艙' ], [ 'e', 'available', '經(jīng)濟(jì)艙'], [ 'f', 'unavailable', '已預(yù)定'] ] }, click: function () { if (this.status() == 'available') { $('<li>'+this.data().category+this.settings.label+'號(hào)座位'+'：<br/>價(jià)格：<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><div align="center" style="clear:both;font-size:12px;color:#666;font:normal 14px/24px 'MicroSoft YaHei';"><p>適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p></div></body></html>以上就是為大家分享的jQuery在線選座位插件seat-charts特效代碼，希望大家可以喜歡。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
