2

我正在尝试将悬停功能添加到 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({});
4

1 回答 1

3

看到这个工作小提琴

你甚至不需要担心这里的 _hoverable 属性，你可以使用 _hover。

基本上，将其添加到您的 _create 方法中以指定事件：

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

然后为您在 create 方法中设置的预定义事件设置事件处理程序，该事件处理程序位于还包含该 _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);
        }

    }

这里有一个很棒的教程，向您展示了如何使用 jquery ui 小部件工厂做很多其他的事情。

于 2013-08-23T15:13:14.233 回答