Плагин Jquery Vtip, работающий с динамически создаваемыми данными - PullRequest
Новая
       12

Плагин Jquery Vtip, работающий с динамически создаваемыми данными

0 голосов
/ 25 июня 2010

Я использую плагин Vtip, чтобы показывать значения заголовков во всплывающей подсказке.Все работает отлично, за исключением того, когда я пытаюсь использовать плагин для отображения всплывающих подсказок на динамически создаваемых данных.Я обычно обхожу это с помощью функции live ().Как я могу реализовать функцию live () для их кода ??? 

  this.vtip=function(){this.xOffset=-10;this.yOffset=10;$(".vtip").unbind().hover(function(a{this.t=this.title;this.title="";
    this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);$("body").append('<p id="vtip"><img id="vtipArrow" />'+this.t+"</p>");
    $("p#vtip #vtipArrow").attr("src","images/vtip_arrow.png");
    $("p#vtip").css("top",this.top+"px").css("left",this.left+"px").fadeIn("slow")},function(){this.title=this.t;
    $("p#vtip").fadeOut("slow").remove()}).mousemove(function(a){this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);
    $("p#vtip").css("top",this.top+"px").css("left",this.left+"px")})};
    jQuery(document).ready(function(a){vtip()});

Ответы [ 2 ]

2 голосов
/ 11 февраля 2011

Я переписал функцию vtip как плагин jQuery, чтобы он был цепным, чтобы разрешать пользовательские настройки и работать с живыми элементами. Он использует отображение событий, поэтому он будет работать с jQuery 1.4.3 и выше. Наслаждайтесь. 

(function ($) {
$.fn.vtip = function (options) {

    var settings = {
        xOffset: -10,
        yOffset: 6,
        arrow: '/images/vtip_arrow.png'
    };
    if (options) $.extend(settings, options);

    return this.live({
        mouseenter: function (a) {
            this.t = this.title;
            this.title = "";
            this.top = (a.pageY + settings.yOffset);
            this.left = (a.pageX + settings.xOffset);
            $("body").append('<p id="vtip"><img id="vtipArrow" />' + this.t + "</p>");
            $("p#vtip #vtipArrow").attr("src", settings.arrow);
            $("p#vtip").css("top", this.top + "px").css("left", this.left + "px").fadeIn("fast");
        },
        mouseleave: function (a) {
            this.title = this.t;
            $("p#vtip").fadeOut("fast").remove();
        },
        mousemove: function (a) {
            this.top = (a.pageY + settings.yOffset);
            this.left = (a.pageX + settings.xOffset);
            $("p#vtip").css("top", this.top + "px").css("left", this.left + "px");
        }
    });
};
})(jQuery);

// You can use it with any class, I'm using the class 'vtip' below.
$(document).ready(function(){
    $('.vtip').vtip();
});

// If necessary, add custom settings like so:
$('.vtip').vtip({xOffset:-10,yOffset:10,arrow:'/images/customArrow.png'});
1 голос
/ 25 июня 2010

Не проверено, но должно работать (требуется jQuery 1.4.x): 

this.vtip = function () {
  this.xOffset = -10;
  this.yOffset = 10;
  $('body').undelegate().delegate('.vTip', 'mouseenter mouseleave mousemove', function(e){
console.log(e.type)
    if(e.type==='mouseover'){

        this.t = this.title;
      this.title = "";
      this.top = (e.pageY + yOffset);
      this.left = (e.pageX + xOffset);
      $("body").append('<p id="vtip"><img id="vtipArrow" />' + this.t + "</p>");
      $("p#vtip #vtipArrow").attr("src", "images/vtip_arrow.png");
      $("p#vtip").css("top", this.top + "px").css("left", this.left + "px").fadeIn("slow")
    }
    if(e.type==='mouseout'){
        this.title = this.t;
      $("p#vtip").fadeOut("slow").remove()
    }
    if(e.type==='mousemove'){
        this.top = (e.pageY + yOffset);
      this.left = (e.pageX + xOffset);
      $("p#vtip").css("top", this.top + "px").css("left", this.left + "px")
    }
  });
}();

EDIT Хорошо, теперь должно работать!Извините за это.

...