jquery 위젯에 사용자 정의 호버 기능 추가

호버 기능을 jQuery 위젯에 추가하려고합니다. 이것은 내가 가진 것이지만 작동하지 않습니다. 나는 무엇을 놓쳤는가? 내가 뭘 바라고하는 것은 내가 당신도 여기에 _hoverable 특성에 대해 걱정할 필요가 없습니다 jsfiddle http://jsfiddle.net/7JHXt/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

에 넣어

긴 제목에 제목을 확장하다 _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); 
     } 

    }

어떻게 JQuery와 UI 위젯 팩토리에 다른 물건을 많이 수행하는 방법을 보여줍니다 좋은 튜토리얼 HERE Theres는.

출처

2013-08-23 15:13:14 Rooster

jquery 위젯에 사용자 정의 호버 기능 추가

답변

관련 문제