自訂JQuery外掛程式

標籤：許可權   學習   方法   ide   對象   str   func   頁面   需要   

           Jquery是個好東西，今天學習了怎麼自訂Jquery外掛程式，下面開始學習。1.使用外掛程式前的代碼

 

  
 //(1)根據按鈕添加分隔字元 
  
/** 查詢工具列中table中的所有td，去掉第一個td與最後一個td */
  
var table = $("#tb > table"); 
  
var tds = table.find("td:not(:first,:last)");
  
/** 判斷td的個數 */
  
if(tds.length > 0){
  
/** 建立td添加到所有查詢到得td前面(相鄰元素) */
  
 $(‘<td><div class="dialog-tool-separator"></div></td>‘)
  
.insertBefore(tds);
  
}
  
//(2)沒有一個許可權需要把工具列中table隱藏 
  
if(table.find("td").length == 1){
  
table.hide();
  
}
 

2.自訂外掛程式   (1)  自訂外掛程式的代碼要滿足下面的格式

 

  
 (function($){ 
  
 /**書寫自訂的JQuery方法的位置*/
  
 })(jQuery);

 

    (2)  自訂JQuery對象的方法按照下面格式自訂即可.
            注意: 在該方法裡面的this是指調用該方法的Jquery對象

 

  
 $.fn.自訂方法的名字 = function(){ 
  
 /** 邏輯代碼 */ 
  
 }
 

   (3)  完成的代碼        代碼:

 

  
/**
  
 * jQuery工具外掛程式
  
 */
  
(function($){
  
 /** 

  
 * 最佳化表格上面的工具列外掛程式
  
 * (1)根據按鈕添加分隔字元 
  
 * (2)沒有一個許可權需要把工具列中table隱藏 
  
 */
  
$.fn.formart4ToolBar = function(){
  
/**
  
 * this:代表調用當前方法的JQuery對象 即$("#tb > table")
  
 */
  
//(1)根據按鈕添加分隔字元 
  
/** 查詢工具列中table中的所有td，去掉第一個td與最後一個td */
  
var tds = this.find("td:not(:first,:last)");
  
/** 判斷td的個數 */
  
if(tds.length > 0){
  
/** 建立td添加到所有查詢到得td前面(相鄰元素) */
  
 $(‘<td><div class="dialog-tool-separator"></div></td>‘)
  
.insertBefore(tds);
  
}
  
//(2)沒有一個許可權需要把工具列中table隱藏 
  
if(this.find("td").length == 1){
  
this.hide();
  
}
  
};
  
})(jQuery);
 

    在頁面中調用:  直接通過Jquery對象.方法名() 來調用    

 

  
 //調用自訂的外掛程式來最佳化頁面
  
$("#tb > table").formart4ToolBar();
 

自訂JQuery外掛程式