jquery按需加载js和css插件使用说明

来源：互联网发布：淘宝网人工客服电话编辑：程序博客网时间：2024/05/16 23:39

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

** 1.概述:

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

*$.plugin – 是jQuery用来动态加载js和css文件的插件。主要用来减少网络流量以及相对的加强代码的安全性。

* 文档地址 :http://nicolas.rudas.info/jQuery/getPlugin/

* 下载地址 :http://code.google.com/p/lazyloader/downloads/

* 使用版本 : 081002 - 02 Oct 2008

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

**2.用法简介:

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

*$.plugin(name,settings) 声明一个指定命名（name）和设置参数的插件集合

* $.plugin(name) 将该插件实例化.

*$.plugin(name).get() 加载指定插件并调用默认回调函数

*$.plugin(name,function) 加载指定插件并在完成时调用指定函数（该函数将覆盖默认回调函数）

* $.plugin() 加载所有需要是的插件集合

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

** 3.参数说明:

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

* @param name {String} 为插件集合指定的名称

* @param settings {Object} 插件集合的参数

* - files {Array,String} 该插件集所需的文件列表

* - selectors {Array,String} jQuery选择器集合列表（如果元素匹配指定选择器时，该插件集合将被下载）

* - callback {Function} 指定该插件集的默认回调函数（该插件下载完成后调用）

* - cache {Boolean} 是否缓存文件在浏览器缓存中（默认为‘true’）

* - ajax {Object} 下载文件ajax请求的参数，同jQuery中设置一致

* - context {Object,jQuery} 指定该插件件集合的插入位置（默认是在document中）

* - target {Object,jQuery} 指定插入的元素节点（默认是head中）

* - init {Function} 插件完成设置时的回调函数

* - preLoad {Function} 加载任何一个文件前调用的函数

* - postLoad {Function} 所有文件加载完成时的回调函数

* @param callback {Function} 加载指定插件并在完成时调用指定函数（该函数将覆盖默认回调函数）

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

**4.使用手册:

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

*$.plugin(name)

* .get([callback]) 加载指定指定插件并调用回调函数，当回调函数参数为空时将调用默认回调函数

* .getFile(url) 加载插件中的指定文件并调用默认的回调函数

* .isNeeded() 检查该插件是否是该页面需要的（根据插件所指定的选择器）如果需要则返回true,其它情况返回false

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

** 5.示例:

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

* 创建 Tabs 插件:

* $.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('<lidata-file="'+url+'">Loading: '+url+'</li>')

* },

* postLoad : function(url){

* $('li[data-file="'+url+'"]' ,'#now-loading').css('text-decoration','line-through') });

* }

* });

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

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