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在另一个插件内部扩展,这样内部插件只能在使用外部插件时使用.例如,

工作演示 - 添加 /编辑 URL以查看代码

演示中使用的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);

工作演示

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>