Primefaces 条件工具提示
•浏览 1
Primefaces conditional tooltip
<p:spinner id="amount"
min="0"
max="#{bean.availableAmount}"
value="#{bean.amount}" />
<p:tooltip for="amount"
showEvent="focus"
hideEvent="blur"
disabled="#{bean.amount lt bean.maxAmount}"
value="Maximum amount has been reached" /><p:spinner id="amount" min="0" max="#{bean.availableAmount}" value="#{bean.amount}">
<p:ajax oncomplete="myTooltip.hide()" process="@this" />
</p:spinner>
<p:tooltip id="tooltip"
for="amount"
showEvent="focus"
hideEvent="blur"
widgetVar="myTooltip"
value="Maximum amount has been reached" /><p:spinner id="amount" min="0" max="#{bean.availableAmount}" value="#{bean.amount}">
<p:ajax update="tooltip" process="@this" />
</p:spinner>
<p:tooltip id="tooltip"
for="amount"
showEvent="focus"
hideEvent="blur"
rendered="#{bean.amount lt bean.maxAmount}"
value="Maximum amount has been reached" />RequestContext context = RequestContext.getCurrentInstance();
context.execute("hideTooltip();");function hideTooltip() {
$("tooltip").hide();
}
我正在寻找一种方法来实现上面示例中的 disabled 属性之类的东西。换句话说,我想实现一个仅在满足条件时才显示的条件工具提示。有谁知道实现这个的方法吗?
您也可以在客户端使用工具提示的小部件来实现这一点:
<p:spinner id="amount"
min="0"
max="#{bean.availableAmount}"
value="#{bean.amount}" />
<p:tooltip for="amount"
showEvent="focus"
hideEvent="blur"
disabled="#{bean.amount lt bean.maxAmount}"
value="Maximum amount has been reached" /><p:spinner id="amount" min="0" max="#{bean.availableAmount}" value="#{bean.amount}">
<p:ajax oncomplete="myTooltip.hide()" process="@this" />
</p:spinner>
<p:tooltip id="tooltip"
for="amount"
showEvent="focus"
hideEvent="blur"
widgetVar="myTooltip"
value="Maximum amount has been reached" /><p:spinner id="amount" min="0" max="#{bean.availableAmount}" value="#{bean.amount}">
<p:ajax update="tooltip" process="@this" />
</p:spinner>
<p:tooltip id="tooltip"
for="amount"
showEvent="focus"
hideEvent="blur"
rendered="#{bean.amount lt bean.maxAmount}"
value="Maximum amount has been reached" />RequestContext context = RequestContext.getCurrentInstance();
context.execute("hideTooltip();");function hideTooltip() {
$("tooltip").hide();
}
为什么不使用 rendered 而不是 disabled?在这种情况下,您需要在 p:spinner 更改其值时更新 p:tooltip 元素。使用 Primefaces 展示中的 ajax 微调器:
<p:spinner id="amount"
min="0"
max="#{bean.availableAmount}"
value="#{bean.amount}" />
<p:tooltip for="amount"
showEvent="focus"
hideEvent="blur"
disabled="#{bean.amount lt bean.maxAmount}"
value="Maximum amount has been reached" /><p:spinner id="amount" min="0" max="#{bean.availableAmount}" value="#{bean.amount}">
<p:ajax oncomplete="myTooltip.hide()" process="@this" />
</p:spinner>
<p:tooltip id="tooltip"
for="amount"
showEvent="focus"
hideEvent="blur"
widgetVar="myTooltip"
value="Maximum amount has been reached" /><p:spinner id="amount" min="0" max="#{bean.availableAmount}" value="#{bean.amount}">
<p:ajax update="tooltip" process="@this" />
</p:spinner>
<p:tooltip id="tooltip"
for="amount"
showEvent="focus"
hideEvent="blur"
rendered="#{bean.amount lt bean.maxAmount}"
value="Maximum amount has been reached" />RequestContext context = RequestContext.getCurrentInstance();
context.execute("hideTooltip();");function hideTooltip() {
$("tooltip").hide();
}
更新(阅读您的评论后):
如果你想隐藏工具提示,你可以在响应返回浏览器时从服务器端发出命令来执行javascript代码:
<p:spinner id="amount"
min="0"
max="#{bean.availableAmount}"
value="#{bean.amount}" />
<p:tooltip for="amount"
showEvent="focus"
hideEvent="blur"
disabled="#{bean.amount lt bean.maxAmount}"
value="Maximum amount has been reached" /><p:spinner id="amount" min="0" max="#{bean.availableAmount}" value="#{bean.amount}">
<p:ajax oncomplete="myTooltip.hide()" process="@this" />
</p:spinner>
<p:tooltip id="tooltip"
for="amount"
showEvent="focus"
hideEvent="blur"
widgetVar="myTooltip"
value="Maximum amount has been reached" /><p:spinner id="amount" min="0" max="#{bean.availableAmount}" value="#{bean.amount}">
<p:ajax update="tooltip" process="@this" />
</p:spinner>
<p:tooltip id="tooltip"
for="amount"
showEvent="focus"
hideEvent="blur"
rendered="#{bean.amount lt bean.maxAmount}"
value="Maximum amount has been reached" />RequestContext context = RequestContext.getCurrentInstance();
context.execute("hideTooltip();");function hideTooltip() {
$("tooltip").hide();
}
然后在您的 javscript 代码中调用 hideTooltip:
<p:spinner id="amount"
min="0"
max="#{bean.availableAmount}"
value="#{bean.amount}" />
<p:tooltip for="amount"
showEvent="focus"
hideEvent="blur"
disabled="#{bean.amount lt bean.maxAmount}"
value="Maximum amount has been reached" /><p:spinner id="amount" min="0" max="#{bean.availableAmount}" value="#{bean.amount}">
<p:ajax oncomplete="myTooltip.hide()" process="@this" />
</p:spinner>
<p:tooltip id="tooltip"
for="amount"
showEvent="focus"
hideEvent="blur"
widgetVar="myTooltip"
value="Maximum amount has been reached" /><p:spinner id="amount" min="0" max="#{bean.availableAmount}" value="#{bean.amount}">
<p:ajax update="tooltip" process="@this" />
</p:spinner>
<p:tooltip id="tooltip"
for="amount"
showEvent="focus"
hideEvent="blur"
rendered="#{bean.amount lt bean.maxAmount}"
value="Maximum amount has been reached" />RequestContext context = RequestContext.getCurrentInstance();
context.execute("hideTooltip();");function hideTooltip() {
$("tooltip").hide();
}