jQuery.pluginautoload
Automatic plugin loader for html DOM
jQuery.pluginautoload load your plugins on html DOM without javascript code. This plugin is same as dojo or jQuery mobile system.
Author
Marc Buils (marc.buils@marcbuils.fr)
License
LGPL v3 (http://www.gnu.org/licenses/lgpl-3.0.txt)
Current version
v0.3.0:
- Add asynchron lazyload system for script download
- Replace class usation by data-dataloader parameter for DOM loaded
- Remove console warning for old browsers
Warning
On old browser, a JSON framework is required (see https://github.com/douglascrockford/JSON-js)
Usation
For default use, load only jQuery.pluginautoload script:
<script src="jquery.pluginautoload.js"></script>
And add data-jquery-type="{JQUERY_PLUGIN_NAME}" to apply a jQuery plugin on DOMs. You can add data-jquery-params='[param_1,param_2,...,param_n]' to use the plugin with parameters.
You can change default options with following code:
<script>
;(function($){
$.pluginautoload_options = $.extend({}, $.pluginautoload_options, {
autoload: true, // $('body').pluginautoload() is call when document is ready
autoimport: true, // Load script in Ajax if plugin isn't loaded
libs_dir: 'js/', // Directory of plugins loaded in Ajax
filename: function( p_type ){ // Function to compute the filename of plugins loaded in Ajax
return this.libs_dir + 'jquery.' + p_type.toLowerCase() + '.js';
}
});
})(jQuery);
</script>
Exemple 1: Auto-loading Full options/without configuration
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery.pluginautoload: Exemple1 - Auto-loading Full options/without configuration</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="../jquery.pluginautoload.js"></script>
</head>
<body>
<h1>jQuery.pluginautoload: Exemple 1 - Auto-loading Full options/without configuration</h1>
<div data-jquery-type="myplugin"></div>
<div data-jquery-type="mypluginwithparams" data-jquery-params='["parameters1", {"paramaters2": "is a struct"}, 325]'></div>
</body>
</html>
Exemple 2: Auto-loading with automatic Ajax import for custom path and custom file names
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery.pluginautoload: Exemple2 - Auto-loading with automatic Ajax import for custom path and custom file names</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="../jquery.pluginautoload.js"></script>
<script>
;(function($){
$.pluginautoload_options = $.extend({}, $.pluginautoload_options, {
libs_dir: 'jscustom/',
filename: function( p_type ){
return this.libs_dir + 'jquery.' + p_type.toLowerCase() + 'custom.js';
}
});
})(jQuery);
</script>
</head>
<body>
<h1>jQuery.pluginautoload: Exemple 2</h1>
<h2>Auto-loading with automatic Ajax import for custom path and custom file names</h2>
<div data-jquery-type="myplugin"></div>
</body>
</html>
Exemple 3: Auto-loading for a section only
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery.pluginautoload: Exemple 3 - Auto-loading for a section of page only</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="../jquery.pluginautoload.js"></script>
<script>
;(function($){
$.pluginautoload_options = $.extend({}, $.pluginautoload_options, {
autoload: false
});
$(function(){
$('#autoload').pluginautoload();
});
})(jQuery);
</script>
</head>
<body>
<h1>jQuery.pluginautoload: Exemple 3</h1>
<h2>Auto-loading for a section of page only</h2>
<div data-jquery-type="myplugin">This div is not auto-loaded</div>
<div id="autoload">
<div data-jquery-type="myplugin">This div is auto-loaded</div>
</div>
</body>
</html>