XUL获取选择的MENUITEM的值

Question

我在XUL中创建了一个下拉列表：

<button id="bid" oncommand="alert(event.target.nodeName)" >
    <menupopup>
              <menuitem label="one" value="one" />  
              <menuitem label="two" value="two" />
              <menuitem label="three" value="three" />
    </menupopup>
</button>

我想提醒正在点击的nodeitem的值。使用event.target.nodeName将nodeName作为menuitem但nodeValue使用button重新定义，因为它开始占用$(this).val()节点的值。如何获取单击菜单项的值。我也试过了$(this).attr('value')，但即便如此也未定义。使用var start_time = new Date().getTime(); jQuery.get('your-url', data, function(data, status, xhr) { var request_time = new Date().getTime() - start_time; } ); 也没有帮助。我可以把命令用于menuitem，但这似乎不是真正的解决方案。这是获得价值的唯一途径还是某种方法？

Answer 1

您在问题中的XUL代码无法使用。要么您应该使用<menulist>而不是<button>，要么<button>需要使用属性type="menu"或type="menu-button"。如果您打算使用不带<button>属性的type="menu"，您实际上必须在<button>的命令事件处理程序中打开popup，然后从那里选择。这似乎不是你想要的。然而，这是非常可行的。我在我的一个附加组件中使用了类似的结构，除非我单击其中一个<label>项时打开它。这允许在窗口中为多个不同的项重复使用单个<menupopup>。在这种情况下，<menupopup>是一个相当大的XUL代码，我不想重复并在窗口的XUL中维护多个重复项。

所选value的{​​{1}}：

您的实际问题是如何获取用户选择的<menuitem> value。下面的所有代码都经过测试和运行。从代码中可以看出，您可以从<menuitem>获取您选择的value <menuitem>（{1}}。

使用event.target.value元素：

最常用的元素是<menulist>。当您让用户从多个选项中选择一个将被记住并稍后使用的选项，或者用于调整用户界面中显示的内容时，通常会使用此选项。它通常不会用于从多个立即行动中选择（这些行动被采取行动并且选择不被记住）。 <menulist>是MDN上<menuitem>和<menupopup>的示例中使用的内容。

<menulist>

上面的代码会在您点击它时为您提供一个带有<menulist id="bid2" oncommand="alert(event.target.value)" > <menupopup> <menuitem label="one" value="one" /> <menuitem label="two" value="two" /> <menuitem label="three" value="three" /> </menupopup> </menulist> 条目选项的按钮。它将alert具有您选择的<menuitem>的值。

这将产生一个看起来像的项目：

您可以单击以打开下拉列表：

如果选择项目：

您将收到提醒：

然后对象将显示您的选择：

使用<menuitem>元素：

也可以使用指定了属性<button>或<button>的{​​{1}}元素。然而，这不向用户提供关于当前选择哪个选项的视觉反馈。 [注意：您的JavaScript可以手动更改type="menu" type="menu-button"属性以提供此反馈。]如果是生成立即操作的按钮而不是记住的选择，则可以使用此类型的元素。

代码：

<button>

这将产生一个看起来像的项目：

您可以单击以打开下拉列表：

如果选择项目：

您将收到提醒：

然后，对象将 NOT 显示您的选择：

如果您想设置label的标签以反映用户所做的选择，您可以使用：

<button type="menu" id="bid2" label="A Button" oncommand="alert(event.target.value)">
    <menupopup>
              <menuitem label="one" value="one" /> 
              <menuitem label="two" value="two" />
              <menuitem label="three" value="three" />
    </menupopup>
</button>

选择<button>时，会产生如下按钮：

使用<button type="menu" id="bid2" label="A Button" oncommand="event.target.parentElement.parentElement.label=event.target.value;alert(event.target.value)"> <menupopup> <menuitem label="one" value="one" /> <menuitem label="two" value="two" /> <menuitem label="three" value="three" /> </menupopup> </button> ：

您也可以使用three。

如果没有徘徊，这样做会是这样的：

悬停时：

打开选择时：

UI设计中的选择：

在设计用户界面时，您必须做出许多选择。有许多不同的方法可以获得相同的有效结果，外观和感觉有所不同。你真的应该自己尝试这些类型的选项。在XUL原型设计时，您可能会发现XULRunner程序XUL Explorer是有用的。

在我看来，选择UI元素和外观是超出了stackoverflow问题的范围。虽然您可能无法获得特定的XUL帮助，但您可以在User Experience stack exchange处询问UI设计问题。