jQuery.pluginautoload: Load your plugins on html DOM without javascript code
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
exemples
Readme.md
jquery.pluginautoload.js
jquery.pluginautoload.min.js

Readme.md

#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>