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(); });

  *

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