What is the jquery-seat-charts plug-in?

jquery-seat-charts is an online seat selection plug-in based on JQuery, suitable for seat selection scenarios for air tickets, movie tickets, and bus tickets. The jquery-seat-charts plug-in supports custom seat types and prices, custom styles, setting non-selectable seats, and keyboard-controlled seat selection.

The operating environment of this tutorial: windows7 system, jquery3.6.0 version, Dell G3 computer.

jquery-seat-charts is an online seat selection plug-in based on JQuery. It is a plug-in suitable for seat selection for air tickets, movie tickets, and bus tickets.

Click on the seat on the left to instantly display the seat information on the right, and there is a function to calculate and accumulate.

Features: Supports custom seat types and prices, supports custom styles, supports setting non-selectable seats, and also supports keyboard control for seat selection.

Operation rendering:

Tips: If the browser cannot run normally, you can try switching the browsing mode .

jquery-seat-charts plug-in usage example

1, front-end guide package

<script></script>

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

Displayed area id (can be styled in .css)

3. Select only one seat

$(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中显示序号
            },

        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(); });

[Recommended learning: jQuery video tutorial, web front-end video】

The above is the detailed content of What is the jquery-seat-charts plug-in?. For more information, please follow other related articles on the PHP Chinese website!