我有一个要求，在我的 JSF 页面中会有一个 commandButton，点击那个 commandButton 它将触发一个 action 方法，该方法将执行一些逻辑，并且根据该逻辑的结果，我将不得不显示一个带有两个 commandButton 的弹出窗口在上面。我不能使用 JSF 的任何实现（如 RichFaces、IceFaces），我只需要使用 JSF 2 和 JQuery 来实现这一点。是否可以？任何想法或想法都会对我很有帮助。哦另一件事我需要在几个页面中添加按钮和相同的逻辑。我曾尝试使用 SimepleModal 插件，但没有成功想出一个聪明的方法。
这是一个完整的工作示例
我曾经display:none隐藏h:panelGroup对话框容器，因为 .dialog 函数将使其在需要时可见
您还可以隐藏真正的 jsf 命令按钮并通过带有 jquery # 选择器的对话框按钮访问它，并像我在 js 文件中所做的那样调用它的 .click。
最后一件事，用于onclick="initDialog(); return false;"调用对话框 js 函数并添加 return false 以便命令按钮不会尝试导航...
通过使用 jQuery UI 对话框，您将获得对对话框的最大灵活性/控制。
该示例由 2 个文件（一个 .xhtml 和一个 .js）组成，
我使用了 jQuery 和 jQueryUI ，根本不需要任何其他插件
索引.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<f:view>
<h:head>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script language="javascript" src="scripts.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
</h:head>
<h:body>
<h:panelGroup id="idOfDialogPlaceHolder" style="display:none">
<h:form prependId="false">
<h:outputText value="Some Text"></h:outputText>
<h:commandButton id="justAButton" onclick="alert('wow')" style="display:none"></h:commandButton>
</h:form>
</h:panelGroup>
<h:form prependId="false">
<h:commandButton id="dialogClickBtn" value="Click to display dialog" onclick="initDialog(); return false;"></h:commandButton>
</h:form>
</h:body>
</f:view>
</html>
和scripts.js
function initDialog() {
$("#idOfDialogPlaceHolder").dialog({
modal: true,
buttons: {
SomeButton: function () {
$("#justAButton").click();
},
Close: function () {
$(this).dialog("close");
}
},
});
}
就是这样