是否可以使用jQuery来操作XUL元素？

Question

我知道可以在Firefox插件中集成jQuery,但是我们能够操纵(动画,移动,调整透明度等)XUL元素本身吗？

根据我的理解,Firefox插件可以使用jQuery来操作HTML/DOM元素,但不确定XUL元素.

Answer 1

简短回答:是的

答案很长:

我亲自试验过它.我只能以有限的方式使用它.可以操纵XUL元件.但是我很难观察事件,因为我对jQuery很新 - 我不知道如何调整它以观察Firefox/XUL级别的事件 - 我甚至不知道是否需要调整:D

例:

overlay.xul

<?xml version="1.0"?>    
<?xml-stylesheet href="chrome://testaddon/content/overlay.css" type="text/css"?>

<overlay id="testaddon_overlay"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        xmlns:html="http://www.w3.org/1999/xhtml">

    <script type="application/x-javascript" src="chrome://testaddon/content/jquery-1.4.2.js" />
    <script type="application/x-javascript" src="chrome://testaddon/content/overlay.js" />

    <toolbox id="navigator-toolbox">
        <toolbar toolbarname="TestAddonToolbar" class="chromeclass-toolbar">
            <toolbaritem>
                <toolbarbutton id="btnHide" label="HideMe" onclick="hideMe();" />
            </toolbaritem>            
        </toolbar>
    </toolbox>

</overlay>

overlay.js中

function hideMe()
{
    $('#btnHide').hide();
}

当你点击它时,上面的代码将隐藏按钮 - 使用jQuery进行基本的XUL操作!

但正如我所说,尝试观察文档加载和其他此类事件,并且它很快变得复杂(或者我不太了解:D).

更新:我尝试了一些效果.Effects.fadeIn()有效 - 但由于透明属性在XUL中与HTML相比设置不同,因此按钮保持在那里,最后,它突然消失.现在越来越清楚我们能够(不能)使用jQuery来操纵XUL.

Answer 2

XUL和HTML实际上以完全相同的方式处理不透明度,并且jQuery错误地检测了浏览器可以执行的操作.当jQuery生活在XUL中时,jQuery认为它位于不同的浏览器中,因此不透明效果的处理方式不同 - 通过jQuery.因为它在Firefox中,并且它应该正常处理不透明度,你可以像这样覆盖它:

jQuery.support.opacity = true

在加载jQuery之后立即执行此操作.

可能有一大类类似的修补程序可以后期应用于jQuery以使其表现更好,但我还没有考虑过它.

Answer 3

我最近自己也在想这个.显然DHTML没有意义,但传言基本的语法糖和事情都有效.

• 来自jQuery组的XUL讨论中有这个jQuery,表明它加载了一些例外.
• 另请参阅这篇稍微更新的关于XUL中jQuery和DHTML的博客文章.那个人正在追踪XUL中的HTML,这不是你需要的,但他确实有很好的信息.