How to Use jquery to load js and css plug-ins on demand

 

* ===================================================== ==================

** 1. Overview:

* ===================================================== ==================

* $. Plugin-is a plug-in that jQuery uses to dynamically load js and css files. It is mainly used to reduce network traffic and enhance code security.

*

* Document address: http://nicolas.rudas.info/jQuery/getPlugin/

*: Http://code.google.com/p/lazyloader/downloads/

* Use version: 081002-02 Oct 2008

*

* ===================================================== ==================

** 2. Usage Overview:

* ===================================================== ==================

* $. Plugin (name, settings) declares a set of plug-ins with the specified name and parameters.

* $. Plugin (name) instantiate the plug-in.

* $. Plugin (name). get () loads the specified plug-in and calls the default callback function.

* $. Plugin (name, function) loads the specified plug-in and calls the specified function upon completion (this function will overwrite the default callback function)

* $. Plugin () loads all the required plug-ins

*

* ===================================================== ==================

** 3. parameter description:

* ===================================================== ==================

* @ Param name {String} is the name specified for the plug-in set.

*

* @ Param settings {Object} parameters of the plug-in Set

*-Files {Array, String} list of files required by the plug-in Set

*-Selectors {Array, String} jQuery selector set list (this plug-in set will be downloaded if the element matches the specified selector)

*-Callback {Function} specifies the default callback Function of the plug-in SET (called after the plug-in is downloaded)

*-Cache {Boolean} indicates whether the cached file is in the browser cache ('true' by default ')

*-Ajax {Object}: parameters of the ajax request for downloading files, which are consistent with those set in jQuery.

*-Context {Object, jQuery} specifies the insert position of the plug-in SET (in document by default)

*-Target {Object, jQuery} specifies the inserted element node (in head by default)

*-Callback Function when the init {Function} plug-in completes the setting

*-PreLoad {Function}: Function called before loading any file

*-PostLoad {Function}: the callback Function when all files are loaded.

*

* @ Param callback {Function} loads the specified plug-in and calls the specified Function upon completion (this Function will overwrite the default callback Function)

* ===================================================== ==================

** 4. User Manual:

* ===================================================== ==================

* $. Plugin (name)

*. Get ([callback]) loads the specified plug-in and calls the callback function. When the callback function parameter is blank, the default callback function is called.

*

*. GetFile (url) loads the specified file in the plug-in and calls the default callback function.

*

*. IsNeeded () checks whether the plug-in is required on the page (depending on the selector specified by the plug-in). If yes, true is returned. Otherwise, false is returned.

*

* ===================================================== ==================

** 5. Example:

* ===================================================== ==================

* Create a Tabs Plugin:

* $. Plugin ('tabs ',{

* Files: ['../styles/tabs.css ',

* '../Scripts/tabs. js'],

* Selectors: ['. tabs'],

* Callback: function () {$ ('. tabs'). tabs ();}

*});

*

* $. Plugin ('tabs'). get ();

*

* Create a Loader Plugin:

* $. Plugin ('loader ',{

* Files: ['../styles/mystyles.css ',

* '../Scripts/myscript. js ',

* '../Scripts/myscript2.js ',

* '../Scripts/myscript3.js']

* Selectors: ['body'],

* Init: function (url) {$ ('body'). append ('<ol id = "now-loading"> </ol> ');},

* PreLoad: function (url ){

* $ ('# Now-loading '). append ('<li data-file = "' + url + '"> Loading:' + url + '</li> ')

*},

* PostLoad: function (url ){

* $ ('Li [data-file = "'+ url +'"] ', '{now-loading'{.css ('text-recoration', 'Line-passthrough ')});

*}

*});

*

* $. Plugin ('loader ', function () {$ (' # now-loading '). remove ();});

*

******************************/