Question

我正在尝试将悬停功能添加到jQuery小部件中。这就是我所拥有的，但它不起作用。我错过了什么？我希望做的是将标题扩展为长标题

我把它放在jsfiddle中 http://jsfiddle.net/7JHXt/

(function ($) {

$.widget('nt.textline', {
    options: {
        title: { short: 'XXX', long: 'XXXXXXXXXXXX'},
        text: 'Some text'
    },

    widgetEventPrefix: 'textline:',

    _create: function () {
        this.element.addClass('textline');

        // chart container
        this._container = $('<div class="textline-container"></div>')
            .appendTo(this.element);

        this._setOptions({
            title: this.options.title,
            text: this.options.text
        });
    },

    _destroy: function () {
        this.element.removeClass('textline');
        this.element.empty();
        this._super();
    },

    _setOption: function (key, value) {
        var self = this,
            prev = this.options[key],
            fnMap = {
                'title': function () {
                    createTitle(value, self);
                },
                'text': function () {
                    createText(value, self);
                }
            };

        // base
        this._super(key, value);

        if (key in fnMap) {
            fnMap[key]();

            // Fire event
            this._triggerOptionChanged(key, prev, value);
        }
    },

    _triggerOptionChanged: function (optionKey, previousValue, currentValue) {
        this._trigger('setOption', {type: 'setOption'}, {
            option: optionKey,
            previous: previousValue,
            current: currentValue
        });
    },

    _hoverable: function () {
        alert('here')
        e.css({"background-color":"red"});
    }
});

function createTitle(title, widget) {

    // Clear existing
    widget._container.find('.title').remove();

    var t = $('<div class="title"></div>')
        .text(title.short);

    widget._container.append(t);

}

function createText(text, widget) {

    // Clear existing
    widget._container.find('.text').remove();

    var t = $('<div class="text"></div>')
        .text(text);

    widget._container.append(t);

}

})(jQuery);
$('.textline').textline({});

Answer 1

SEE THIS WORKING FIDDLE

您甚至不需要担心_hoverable属性，只需使用_hover。

基本上，在_create方法中添加这个以指定事件：

        this._on(this.element,
        {
            mouseenter:"_hover",
            mouseleave:"_hover"
        });

然后为在widget对象中任何位置创建方法的预定义事件设置事件处理程序，该对象也包含该_create方法。

    _hover: function (e) {
        var title = $(this.element).find('.title');

        if(e.type == "mouseenter")
        {
             title.text(this.options.title.long);     
        }

        if(e.type == "mouseleave")
        {
            title.text(this.options.title.short);
        }

    }

这是一个很棒的教程 HERE ，它向您展示如何使用jquery ui小部件工厂执行许多其他操作。

将自定义悬停功能添加到jquery小部件

1 个答案: