本节内容:
按需加载js与css的jquery插件
说明如下:
** 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(); });
*/