2011-07-05 4 views
0

Как правильно позиционировать dialog координаты , определяемые переменными javascript?Позиционирование диалога в позиции, определяемой переменными javascript

Моя попытка: -

Я пытался сделать это с помощью Javascript себя, но я не смог установить позицию через следующий код:

 var dialog_x=300; 
     var dialog_y=500; 

     var s = document.getElementById("dialogId"); 
     s.style.position = "relative"; 
     s.style.left = dialog_x + "px"; 
     s.style.top = dialog_y + "px"; 

Обратите внимание, что это dialogId является то, что я определил в ИО атрибут диалога. Поскольку я узнал, что идентификатор родительского контейнера также добавлен к этому id, я также попытался использовать результирующий идентификатор (после добавления), но он не работает.

Edit:

Я понял, что контейнер диалога (который содержит заголовок и содержание диалога), который я ожидал быть присвоен идентификатор, который я определил через атрибут идентификатора в диалоговом окне компонента не назначен любой идентификатор, из-за которого я не мог получить доступ к диалоговому окну. Я все еще не могу понять, как мне следует искать этот элемент, если ему не присвоен какой-либо идентификатор. Определенный мной идентификатор был проиндексирован для контейнера содержимого диалога внутри основного диалогового контейнера.

+0

Возможно, это относится к относительной 's.style.position =" relative "; 'вы можете попробовать установить абсолютное значение,' s.style.position = "absolute"; '? –

+0

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

+1

Похоже, у вас есть более основные проблемы. Если вы не загрузили и не установили плагин Firebug для Firefox, я настоятельно рекомендую вам это сделать. С его помощью вы сможете искать элементы на DOM и находить фактический идентификатор диалогового окна. –

ответ

2

Используя jQuery, вы можете вызвать метод javascript, который отрегулирует позиционирование диалогового окна при отображении диалога.

<h:form prependId="false"> 
     <p:commandButton value="Select Location" oncomplete="TreeDialog.show()" id="selectLocationButton"></p:commandButton> 
    </h:form> 
    <p:dialog header="Select the location" id="treeDialog" 
      widgetVar="TreeDialog" 
      modal="true" onShow="adjustPositionning($('#selectLocationButton'), $('#treeDialog'))" width="450"> 
     <p:tree value="#{myController.root}" var="node" dynamic="true" cache="true"> 
     <p:treeNode> 
      <h:outputText value="#{node.name}" /> 
     </p:treeNode> 
     </p:tree> 
    </p:dialog> 

<script type="text/javascript"> 
function adjustPositionning(sourceElement, dialog) { 
    var x = sourceElement.offset().left; 
    var y = sourceElement.offset().top; 
    var width = sourceElement.width(); 
    var padding = 15; 
    dialog.parent().offset({ top: y, left: x + width + padding }); 
} 
</script> 
Смежные вопросы