jquery插件自定義方法

Question

我想構建我的第一個jQuery插件，它基本上創建一個按鈕從div與鼠標懸停/點擊狀態等，下面的代碼適用於基本按鈕，但是我想創建一個突出顯示方法指定一個類來替換'正常'類。該方法被調用，但我似乎無法讀取選項？另外，如果我通過硬編碼來指定類名（addClass），我似乎失去了鼠標事件的結束和點擊狀態？

代碼：

(function(jQuery) { 
jQuery.fn.divbutton = function(options) 
    { 
     // default settings 
     var options = jQuery.extend(
     { 
      width: '75px',         // button width 
      height: '25px',         // button height 
      normal_class: 'brighterbutton',     // normal state class 
      highlight_class: 'brighterbutton-highlight', // normal state class 
      mouseover_class: 'brighterbutton-mouseover', // mouseover class 
      mousedown_class: 'brighterbutton-mousedown', // mousedown class 
      highlighted: false 
     }, 
     options); 
    this.each(function() 
    { 
     jQuery(this).addClass(options.normal_class); 
     jQuery(this).width(options.width); 
     jQuery(this).height(options.height); 

     jQuery(this).mouseover(function() { 
      jQuery(this).addClass(options.mouseover_class); 
     }); 

     jQuery(this).mouseout(function() { 
      jQuery(this).removeClass(options.mouseover_class); 
      jQuery(this).removeClass(options.mousedown_class); 
     }); 

     jQuery(this).mousedown(function() { 
      jQuery(this).addClass(options.mousedown_class); 
     }); 

     jQuery(this).mouseup(function() { 
      jQuery(this).removeClass(options.mousedown_class); 
     }); 
    }); 

    // public methods 
    this.doHighlight = function() 
    { 
     alert("this doesnt get called"); 
     return this; 
    }; 

    return this; 
}; 



jQuery.fn.highlight = function() 
{ 
    alert("this gets called"); 

    return this.each(function() 
    { 
     //this.removeClass(this.options.normal_class); 
     //this.addClass(this.options.highlight_class); 
    }); 
}; 

})(jQuery); 

Answer 1

感謝大家的幫助，我設法做到了我開始做的事情，即擁有一個「highlightable」按鈕，其中所有的外觀和感覺都是通過css類完全設置的。我確實基於我對jquery的有限知識質疑這種效率，並不確定鏈接方法是否會更快/更高效？

;(function(jQuery) { 
    jQuery.fn.brighterbutton = function(options) { 
     // default settings 
     var options = jQuery.extend(
     { 
      width: '75px',            // button width 
      height: '25px',            // button height 
      normal_class: 'brighterbutton',        // normal state class 
     mouseover_class: 'brighterbutton-mouseover',    // mouseover class 
     mousedown_class: 'brighterbutton-mousedown',    // mousedown class 
     highlight_class: 'brighterbutton-highlight',    // highlight class 
     highlight_mouseover: 'brighterbutton-highlight-mouseover' // highlight mouseover class 
    }, 
    options || {}); 

    this.each(function() { 
     var self = jQuery(this); 

     self.addClass(options.normal_class); 
     self.width(options.width); 
     self.height(options.height); 

     self.mouseover(function() { 
      self.addClass(options.mouseover_class); 
     }); 

     self.mouseout(function() { 
      self.removeClass(options.mouseover_class); 
      self.removeClass(options.mousedown_class); 
     }); 

     self.mousedown(function() { 
      self.addClass(options.mousedown_class); 
     }); 

     self.mouseup(function() { 
      self.removeClass(options.mousedown_class); 
     }); 
    }); 

    jQuery.fn.highlight = function() { 
     var self = jQuery(this); 
     return self.each(function() { 
      self.addClass(options.highlight_class); 

      self.unbind('mouseover').mouseover(function() { 
       self.addClass(options.highlight_mouseover); 
       self.removeClass(options.highlight_class); 
      }); 

      self.unbind('mouseout').mouseout(function() { 
       self.removeClass(options.mouseover_class); 
       self.removeClass(options.mousedown_class); 
       self.removeClass(options.highlight_mouseover); 
       self.addClass(options.highlight_class); 
      }); 

      self.unbind('mousedown').mousedown(function() { 
       self.removeClass(options.mouseover_class); 
       self.removeClass(options.highlight_mouseover); 
       self.addClass(options.mousedown_class); 
      }); 

      self.unbind('mouseup').mouseup(function() { 
       self.removeClass(options.mousedown_class); 
      }); 

     }); 
    }; 

    return this; 
}; 
})(jQuery); 

