单击 MenuItem 而不单击文本答案

【问题标题】：Clicking on MenuItem without clicking on the text单击 MenuItem 而不单击文本
【发布时间】：2011-05-19 18:03:42
【问题描述】：

我有一个菜单，如果你们知道我的意思，我想点击菜单，但不是点击文本。 MenuItem 有一个边框，或者类似的东西，但是当我点击它时，它不会重定向到我想要的页面，除非我点击文本。

是否可以点击整个“按钮”并重定向或做需要做的事情？

我的菜单是这样的：

<rich:dropDownMenu showDelay="250" hideDelay="0" submitMode="none">
        <f:facet name="label">Tools</f:facet>

        <rich:menuItem>
            <s:link view="/pages/tools/ppaParameters/PpaParametersEdit.xhtml" value="Parameters" id="PpaParametersId" includePageParams="false" propagation="none"/>
        </rich:menuItem>

        <rich:menuGroup value="Security">
            <rich:menuItem>
                <s:link view="/pages/tools/security/ppaModule/PpaModuleEdit.xhtml" value="Module" id="PpaModuleId" includePageParams="false" propagation="none" />
            </rich:menuItem>
        </rich:menuGroup>
</rich:dropDownMenu>

有一个例子。我需要点击文本才能解决问题。

【问题讨论】：

当您编辑 .doc 文件时，您会看到一个包含“文件”、“编辑”、“查看”、“帮助”等的菜单。当您单击它时，您有一些选项，但您不必单击文本“保存”来保存文档，您可以单击按钮上的任意位置选择保存按钮，无论如何它都会保存。还是不明白？

标签： jsf richfaces seam

【解决方案1】：

使用以下方式设置菜单项的样式：

display:block;

例如，对于使用h:link 的rich:menuItem（而不是s:link，但应该适用相同的想法）：

<rich:menuItem immediate="true">
    <h:link value="System" outcome="menu-01" id="menu-01" styleClass="menu-item-link" />
</rich:menuItem>

在 CSS 中，更改菜单项标签类 (.rf-ddm-itm-lbl)：

/* Allow clicking anywhere on a menu item, not just the text. */
.rf-ddm-itm-lbl {
    display: block;
}

/* Style the menu to taste. */    
a.menu-item-link {
    color: #333333 !important;
    text-decoration: none !important;
    display: block !important;
}

/* Remove space for icons. */
.rf-ddm-emptyIcon, .rf-ddm-emptyIcon {
    display: none;
}

注意display: block; 的两个实例。

【讨论】：

【解决方案2】：

它并不完美，但可以工作。你可以使用这样的东西：

 <rich:menuItem onclick="location.href='url'">
     <h:outputText value="Link 2" />
 </rich:menuItem>

这将允许您单击菜单项内的任何位置。

url - 您必须自己输入并添加 s:link 添加的所有请求参数。例如： http://server/app/page.seam?cid=XX&propogate=xx...

如果需要对话ID，可以使用：<s:conversationId>

希望这会有所帮助...

【讨论】：

一个问题，我们正在使用 s:link，因为当我使用 menuItem 时它无法正常工作。你知道我可以做些什么来解决它仍然使用 s:link 吗？跨度>
不，我从未在菜单项中使用过 s:link。 s:link 呈现一个 GET 响应，作为一种解决方法，只需自己组合该响应字符串。
我不知道 s:link，但我使用了 a4j:commandLink 并且工作正常。

【解决方案3】：

要么给文本 css 选择器与其父级相同的高度和宽度。或者给按钮你给文本的行为。

【讨论】：