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

我不确定你想要达到的目的是什么 - 你能详细说明doHighlight()的目的是什么吗？

您可以在另一个插件中扩展$.fn，这样内部插件只能在使用外部插件时使用。例如，

Working Demo - 将 / edit 添加到网址以查看代码

演示中使用的CSS颜色

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

和代码

    (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>

Answer 2

感谢大家的帮助，我已经设法做了我开始做的事情，即有一个“可突出显示”的按钮，其中所有的外观都通过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);