Qu'est-ce que le plug-in jquery-seat-charts ?

jquery-seat-charts est un plug-in de sélection de sièges en ligne basé sur JQuery, adapté aux scénarios de sélection de sièges de billets d'avion, de cinéma et de bus. Le plug-in jquery-seat-charts prend en charge les types et prix de sièges personnalisés, les styles personnalisés, la définition de sièges non sélectionnables et la sélection de sièges contrôlée par clavier.

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.6.0, ordinateur Dell G3.

jquery-seat-charts est un plug-in de sélection de sièges en ligne basé sur JQuery. Il s'agit d'un plug-in adapté à la sélection de sièges pour les billets d'avion, de cinéma et de bus.

Cliquez sur le siège à gauche pour afficher instantanément les informations sur le siège à droite, et il y a une fonction pour calculer le total.

Caractéristiques : prend en charge les types et les prix de sièges personnalisés, prend en charge les styles personnalisés, prend en charge le réglage des sièges non sélectionnables et prend également en charge le contrôle du clavier pour la sélection des sièges.

Rendus de fonctionnement :

Conseils : Si le navigateur ne fonctionne pas normalement, vous pouvez essayer de changer de mode de navigation.

Exemple d'utilisation du plug-in jquery-seat-charts

1. Package de guide frontal

<script></script>

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

Identifiant de la zone affichée (peut être stylisé en .css)

3.

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

【Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo web front-end】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!