Minimalist Seating Chart Plugin with jQuery - flexiSeats

flexiSeats is an ultra-light jQuery plugin used for generating a simple seating chart from plain HTML checkbox elements.

How to use it:

1. Load the required flexilayout.css stylesheet for primary CSS styles.

<link href="styles/flexilayout.css" rel="stylesheet">

2. Load the Font Awesome 4 for seat icons.

<link rel="stylesheet" href="font-awesome.min.css">

3. Create an legend area to indicate the available, unavailable, booked and selected seats.

<div class="legends">
  <input id="legAvailable" type="checkbox" disabled />
  <label for="legAvailable"> Available</label>
  <input id="legAvailable" type="checkbox" data-status="notavailable" disabled />
  <label for="legAvailable"> Not Available</label>
  <input id="legBooked" type="checkbox" data-status="booked" checked disabled />
  <label for="legBooked"> Booked</label>
  <input id="legBooked" type="checkbox" checked disabled />
  <label for="legBooked"> Selected</label>
</div>

4. Create an empty container for the seating chart.

<div id="seats">
</div>

5. Load jQuery library and the jQuery flexiSeats plugin at the end of the document.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="scripts/flexilayout.js"></script>

6. Initialize the plugin and define the initial data.

var seats = $('#seats').flexiSeats({
    rows: 10,
    columns: 20,
    multiple: false,
    notavailable: ['1-2', '4-3'],
    booked: ['2-3']
});

7. API methods.

var seats = $('#seats').flexiSeats(
    // options here
);

seats.getAvailable();
seats.getNotAvailable();
seats.getBooked();
seats.getSelected();

Change log:

2016-01-19

•   Migrated blocks' CRUD logic with UI

2016-01-18

• Added Init function

2016-01-16

• JS update

2016-01-13

• Provided label for rows and columns.

2016-01-04

• Added selection mode option and enabled multiple selection in reverse order.

---

This awesome jQuery plugin is developed by pratikgaloria. For more Advanced Usages, please check the demo page or visit the official website.