將自定義懸停功能添加到jQuery小部件

我試圖將懸停功能添加到jQuery小部件。這是我的，但它不起作用。我錯過了什麼？我所希望做的是擴大標題的長標題將自定義懸停功能添加到jQuery小部件

(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({});

來源

2013-08-23 KeepCalmAndCarryOn

你不能只是粘貼你的所有代碼，並期望我們找出它的錯誤，解釋你想要完成的事情，告訴我們它是如何失敗的，你是否在瀏覽器的控制檯中發現錯誤？如果你給我們提供一個例子來測試代碼，那麼它總是更可取的，在[jsfiddle]（http://jsfiddle.net）也許是 –

是一個好主意。我在上面 – KeepCalmAndCarryOn

SEE THIS WORKING FIDDLE

你甚至都不需要在這裏擔心_hoverable財產，你可以使用_hover。爲您在創建方法中還包含_create控件對象的任何地方設置預先定義的事件

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

，然後設置事件處理程序：

基本上，添加這個您_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的小部件的工廠。

來源

2013-08-23 15:13:14 Rooster

將自定義懸停功能添加到jQuery小部件

回答

相關問題