jQuery Air Passenger Seat Layout Example

Question

I showed an extreme sample before 6 months. it is related to "Air routes". there is a plane map. you can select a seat.you are separated. Can you give me this link if you know where is?

Answer 1

This: http://www.digital-web.com/extras/jquery_crash_course/?

Answer 2

This is the jQuery that runs on the page when the DOM has loaded in Corbin's answer

$(document).ready(function(){
    // Disable various aspects of passenger details table
    $('#passenger_details input, #passenger_details select').attr('disabled', 'disabled');

    // Add class="selected" to tab + tbody
    $('#tabs a:first, #passenger_details tbody:first').addClass('selected');

    // Get the value of the tab link, and display tbody
    $('#tabs a').click(function(){
        // Switch class="selected" for tabs
        $('#tabs a').removeClass('selected');
        $(this).addClass('selected');

        // Asign value of the link target
        var thisTarget = $(this).attr('href');

        // Show target tbody and hide others
        $('#passenger_details tbody').removeClass('selected');
        $(thisTarget).addClass('selected');
        this.blur();
        return false;
    });

    // Add click listener to seats
    $('#airplane a').click(function(){
        // Assign value of the link target
        var thisTarget = $(this).attr('href');

        // Show target tbody and hide others
        $('#passenger_details tbody').removeClass('selected');
        $(thisTarget).addClass('selected');

        // Swap out class="selected" for tab
        $('#tabs a').removeClass('selected');
        $('#tabs a[@href=' + thisTarget + ']').addClass('selected');

        // Assign the value of the parent <li class="*">
        var thisSeat = $(this).parent('li').attr('class');

        // Compare parent <li class="*"> against
        // <tr> in <table id="passenger_details">
        var thisRow = $('#passenger_details tr');
        for (var i = 0, j = thisRow.length; i < j; i++) {
            if (thisSeat == thisRow[i].className) {
                // Add class="selected" to row
                $(thisRow[i]).addClass('selected');

                // Enable inputs and selects so that they can be used
                $(thisRow[i]).children('td').children('input, select').removeAttr('disabled');
            }
            else 
                if (thisSeat + ' selected' == thisRow[i].className) {
                    // Remove class="selected" from row
                    $(thisRow[i]).removeClass('selected');

                    // Disable inputs and selects that aren't being used
                    $(thisRow[i]).children('td').children('input').attr('disabled', 'disabled').val('');
                    $(thisRow[i]).children('td').children('select').each(function(){
                        this.disabled = true;
                        this.selectedIndex = 0;
                    });
                }
        }

        // Toggle selected class on/off
        $(this).toggleClass('selected');
        this.blur();
        return false;
    });

    // Assign function to master checkbox
    $('#check_all').click(function(){
        if (this.checked === true) {
            // Add class="selected" to seat
            $('#airplane a, #passenger_details tbody tr').addClass('selected');
            $('#passenger_details input, #passenger_details select').removeAttr('disabled');
            this.blur();
        }
        else {
            // Remove class="selected" from seat
            $('#airplane a, #passenger_details tbody tr').removeClass('selected');
            $('#passenger_details input').attr('disabled', 'disabled').val('');
            $('#passenger_details select').each(function(){
                this.disabled = true;
                this.selectedIndex = 0;
            });
            this.blur();
        }
    });

    // Disable the form submission
    $('form').submit(function(){
        alert('This is only a test. Were it a real emergency, panic would ensue.');
        return false;
    });
});

Answer 3

FYI, you can download the code/css/images from here. The zip file is near the bottom of the page...about 4 paragraphs up where it says "download a zip of all the files used in this demo."