This is a demonstration of jQuery hijack plugin.
This demo uses jQuery 1.3.2 and jQuery UI 1.7, although any jQuery-based plugin that loads remote content into an element (widget) and allows you to pass callbacks could be used instead. I also used this plugin with jqModal.
See blog post about the plugin for additional description.
If you are interested in this plugin, you may also try my other plugins, visit my blog or portfolio for other javascript related info.
Code used:
$("#tabs").tabs({ // start jQuery UI tabs
load: function(event, ui) { // load callback, hijacking every loaded panel
$(ui.panel).hijack();
}
});
<button type="button" rel="ajax1.html" class="opendialog">Open dialog</button>
<button type="button" rel="ajax2.html" class="opendialog">Open dialog 2</button>
<div id="dialog" style="display:none"></div>
$(".opendialog").click(function() { // when clicking on a button
$("#dialog").load($(this).attr('rel'), function() { // load remote content from its 'rel' attribute into hidden div
$(this)
.dialog('destroy') // destroy dialog widget (if exists)
.dialog({ // and recreate it with following options
title: "jQuery hijack demo",
open: function() { $(this).hijack()}
});
});
});
It is possible to attach a callback function that will be run after hijacking of an element. This callback function will be called with no parameters and this will be the element that is being hijacked. You may use this to e.g. initialize some widgets within loaded content. Here we use this function to change colors of paragraphs.
// define a function
var paragraphsToRed = function() {
alert('All paragraphs will be red...');
$('p',this).css('color', 'red'); // find all paragraphs in current context and make them red
};
$(".opendialog2").click(function() { // when clicking on a button
$("#dialog").load($(this).attr('rel'), function() { // load remote content from its 'rel' attribute into hidden div
paragraphsToRed.call(this); // call paragraphsToRed for the first time
$(this)
.dialog('destroy') // destroy dialog widget (if exists)
.dialog({ // and recreate it with following options
title: "jQuery hijack demo (callback)",
open: function() { $(this).hijack(paragraphsToRed); } // attach the paragraphsToRed function
});
});
});