获取组件的坐标

Question

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

有没有这样的JSF提供的内置设施，而不是手动编写一个JavaScript函数呢？

Answer 1

除了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属性与display: none最初将隐藏的组件：

<h:panelGroup style="position: absolute; display: none;" id="menu"> 
    <!-- content here -->     
</h:panelGroup> 

确保jQuery的id选择获取该组件的正确的ID。例如。如果你的元素是一个形式里面有id=form1，jQuery的呼叫必须是这个样子：

jQuery("#form1\\:placeholder").click(function(event) 

注意双反斜线。

Answer 2

不，没有。位置依赖于浏览器（客户端）。在客户端也完全没有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 3

我推荐使用像RichFaces或IceFaces这样的JSF组件库。它们中的许多都具有AJAX功能和JavaScript库集成，因此具有用于执行此类事情的组件。