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 text below and click the "new window" icon in the title bar.
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.
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
});
});
Like jQuery UI? You'll probably love WidgetThemes, our new project that delivers high quality jQuery UI themes.