jqueryseatcharts插件怎么使用

本文小編為大家詳細(xì)介紹“jquery seat charts插件怎么使用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“jquery seat charts插件怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)公司！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶(hù)創(chuàng)新互聯(lián)還提供了奉節(jié)免費(fèi)建站歡迎大家使用！

jquery-seat-charts是一款基于JQuery實(shí)現(xiàn)的在線(xiàn)選座位插件，適用于機(jī)票、電影票、客車(chē)票選座場(chǎng)景。jquery-seat-charts插件支持自定義座位類(lèi)型和價(jià)格，支持自定義樣式，支持設(shè)置不可選的座位，也支持鍵盤(pán)控制選座。

本教程操作環(huán)境：windows7系統(tǒng)、jquery3.6.0版本、Dell G3電腦。

jquery-seat-charts是一款基于JQuery實(shí)現(xiàn)的在線(xiàn)選座位插件，是一款適合機(jī)票，電影票，客車(chē)票選座的插件。

點(diǎn)擊左側(cè)的座位即可在右側(cè)即時(shí)顯示座位信息，并且可以有計(jì)算累加的功能。

特點(diǎn)：支持自定義座位類(lèi)型和價(jià)格，支持自定義樣式，支持設(shè)置不可選的座位，也支持鍵盤(pán)控制選座。

運(yùn)行效果圖：

小提示：瀏覽器中如果不能正常運(yùn)行，可以嘗試切換瀏覽模式。

jquery-seat-charts插件使用示例

1、前臺(tái)導(dǎo)包

<script src="/jquery.seat-charts.min.js"></script>

2、<p id="select-seat" ></p>

顯示的區(qū)域id（可以在.css中設(shè)計(jì)樣式）

3.只選一個(gè)座位

$(document).ready(function() {
    var $cart = $('#select-seat'),
        $counter = $('#counter'),//顯示框
        sc = $('#seat-map').seatCharts({//座位框
            map: [//_是過(guò)道，e是座位
              'eea_eee','eee_eee','eee_eee'
            ],
            seats: {
               a: {
                    classes : 'busy-class',
                    category: '已預(yù)定'
                },
                e: {
                    classes : 'free-class',
                    category: '空閑'
                },
            },
            naming : {
                top : false,//不顯示列的編號(hào)
                left:true,   //顯示左邊（行）的編號(hào)
           	    row:['1','2','3''],//可以自定義行和列    
                columns: ['1','2','3','A','4','5','6'], //過(guò)道也要給個(gè)編號(hào)！?。?
                getLabel : function (character, row, column) {
                    return SeatLabel ++;
                }//label中顯示序號(hào)
            },

        legend : {//標(biāo)識(shí)列表
            node : $('#legend'),
            items : [
                [ 'e', 'available',   '空閑座位'],
                [ 'a', 'unavailable', '已預(yù)定'],
                [ 'f', 'unavailable',   '維修中' ]
            ]
        },
        click: function () {
            if (this.status() == 'available') {
                if (ChooseFloor>0) {//只選一個(gè)座位的辦法
                    $('#cart-item-'+oldId).remove();
                    ChooseFloor--;//已選擇的個(gè)數(shù)
                    sc.find('selected').status('available');
                }
                $('<li>'+'選擇'+this.data().category+this.settings.label+'號(hào)座位'+'</b> <a href="#" class="cancel">[刪除]</a></li>')
                    .attr('id','cart-item-'+this.settings.id)
                    .data('seatId', this.settings.id)
                    .appendTo($cart);
                ChooseFloor++;
               //座位號(hào) ：this.settings.label
                oldId=this.settings.id;//上一個(gè)選擇的座位
                oldStatus=this.status();//更改狀態(tài)
                return 'selected';
            } else if (this.status() == 'selected') {
                $('#cart-item-'+this.settings.id).remove();
                return 'available';
            } else if (this.status() == 'unavailable') {
                return 'unavailable';
            } else {
                return this.style();
            }
        }
    });
$('#select-seat').on('click', '.cancel', function () {
    sc.get($(this).parents('li:first').data('seatId')).click();
});

讀到這里，這篇“jquery seat charts插件怎么使用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章題目：jqueryseatcharts插件怎么使用
標(biāo)題URL：http://muchs.cn/article42/ihchhc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、建站公司、網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)