jQuery - 功能设置

Question

我目前在调整此工具提示插件时遇到问题。

(function($) {
    $.fn.toolTip = function() {
        $(this).hover(function () {
            tip = $('.userRank');
            tip.show();
        }, function () {
            tip.delay(2000).fadeOut('fast');
        }).mousemove(function(e) {
            var mousex = e.pageX - 32;
            var mousey = e.pageY - 86; 
            var tipWidth = tip.width();
            var tipHeight = tip.height();
            var tipVisX = $(window).width() - (mousex + tipWidth);
            var tipVisY = $(window).height() - (mousey + tipHeight);
            if (tipVisX < 20) { 
                mousex = e.pageX - tipWidth - 20;
            } 
            if (tipVisY < 20) { 
                mousey = e.pageY - tipHeight - 55;
            }
            tip.css({  top: mousey, left: mousex }).stop();
        });
    };
})(jQuery);

如您所见，我已经通过tip变量定义了tip容器或元素

tip = $('.userRank');

我是否可以通过设置或选项选择元素，使其看起来像这样。

$('.bidInput').toolTip('#socialIcons');

或

$('.bidInput').toolTip({tip : '#socialIcons'});

Answer 1

这样的东西可能适合你:

// very simplified
(function($) {
    $.fn.toolTip = function(options) {
        var settings = $.extend({
            'tip': '#defaultTip'
        }, options);

        alert(settings.tip); // for testing
        var tip = $(settings.tip);

        // the rest of your code
    };
})(jQuery);

$('.bidInput').toolTip({ tip: '#socialIcons' });

所以，如果你尝试这样调用它:

$('.bidInput').toolTip();

然后您会注意到将使用“#defaultTip”。

<小时/>

编辑

此外，我创建了一个 jsFiddle for you here .