Question

尝试学习一点XUL但有点卡住了。建立一个非常基本的专辑列表开始。

所以说我有这个盒子 - 歌曲列表开始隐藏但是我想在点击主albuminfo框时显示它。

<box align="left" class="album"  id="test" orient="vertical">
    <box class="albumInfo" ><description value="Album 1" class="albumName"/><label class="albumArtist" value="Album artist 1"/></box>
    <box><label value="Year of release"/><label value="Genre"/></box>

    <listbox align="left" class="songlist" collapsed="true">
        <listitem label="Song 1"/>
        <listitem label="Song 2"/>
        <listitem label="Song 3"/>
        <listitem label="Song 3"/>
        <listitem label="Song 5"/>
    </listbox>
</box>

单击整个albuminfo框区域时，如何触发Javascript命令？我可以使用一个按钮，但我真的想让整个盒子区域可以点击。

Answer 1

你可以在XUL中做很多事。您只需按一个按钮就可以通过简单的方式进行操作，在这里：

    <?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<box align="left" class="album"  id="test" orient="vertical">
    <box class="albumInfo" ><description value="Album 1" class="albumName"/>
<label class="albumArtist" value="Album artist 1"/>
</box>
    <box><label value="Year of release"/><label value="Genre"/></box>

    <listbox align="left" class="songlist" collapsed="true" id="listBox" >
        <listitem label="Song 1"/>
        <listitem label="Song 2"/>
        <listitem label="Song 3"/>
        <listitem label="Song 3"/>
        <listitem label="Song 5"/>
    </listbox>
</box>
<row><button label="Album Info" oncommand="Open();"/> </row>

<script type="application/x-javascript">
<![CDATA[
   function Open()
{
document.getElementById('listBox').setAttribute("collapsed", "false");

}

]]>
</script>

</window>

当您点击该按钮时，您将收到您的相册信息!!!

如果没有，您可以使用此选项，当您点击框中的任意位置时，列表框将会打开，稍微更改一下。

<box align="left" class="album"  id="test" orient="vertical" onclick="OpenInfo()">

function OpenInfo()
{
alert('hi');
document.getElementById('listBox').setAttribute("collapsed", "false");

}

您可以通过多种方式操作列表。如需更多参考，请查看以下链接：https://developer.mozilla.org/en/XUL_Tutorial/Manipulating_Lists

Answer 2

用户可以通过多种方式触发XUL中的command事件。例如：使用鼠标单击元素，当焦点位于元素上时，按下默认热键（空格或输入作为按钮），单击元素的标签，按元素或元素标签的访问键。根据您的问题的声音，您实际上只对鼠标点击元素本身感兴趣，并且您不需要command事件提供的所有其他可访问性。这意味着您只需听取click事件：

<box class="albumInfo" onclick="...">

例如，如果单击该元素，则可以触发现有的<command>元素：

<box class="albumInfo" onclick="document.getElementById('album-info-command').doCommand();">

如何在XUL中点击<box>的整个区域？</box>

2 个答案: