jQuery.pluginautoload charge vos plugins sur les DOMs HTML sans code javascript. Il suit le même principe que la librairie Dojo et jQuery mobile.Auteur
Marc Buils (marc.buils@marcbuils.fr)License
LGPL v3 (http://www.gnu.org/licenses/lgpl-3.0.txt)Site internet / Telechargement
http://marcbuils.github.com/jquery.pluginautoload/Version actuelle
v0.2.0:- Add Ajax automatic script import
- Add a better parmeters parser
Utilisation
Pour une utilisation par défaut, chargez seulement la librairie jQuery.pluginautoload:<script src="jquery.pluginautoload.js"></script>
Ajoutez ensuite le parametre data-jquery-type="{JQUERY_PLUGIN_NAME}" sur chaque balise sur laquelle vous souhaitez appliquer un plugin jQuery.
Vous pouvez aussi ajouter un paramètre data-jquery-params='[param_1,param_2,...,param_n]' pour appeler le plugin avec des paramètres.
Il est possible de modifier les options par défaut grace au code suivant:
<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>
Exemples
Exemple 1: Auto-loading Full options/without configuration
<!doctype>
<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>
<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>
<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>
Aucun commentaire:
Enregistrer un commentaire