Fork me on GitHub
Back to Roam »

Extractor

Download

Extractor is a jQuery plugin wrapping jQuery UI's dialog widget to turn part of a page into a dialog and to put it back where it belongs when closing the dialog.

Example

Have a look at the text below and click the "new window" icon in the title bar.

Extract me!

 

When you're done, hit the pin icon.

We want to enable the user to open this part of the page in a dialog. This might be useful to, for example, let the user place comments next to the content being discussed instead of underneath it.

This block being turned into a dialog by hitting the icon in the top bar actually includes the top bar itself. But by using the ui-extractor (or ui-dialog) class in a CSS rule we can hide it. And we can do the inverse, demonstrated by the tip above this text you can only see when it's loaded into the dialog.

Usage

Normally you would set up a dialog like this:

$('#comments').dialog({
    width: 400,
    close: function(evt, ui) {
        ...
    }
});

If you want to move the comments back to where they were originally when closing the dialog, all you'd have to do is this:

$('#comments').extractor({
    width: 400,
    close: function(evt, ui) {
        ...
    }
});

So include the necessary jQuery UI files as usual, then download extractor.js, include it and (optionally) add the following rule to your CSS file to turn the close icon from the jQuery dialog into a pin:

.ui-extractor .ui-dialog-titlebar .ui-icon-closethick {
    background-position: -144px -144px;
}

The ui-extractor class is applied to the dialog, so you can style the content differently depending on whether it is part of the page or loaded into the dialog.

Finally, add a way to invoke the dialog:

$('a#load-comments-in-dialog').click(function(evt) {
    evt.preventDefault();
    $('#comments').extractor({
        width: 500,
        height: 400
    });
});
WidgetThemes

Like jQuery UI? You'll probably love WidgetThemes, our new project that delivers high quality jQuery UI themes.