JQuery Undoable Plugin Demos

This page shows a demo of the jquery.undoable plugin. This is plugin provides a more usable alternative to confirmation dialogs by assisting in building user interfaces which allow undoing operations.

Read the blog post introducing this plugin for more details.

Other Demos

TABLE With Double Rows Demo

This sample demonstrates how to use jquery.undoable with a table where each entity is represented by two table rows.

The purpose is to show how to leverage the extensibility points for more custom scenarios. This also uses CSS classes rather than inline styling.

title author date
This is an interesting plugin Bugs Bunny 12/31/2009 delete

This is the body of the post.

It may have multiple lines.
No, it's a bit derivative. But nice try. Derrida 1/1/2010 delete

This is the body of the post.

It may have multiple lines.
Writing sample data is no fun at all. Peter Griffin 1/2/2010 delete

This is the body of the post.

It may have multiple lines.

The Code

$(function() {
    $('a.delete').undoable({
        inlineStyling: false,
        showingStatus: function(undoable) {
            var bodyRow = undoable.next('tr');
            bodyRow.hide().addClass('undoable').fadeIn('slow').show();
        },
        hidingStatus: function(undoable, target) {
            undoable.next('tr').removeClass('undoable');
        }
    });
});

The Markup

<table class="comments">
    <thead>
        <tr>
            <th>title</th>
            <th>author</th>
            <th>date</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>This is an interesting plugin</td>
            <td>Bugs Bunny</td>
            <td>12/31/2009</td>
            <td><a href="#1" class="delete">delete</a></td>
        </tr>
        <tr class="body">
            <td colspan="4">
                <p>This is the body of the post.</p>
                <p>It may have multiple lines.</p>
            </td>
        </tr>
        <tr>
            <td>No, it's a bit derivative. But nice try.</td>
            <td>Derrida</td>
            <td>1/1/2010</td>
            <td><a href="#2" class="delete">delete</a></td>
        </tr>
        <tr class="body">
            <td colspan="4">
                <p>This is the body of the post.</p>
                <p>It may have multiple lines.</p>
            </td>
        </tr>
        <tr>
            <td>Writing sample data is no fun at all.</td>
            <td>Peter Griffin</td>
            <td>1/2/2010</td>
            <td><a href="#3" class="delete">delete</a></td>
        </tr>
        <tr class="body">
            <td colspan="4">
                <p>This is the body of the post.</p>
                <p>It may have multiple lines.</p>
            </td>
        </tr>
    </tbody>
</table>