Question

如何在onclick事件后获取JSF组件的坐标？我需要在点击的图标下方放置一个叠加层。

JSF是否提供了这样的内置工具，而不是为此手动编写javascript函数？

Answer 1

不，没有。该位置取决于浏览器（客户端）。在客户端，也完全没有JSF的手段，它只是简单的HTML / CSS / JS。该位置只能从HTML DOM元素中提取。您必须将它从JS传递给JSF，或者在JS中完全完成业务工作而不是JSF。

正如PrimeFaces附带jQuery一样，检索相对于文档的元素位置的最佳方法是使用jQuery.offset()。

var $element = jQuery('#someid');
var offset = $element.offset();
var x = offset.left;
var y = offset.top;
// ...

Answer 2

除了BalusC的答案之外，这里有一个例子，点击带有id=placeholder的组件（可能是链接或按钮）将在触发组件的正下方打开另一个组件（id=menu）。如果鼠标远离触发组件，菜单将消失：

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery("#placeholder").click(function(event) {
    //get the position of the placeholder element
    var pos = jQuery(this).offset();
    var height = jQuery(this).height();
    //show the menu directly below the placeholder
    jQuery("#menu").css( { "left": pos.left + "px", "top": (pos.top + height) + "px" } );
    jQuery("#menu").show();
  });
  // hide the menu on mouseout
  jQuery("#placeholder").mouseout(function(event) {
    jQuery("#menu").hide();
  });
});
</script>

id=menu的组件可以是div或jsf h:panelGroup或任何其他组件。带有style的{{1}}属性最初会隐藏组件：

display: none

确保jQuery id选择器获取组件的正确id。例如。如果你的元素在<h:panelGroup style="position: absolute; display: none;" id="menu">  </h:panelGroup>的表单中，那么jQuery调用必须看起来像这样：

id=form1

注意双反斜杠。

Answer 3

我建议使用像RichFaces或IceFaces这样的JSF组件库。其中许多都具有AJAX功能和JavaScript库集成，因此具有用于执行此类操作的组件。

获取组件的坐标

3 个答案: