Получение координат компонента - PullRequest
Новая
       7

Получение координат компонента

2 голосов
/ 03 июля 2011

Как получить координаты компонента JSF после события onclick?Мне нужно разместить оверлей чуть ниже значка, по которому щелкнули.

Есть ли такая встроенная возможность, предоставляемая JSF, вместо того, чтобы вручную писать для этого функцию javascript?

Ответы [ 3 ]

5 голосов
/ 03 июля 2011

Нет, нет.Позиция зависит от браузера (клиента).На стороне клиента также нет абсолютно никаких средств 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;
// ...
3 голосов
/ 03 июля 2011

В дополнение к ответу 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=form1, вызов jQuery должен выглядеть примерно так: 

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

Обратите внимание на двойной обратный слеш.

0 голосов
/ 03 июля 2011

Я бы рекомендовал использовать библиотеку компонентов JSF, такую ​​как RichFaces или IceFaces. Многие из них имеют возможности AJAX и интеграцию библиотек JavaScript, и поэтому имеют компоненты для выполнения подобных задач.

...