Apakah pemalam jquery-seat-charts?

jquery-seat-charts ialah pemalam pemilihan tempat duduk dalam talian berdasarkan JQuery, sesuai untuk senario pemilihan tempat duduk untuk tiket penerbangan, tiket wayang dan tiket bas. Pemalam carta tempat duduk jquery menyokong jenis dan harga tempat duduk tersuai, gaya tersuai, tetapan tempat duduk yang tidak boleh dipilih dan pemilihan tempat duduk terkawal papan kekunci.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 3.6.0, komputer Dell G3.

jquery-seat-charts ialah pemalam pemilihan tempat duduk dalam talian berdasarkan JQuery Ia adalah pemalam yang sesuai untuk pemilihan tempat duduk untuk tiket penerbangan, tiket wayang dan tiket bas.

Klik pada tempat duduk di sebelah kiri untuk memaparkan maklumat tempat duduk di sebelah kanan serta-merta, dan ia juga boleh mengira fungsi pengumpulan.

Ciri: Menyokong jenis dan harga tempat duduk tersuai, menyokong gaya tersuai, menyokong tetapan tempat duduk yang tidak boleh dipilih, dan juga menyokong kawalan papan kekunci untuk pemilihan tempat duduk.

Perenderan operasi:

Petua: Jika penyemak imbas tidak berjalan dengan betul, anda boleh cuba menukar mod penyemakan imbas .

Contoh penggunaan pemalam Jquery-seat-charts

1 Pakej panduan bahagian hadapan

<script></script>

2 🎜><p id="select-seat"></p>Id kawasan yang dipaparkan (boleh digayakan dalam .css)

3 Pilih satu tempat duduk sahaja

$(document).ready(function() {
    var $cart = $('#select-seat'),
        $counter = $('#counter'),//显示框
        sc = $('#seat-map').seatCharts({//座位框
            map: [//_是过道，e是座位
              'eea_eee','eee_eee','eee_eee'
            ],
            seats: {
               a: {
                    classes : 'busy-class',
                    category: '已预定'
                },
                e: {
                    classes : 'free-class',
                    category: '空闲'
                },
            },
            naming : {
                top : false,//不显示列的编号
                left:true,   //显示左边（行）的编号
           	    row:['1','2','3''],//可以自定义行和列    
                columns: ['1','2','3','A','4','5','6'], //过道也要给个编号！！！
                getLabel : function (character, row, column) {
                    return SeatLabel ++;
                }//label中显示序号
            },

[Pembelajaran yang disyorkan:

        legend : {//标识列表
            node : $('#legend'),
            items : [
                [ 'e', 'available',   '空闲座位'],
                [ 'a', 'unavailable', '已预定'],
                [ 'f', 'unavailable',   '维修中' ]
            ]
        },
        click: function () {
            if (this.status() == 'available') {
                if (ChooseFloor>0) {//只选一个座位的办法
                    $('#cart-item-'+oldId).remove();
                    ChooseFloor--;//已选择的个数
                    sc.find('selected').status('available');
                }
                $('

'+'选择'+this.data().category+this.settings.label+'号座位'+' [删除]

')                     .attr('id','cart-item-'+this.settings.id)                     .data('seatId', this.settings.id)                     .appendTo($cart);                 ChooseFloor++;                //座位号 ：this.settings.label                 oldId=this.settings.id;//上一个选择的座位                 oldStatus=this.status();//更改状态                 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(); });tutorial video jQuery.

、video bahagian hadapan web】

Atas ialah kandungan terperinci Apakah pemalam jquery-seat-charts?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!