获取组件的坐标 [英] Getting the co-ordinates of a component

问题描述

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

How to get the co-ordinates of a JSF component after onclick event ? I need to place an overlay just below an icon that was clicked.

JSF是否提供了任何此类内置功能，而不是为此手动编写javascript函数?

Is there any such in-built facility provided by JSF rather than manually writing a javascript function for that ?

推荐答案

除了BalusC的答案外，还有一个示例，其中单击具有id=placeholder的组件(可能是链接或按钮)将打开另一个组件( id=menu)直接在触发组件下方.如果将鼠标从触发组件上移开，菜单将消失:

In addition to BalusC's answer, here is an example, where a click on a component with id=placeholder (maybe a link or button) will open another component (id=menu) directly below the triggering component. If the mouse is moved away from the triggering component, the menu will disappear:

<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或任何其他组件.带有display: none的style属性将首先隐藏该组件:

The component with id=menu can be a div or a jsf h:panelGroup or any other component. The style attribute with display: none will initially hide the component:

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

确保jQuery ID选择器获取组件的正确ID.例如.如果您的元素位于带有id=form1的表单内，则jQuery调用必须看起来像这样:

Make sure that the jQuery id selector gets the correct id of the component. E.g. if your elements are inside a form with id=form1, the jQuery call has to look something like this:

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

注意双反斜杠.

这篇关于获取组件的坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！