使用jquery和qtip的firefox扩展

时间:2014-01-14 13:51:29

标签: jquery firefox qtip

我刚刚在stackoverflow上找到了this一篇很棒的帖子,它解释了如何在firefox扩展中使用jquery,这对我来说也很有用。但我必须做更多的事情,因为我需要做一个工具提示。为此,我还包括了qtip2库:

<script type="application/x-javascript" src="chrome://extension/content/jquery-2.0.3.min.js"></script>
<script type="application/x-javascript" src="chrome://extension/content/jquery.qtip.min.js"></script>
<script type="application/x-javascript" src="example.js"></script>

我的example.js现在看起来像这样:

(function() {
jQuery.noConflict();
$ = function(selector,context) { 
    return new jQuery.fn.init(selector,context||example.doc); 
};
$.fn = $.prototype = jQuery.fn;

example = new function(){};
example.log = function() { 
    Firebug.Console.logFormatted(arguments,null,"log"); 
};
example.run = function(doc,aEvent) {
     // Check for website
    if (!doc.location.href.match(/^http:\/\/(.*\.)?stackoverflow\.com(\/.*)?$/i))  
        return;

    // Check if already loaded
    if (doc.getElementById("plugin-example")) return;

    // Setup
    this.win = aEvent.target.defaultView.wrappedJSObject;
    this.doc = doc;

    // Hello World
    this.main = main = $('<div id="plugin-example">').appendTo(doc.body).html('Example Loaded!');
    main.css({ 
        background:'#FFF',color:'#000',position:'absolute',top:0,left:0,padding:8
    });
    main.html(main.html() + ' - jQuery <b>' + $.fn.jquery + '</b>');


    //This is the part I added in addition to the post from stackoverflow:
    $('a').qtip({ // Grab some elements to apply the tooltip to
        content: {
            text: 'My common piece of text here'
        }
       });
};

// Bind Plugin
var delay = function(aEvent) { 
    var doc = aEvent.originalTarget; setTimeout(function() { 
        example.run(doc,aEvent); 
    }, 1); 
 };
var load = function() { 
    gBrowser.addEventListener("DOMContentLoaded", delay, true); 
};
window.addEventListener("pageshow", load, false);

})();

所以基本上我刚刚在stackoverflow上添加了帖子:

    $('a').qtip({ // Grab some elements to apply the tooltip to
        content: {
            text: 'My common piece of text here'
        }
       });

但遗憾的是,页面上的链接没有带有该更改的工具提示。 请注意,stackoverflow上的初始帖子的功能对我有用(我在stackoverflow.com上得到“示例已加载”消息)。

我做错了什么?

1 个答案:

答案 0 :(得分:0)

所以我告诉了一个更简单,更优雅的方法来解决firefox插件中的工具提示问题:https://developer.mozilla.org/en-US/docs/XUL/panel