獲取組件的座標

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庫集成，因此具有用於執行此類事情的組件。