Answer 2

我不知道究竟是什麼你想實現 - 你可以在目的doHighlight()將是什麼詳細點嗎？

您可以將$.fn擴展到另一個插件的內部，這樣內部插件只能在使用外部插件時使用。例如，

Working Demo - 添加/編輯的網址看到代碼演示

.brighterbutton { background-color: yellow; } 
.brighterbutton-highlight { background-color: red; } 
.brighterbutton-mouseover { background-color: orange; } 
.brighterbutton-mousedown { background-color: purple; } 

和代碼中使用

CSS顏色

(function($) { 

     $.fn.divbutton = function(options) 
      { 
       // default settings 
       var settings = $.extend(
       { 
        width: '75px',         // button width 
        height: '25px',         // button height 
        normal_class: 'brighterbutton',     // normal state class 
        highlight_class: 'brighterbutton-highlight', // normal state class 
        mouseover_class: 'brighterbutton-mouseover', // mouseover class 
        mousedown_class: 'brighterbutton-mousedown', // mousedown class 
        highlighted: false 
       }, 
       options||{}); 
      this.each(function() 
      { 
       var $this = $(this); 

       $this.addClass(settings.normal_class); 
       $this.width(settings.width); 
       $this.height(settings.height); 

       $this.mouseover(function() { 
        $this.addClass(settings.mouseover_class); 
        $this.doHighlight(); // call inner plugin 
       }); 

       $this.mouseout(function() { 
        $this.removeClass(settings.mouseover_class); 
        $this.removeClass(settings.mousedown_class); 
       }); 

       $this.mousedown(function() { 
        $this.addClass(settings.mousedown_class); 
       }); 

       $this.mouseup(function() { 
        $this.removeClass(settings.mousedown_class); 
       }); 
      }); 

      // inner plugin that can be used only when 
      // divbutton plugin has been used 
      $.fn.doHighlight = function() 
      { 
       $this.addClass(settings.highlight_class); 
      }; 

      return this; 
     }; 

    })(jQuery); 

I don't know whether this is good practice. The inner plugin does have access to the outer plugin's settings object however. 

編輯：

下面是你能處理的一種方式 - 這是評論

(function($) { 
$.fn.divbutton = function(options) 
    { 
     // default settings 
     options = $.extend(
     { 
      // it might be easier to pass an object 
      // to jQuery's css command 
      css: {   width : '75px',    
          height: '25px', 
          'text-align': 'center' 
       },        
      standardClass: 'brighterbutton',    
      saveClass:  'brighterbutton-highlight', 
      overClass:  'brighterbutton-mouseover', 
      downClass:  'brighterbutton-mousedown', 
      saveButton: false 
     }, 
     options||{}); 

     // if a saveButton is wanted, then use the save CSS class 
     // which can still be supplied in the options 
     if(options.saveButton) 
      options.standardClass = options.saveClass; 

    this.each(function() 
    { 
     var $this = $(this); 

     $this.addClass(options.standardClass); 
     $this.css(options.css); 

     $this.mouseover(function() { 
      $this.addClass(options.overClass); 
     }); 

     $this.mouseout(function() { 
      $this.removeClass(options.overClass); 
      $this.removeClass(options.downClass); 
     }); 

     $this.mousedown(function() { 
      $this.addClass(options.downClass); 
     }); 

     $this.mouseup(function() { 
      $this.removeClass(options.downClass); 
     }); 
    }); 
    return this; 
}; 
})(jQuery); 

Working Demo

jQuery代碼

$(function() { 
    $('div.standard').divbutton(); 
    $('div.save').divbutton({ saveButton: true }); 
}); 

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<title>Sandbox</title> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 

<style type="text/css" media="screen"> 

    body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; } 
    .brighterbutton { background-color: yellow; } 
    .brighterbutton-highlight { background-color: red; } 
    .brighterbutton-mouseover { background-color: orange; } 
    .brighterbutton-mousedown { background-color: purple; } 

</style> 
</head> 
    <body> 
    <div style="margin:100px;"> 
     <p>A standard button</p> 
     <div class="standard">Standard</div> 
    </div> 
    <div style="margin:100px;"> 
     <p>A save Button</p> 
     <div class="save">Save</div> 
    </div> 
    </body> 
</html> 

的闡述