|
Written by Arash Karimzadeh
|
|
Wednesday, 18 February 2009 16:19 |
|
includeMany is jQuery plugin for including many external JavaScript, CSS and HTML files simultaneously in runtime. This plugin provides callback for each of the files and in addition there is finallyCallback which will be raised after all files are loaded and all callbacks are done.
This extra callback guarantee that every files are loaded and available to use. By this plugin you can use JavaScript to include other js and css files. You can also load other files such as html or a remote page using an HTTP GET request.
Download includeMany Current version is 1.2.2
You can get it from here. includeMany- Formats
- Parameters
- Examples & Downloads
- Sample File
Formats $.include(files,[finalCallback]);
$.chainclude(files,[finalCallback]); available in v.1.2.0 and +*read more about this functionality here. Parameters Can be - A single file such as 'fileurl'
- List of files such as ['fileurl1','fileurl2',...,'fileurln']
- Key/value object of files such as {'fileurl1':callback,'fileurl2':callback,...,'fileurl2':callback}
finalCallback [function] optional
Is a function which will be called after all files are loaded and all callbacks have been called. Does it support Synchronous loading?Yes, by using the $.chainclude() you can load js and css files in sequence. read more about it here. Examples & Downloads- The simplest format is including one file as below
$.include('script1.js');
%24.include%28%27script1.js%27%29%3B - You can add finallyCallback to the above example so will be called when the script is loaded
$.include('script1.js',functionName);
%24.include%28%27script1.js%27%2CfunctionName%29%3B
function functionName(){ $.trace('some loading is done!!!'); }
function%20functionName%28%29%7B%0A%20%20%20%20%24.trace%28%27some%20loading%20is%20done%21%21%21%27%29%3B%0A%7D - You can include multiple files:
$.include( ['styles/css2.css','scripts/js2.js'] ,someOptionalFunction);
%24.include%28%20%5B%27styles%2Fcss2.css%27%2C%27scripts%2Fjs2.js%27%5D%20%2CsomeOptionalFunction%29%3B - You can define a callback for each includedFile
$.include( { 'script1.js':function(){ /*something*/ }, 'script2.js':function(){ /*something*/ }, 'somecss.css':null, 'temp2.html':function(data){alert(data)} } );
%24.include%28%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%27script1.js%27%3Afunction%28%29%7B%20%2F%2Asomething%2A%2F%20%7D%2C%0A%20%20%20%20%20%20%20%20%27script2.js%27%3Afunction%28%29%7B%20%2F%2Asomething%2A%2F%20%7D%2C%0A%20%20%20%20%20%20%20%20%27somecss.css%27%3Anull%2C%0A%20%20%20%20%20%20%20%20%27temp2.html%27%3Afunction%28data%29%7Balert%28data%29%7D%0A%20%20%20%20%7D%0A%29%3B - You can also define a finallyCallback so, after all files are loaded and all callbacks are called, this function will be fired.
var globalCallback= function(){ alert('all files are loaded!!!'); } $.include( { 'script1.js':function(){ /*something*/ }, 'script2.js':function(){ /*something*/ }, 'somecss.css':null, 'temp2.html':function(data){alert(data)} } ,globalCallback );
var%20globalCallback%3D%20function%28%29%7B%0A%20%20%20%20alert%28%27all%20files%20are%20loaded%21%21%21%27%29%3B%0A%7D%0A%24.include%28%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%27script1.js%27%3Afunction%28%29%7B%20%2F%2Asomething%2A%2F%20%7D%2C%0A%20%20%20%20%20%20%20%20%27script2.js%27%3Afunction%28%29%7B%20%2F%2Asomething%2A%2F%20%7D%2C%0A%20%20%20%20%20%20%20%20%27somecss.css%27%3Anull%2C%0A%20%20%20%20%20%20%20%20%27temp2.html%27%3Afunction%28data%29%7Balert%28data%29%7D%0A%20%20%20%20%7D%0A%20%20%20%20%2CglobalCallback%0A%29%3B
atlast is our finallyCallback function.
Sample FileYou can download the sample file here. Tags: includeMany | jQuery | Plugin
|
|
Last Updated on Thursday, 03 December 2009 05:43 |
