Full-Featured Seating Layouts – Like Movie, Flight, and Seat Selection | seatLayout.js

seatLayout.js is a jQuery extension, you need to have JQ already installed or add a reference to your page.

This plugin helps developers create flexible and customizable seating layouts that can be helpful in a movie, flight, and seat booking selection.

Must Read – 📅 A Calendar Gesture Range Selection Siding Component for vue3

How to make use of it:

1. Add the stylesheet seatLayout.css and JavaScript seatLayout.js to the webpage.

<link rel="stylesheet" href="/path/to/seatLayout.css">
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/seatLayout.min.js"></script>

2. Create a container to hold the seating layout.

<div class="example"></div>

3. Define your information for the seating layout utilizing JSON or JavaScript.

// layoutData.json
{
  "product_id": 12345,
  "freeSeating": false,
  "tempTransId": "12345",
  "seatLayout": {
    "colAreas": {
      "Count": 2,
      "intMaxSeatId": 43,
      "intMinSeatId": 2,
      "objArea": [{
          "AreaDesc": "EXECUTIVE",
          "AreaCode": "0000000003",
          "AreaNum": "1",
          "HasCurrentOrder": true,
          "objRow": [{
              "GridRowId": 1,
              "PhyRowId": "A",
              "objSeat": [{
                  "GridSeatNum": 1,
                  "SeatStatus": "0",
                  "seatNumber": 1
                },
                // ...
              ]
            },
            // ...
          ]
        },
        {
          "AreaDesc": "SPECIAL",
          "AreaCode": "0000000002",
          "AreaNum": "2",
          "HasCurrentOrder": true,
          "objRow": [{
              "GridRowId": 1,
              "PhyRowId": "N",
              "objSeat": [{
                  "GridSeatNum": 3,
                  "SeatStatus": "0",
                  "seatNumber": 1
                },
                // ...
              ]
            },
          ]
        }
      ]
    }
  },
  "areas": [],
  "groupedSeats": []
}

4. Initialize the plugin on the container and populate the seating layout with the info you provide.

$('.selectMove').seatLayout({
  data: JSON.parse(seatData)
});

5. Specify the variety of seats allowed to select at a time.

$('.selectMove').seatLayout({
  data: JSON.parse(seatData),
  numberOfSeat: 2
});

6. Determine whether or not to not present the motion buttons.

$('.selectMove').seatLayout({
  data: JSON.parse(seatData),
  showActionButtons: false
});

7. Apply further CSS classes to the seating layout.

$('.selectMove').seatLayout({
  data: JSON.parse(seatData),
  classes : {
    doneBtn : '',
    cancelBtn : '',
    seat:'',
    row:'',
    area:'',
    screen:''
  }
});

8. Available callback capabilities.

$('.selectMove').seatLayout({
  callOnSeatRender: function (Obj) {
    //modify seat object if require and return it;
    return Obj;
  },
  callOnSeatSelect: function (_event, _data, _selected, _element) {
    console.log(_event);
    console.log(_data);
    console.log(_selected);
  },
  selectionDone: function (_array) {
    console.log(_array);
  },
  cancel: function () {
    return false;
  }
});

Must Read – A Simple and Easy to Use Vanilla JS Color Picker With Alpha Selection

Initialize

data :

data (object) This is a JavaScript object. It helps to print the seat layout of the movie please find the JSON file, which is help to understand the structure.

numberOfSeat

numberOfSeat (number) The number of seats allows for selecting

showActionButtons

showActionButtons (bool) Default is true, hide the action button i.e Done and Cancel.

classes

classes (object) set the component-wise classes

Create Flexible Seating Layouts, Seat Layout Plugin/Github

Read More – 

JavaScript Autocomplete With Multiple Selection | SelectPure Component
Customizable Vanilla JS Selection Box/Text Input Plugin | Choices.js


See Demo And Download

Official Website(SachinKurkute): Click Here

This superior jQuery/javascript plugin is developed by SachinKurkute. For extra Advanced Usage, please go to the official website.

Share