Was ist das JQuery-Seat-Charts-Plug-In?

jquery-seat-charts ist ein auf JQuery basierendes Online-Plug-in zur Sitzplatzauswahl, das sich für Sitzplatzauswahlszenarien für Flugtickets, Kinokarten und Bustickets eignet. Das Plug-in „jquery-seat-charts“ unterstützt benutzerdefinierte Sitzplatztypen und -preise, benutzerdefinierte Stile, das Festlegen nicht auswählbarer Sitzplätze und die tastaturgesteuerte Sitzplatzauswahl.

Die Betriebsumgebung dieses Tutorials: Windows7-System, JQuery3.6.0-Version, Dell G3-Computer.

jquery-seat-charts ist ein Online-Plug-in zur Sitzplatzauswahl, das auf JQuery basiert. Es ist ein Plug-in, das für die Sitzplatzauswahl für Flugtickets, Kinokarten und Bustickets geeignet ist.

Klicken Sie auf den Sitzplatz links, um sofort die Sitzplatzinformationen auf der rechten Seite anzuzeigen, und es gibt eine Funktion zur Berechnung der Gesamtsumme.

Funktionen: Unterstützt benutzerdefinierte Sitzplatztypen und -preise, unterstützt benutzerdefinierte Stile, unterstützt die Einstellung nicht auswählbarer Sitze und unterstützt auch die Tastatursteuerung für die Sitzplatzauswahl.

Betriebsdarstellungen:

Tipps: Wenn der Browser nicht normal läuft, können Sie versuchen, den Browsermodus zu wechseln.

Jquery-Seat-Charts-Plug-in-Nutzungsbeispiel

1. Front-End-Guide-Paket

<script></script>

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

Angezeigte Bereichs-ID (kann in .css gestaltet werden)

3. Wählen Sie nur einen Sitzplatz aus

$(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(); }); 【Empfohlenes Lernen:

jQuery-Video-Tutorial, Web-Frontend-Video】

Das obige ist der detaillierte Inhalt vonWas ist das JQuery-Seat-Charts-Plug-In?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!