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

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

**
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('<li
data-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();
});

*

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