Skip to content
Branch: master
Go to file
Code

Latest commit

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

README.md

jQuery Extractor

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.

Have a look at the demo.


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 jquery.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
    });
});

Credits

Thanks to Farhan Shahid for reporting and fixing a bug with overriding the dialog options.

About

Turn part of a page into a jQuery UI dialog. Put it back when done.

Resources

License

Releases

No releases published
You can’t perform that action at this time.