如何在 Primefaces 中使用 'position: sticky' 的 Growl？
How to use Growl with 'position: sticky' in Primefaces?
我正在尝试通过 .ui-growl class 更改 primefaces 的 p:growl 位置以使用 position: sticky。但是，由于组件是在 body 中最后呈现的，所以该位置的 relative 行为并不像我希望的那样工作。
有什么方法可以使用这个组件的sticky位置吗？
或者有什么方法可以让组件在声明的地方渲染？
PrimeFaces 5.1；
莫哈拉 2.1；
免责声明：我在 PF 7.0 showcase 上尝试过，但我认为基础知识也适用于 5.1 版本。
您实际上有 4 个选项。后三个都需要您检查 javascript source of the component (which is open, so you can ALWAYS inspect it before asking questions, the java source 在这里无关紧要），对于第一个解决方案，它有助于了解组件的工作方式，但使用浏览器开发人员工具进行检查就足够了（我就是这样做的）。
看或不看源码的基本分析
这是您的 的一个变体“或者让组件在声明的地方呈现的某种方式？”。由于在客户端，它都是普通的 html、css 和 javascript，您可以使用客户端可用的所有工具进行操作。
你可以看到 grow 的主要部分是 html 在声明的地方进行技术渲染。查看 PrimeFaces 展示柜，您会看到
<span id="j_idt700:growl" class="ui-growl-pl" data-widget="widget_j_idt700_growl" data-summary="data-summary" data-detail="data-detail" data-severity="all,error" data-redisplay="true"></span>
就在表单内部，它也在 xhtml 中。 javascript of the component 创建客户端 dom 东西，其中包括您在正文末尾之前看到的容器（来自展示）
<div id="j_idt700:growl_container" class="ui-growl ui-widget" style="z-index: 1002;"></div>
最后一块 html 是在需要渲染时添加个别咆哮的地方，因此在大多数正常情况下使组件行为正确但需要在您的情况下以不同方式完成的部分案例.
解决方案 1，纯客户端组件不可知解决方案
实际上，这就像在 dom 中移动 html 这块一样简单，参见 How to move an element into another element?。
在在线展示中，我将以下 jquery 代码放入浏览器开发人员工具控制台
$("#j_idt700\:growl_container").prependTo(".layout-content");
并添加了以下内容css
position: sticky;
top: 10px;
float: right; // this is needed in the showcase, might not always be needed
它奏效了。
jquery 应该放在页面的某处，它在组件 javascript 执行后运行，因此最好在正文结束之前执行此操作。
请记住，j_idt700 前缀是展示窗体中表单的动态 ID（此处没有固定 ID），但您也可以根据 类 或其他任何内容使用不同的选择器）
解决方案 2，更改源 'locally'
在javascript source中，可以看到容器在技术上渲染的位置
render: function() {
//create container
this.jq = $('<div id="' + this.id + '_container" class="ui-growl ui-widget"></div>');
this.jq.appendTo($(document.body));
//render messages
this.show(this.cfg.msgs);
},
以某种方式更改 this.jq.appendTo($(document.body)); 以将其附加到当前 html 节点（'this'？）也会使其工作。关于重写，你有两个选择
- How do I find and/or override JavaScript in Primefaces component based on widgetVar?
解决方案 3 更改源服务器端
实际上你完成了#2 的第一部分，但修补了源代码并创建了一个新的自定义 PrimeFaces 版本
解决方案 4 让其他人也可以使用此功能
这里可以做的是在组件上创建一个新属性并在某些地方修补源代码，这样就可以配置组件的行为就像现在一样或粘性（他们改变了现有的'sticky' 属性到 7.0.x 中的 'keepAlive' 所以粘性再次可用 ;-))。当然这应该作为补丁提交然后...
我正在尝试通过 .ui-growl class 更改 primefaces 的 p:growl 位置以使用 position: sticky。但是，由于组件是在 body 中最后呈现的，所以该位置的 relative 行为并不像我希望的那样工作。
有什么方法可以使用这个组件的sticky位置吗？
或者有什么方法可以让组件在声明的地方渲染？
PrimeFaces 5.1； 莫哈拉 2.1；
免责声明：我在 PF 7.0 showcase 上尝试过，但我认为基础知识也适用于 5.1 版本。
您实际上有 4 个选项。后三个都需要您检查 javascript source of the component (which is open, so you can ALWAYS inspect it before asking questions, the java source 在这里无关紧要），对于第一个解决方案，它有助于了解组件的工作方式，但使用浏览器开发人员工具进行检查就足够了（我就是这样做的）。
看或不看源码的基本分析
这是您的 的一个变体“或者让组件在声明的地方呈现的某种方式？”。由于在客户端，它都是普通的 html、css 和 javascript，您可以使用客户端可用的所有工具进行操作。
你可以看到 grow 的主要部分是 html 在声明的地方进行技术渲染。查看 PrimeFaces 展示柜，您会看到
<span id="j_idt700:growl" class="ui-growl-pl" data-widget="widget_j_idt700_growl" data-summary="data-summary" data-detail="data-detail" data-severity="all,error" data-redisplay="true"></span>
就在表单内部，它也在 xhtml 中。 javascript of the component 创建客户端 dom 东西，其中包括您在正文末尾之前看到的容器（来自展示）
<div id="j_idt700:growl_container" class="ui-growl ui-widget" style="z-index: 1002;"></div>
最后一块 html 是在需要渲染时添加个别咆哮的地方，因此在大多数正常情况下使组件行为正确但需要在您的情况下以不同方式完成的部分案例.
解决方案 1，纯客户端组件不可知解决方案
实际上，这就像在 dom 中移动 html 这块一样简单，参见 How to move an element into another element?。
在在线展示中，我将以下 jquery 代码放入浏览器开发人员工具控制台
$("#j_idt700\:growl_container").prependTo(".layout-content");
并添加了以下内容css
position: sticky;
top: 10px;
float: right; // this is needed in the showcase, might not always be needed
它奏效了。
jquery 应该放在页面的某处，它在组件 javascript 执行后运行，因此最好在正文结束之前执行此操作。
请记住，j_idt700 前缀是展示窗体中表单的动态 ID（此处没有固定 ID），但您也可以根据 类 或其他任何内容使用不同的选择器）
解决方案 2，更改源 'locally'
在javascript source中，可以看到容器在技术上渲染的位置
render: function() {
//create container
this.jq = $('<div id="' + this.id + '_container" class="ui-growl ui-widget"></div>');
this.jq.appendTo($(document.body));
//render messages
this.show(this.cfg.msgs);
},
以某种方式更改 this.jq.appendTo($(document.body)); 以将其附加到当前 html 节点（'this'？）也会使其工作。关于重写，你有两个选择
- How do I find and/or override JavaScript in Primefaces component based on widgetVar?
解决方案 3 更改源服务器端
实际上你完成了#2 的第一部分，但修补了源代码并创建了一个新的自定义 PrimeFaces 版本
解决方案 4 让其他人也可以使用此功能
这里可以做的是在组件上创建一个新属性并在某些地方修补源代码，这样就可以配置组件的行为就像现在一样或粘性（他们改变了现有的'sticky' 属性到 7.0.x 中的 'keepAlive' 所以粘性再次可用 ;-))。当然这应该作为补丁提交然后...