jQuery.pluginautoload

Load your plugins on html DOM without javascript code.

Download .zip Download .tar.gz View on GitHub

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>