为什么这个XBL示例不起作用?

时间:2010-09-10 19:26:14

标签: css xml xul xbl

此示例来自this Mozilla's page

main.xul

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="main.css" type="text/css"?>

<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

    <box id="num" class="labeledbutton" title="Number of Things:" value="52"/>

    <button label="Show" oncommand="document.getElementById('num').showTitle(true)"/>
    <button label="Hide" oncommand="document.getElementById('num').showTitle(false)"/>
</window>

的main.css

box.okcancelbuttons {
    -moz-binding: url('main.xml#labeledbutton');
}

main.xml中

<?xml version="1.0"?>
<binding id="labeledbutton">
  <content>
    <xul:label xbl:inherits="value=title"/>
    <xul:label xbl:inherits="value"/>
  </content>
  <implementation>
    <method name="showTitle">
      <parameter name="state"/>
      <body>
        if (state) document.getAnonymousNodes(this)[0].
          setAttribute("style","visibility: visible");
        else document.getAnonymousNodes(this)[0].
          setAttribute("style","visibility: collapse");
      </body>
    </method>
  </implementation>
</binding>

单击按钮时为什么没有显示框?

2 个答案:

答案 0 :(得分:5)

试一试

<强> XUL(main.xul)

<box id="num" class="labeledbutton" title="Number of Things:" value="52"/>

<button label="Show" oncommand="document.getElementById('num').showTitle(true)"/>
<button label="Hide" oncommand="document.getElementById('num').showTitle(false)"/>

<强> CSS(的main.css)

box.okcancelbuttons {
    -moz-binding: url('main.xbl#labeledbutton');
}

<强> XBL(main.xbl)

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl"
          xmlns:xbl="http://www.mozilla.org/xbl"
          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 <binding id="labeledbutton">
  <content>
    <xul:label xbl:inherits="value=title"/>
    <xul:label xbl:inherits="value"/>
  </content>
  <implementation>
    <method name="showTitle">
      <parameter name="state"/>
      <body>
        if (state) document.getAnonymousNodes(this)[0].
          setAttribute("style","visibility: visible");
        else document.getAnonymousNodes(this)[0].
          setAttribute("style","visibility: collapse");
      </body>
    </method>
  </implementation>
 </binding>
</bindings>

答案 1 :(得分:4)

有一些问题:

首先在main.css中定义一个类okcancelbuttons但是在main.xul中你引用了一个labeledbutton类。该类可以与绑定一样调用。

其次main.xml只是无效的xml(最简单的验证方法是在firefox中加载它并且它会吐出错误)。 它为您使用的每个命名空间都需要xmlns个属性。在这种情况下,“主”命名空间,xbl和xul。它们应该在<bindings>元素周围缺少的<binding>元素中定义。

它最终会像这样:

<强> main.xml中

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl"
          xmlns:xbl="http://www.mozilla.org/xbl"
          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 <binding id="labeledbutton">
  <content>
    <xul:label xbl:inherits="value=title"/>
    <xul:label xbl:inherits="value"/>
  </content>
  <implementation>
    <method name="showTitle">
      <parameter name="state"/>
      <body>
        if (state) document.getAnonymousNodes(this)[0].
          setAttribute("style","visibility: visible");
        else document.getAnonymousNodes(this)[0].
          setAttribute("style","visibility: collapse");
      </body>
    </method>
  </implementation>
 </binding>
</bindings>