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 に答える