JQuery UI position 유틸리티

JQuery UI dialog, menu 등의 팝업을 특정 위치에 오픈되도록 하는 방법

1. 마우스의 위치에 따라 결정되게 하는 방법
 - 마우스 좌표를 저장한 후 position 값에 x, y 를 준다.

var x = null;
var y = null;
$(document).ready(function() {
    $(document).mousemove(function (e) {
        x = e.clientX; y = e.clientY;
    });     
    $('#id').dialog({position: [x, y]});
});


2. 특정 개체의 위치에 의해 결정되게 하는 방법

$(document).ready(function() {
    $('#id').dialog({
        position: {
            my : 'left top',
            at : 'right top',
            of : '#id2'
        }
    });
});
 
my : dialog 의 위치 (#id)
at : 위치할 개체의 위치 (#id2)
of : 위치할 개체

위의 설정은 dialog 의 왼쪽 위 모서리를 #id2 개체의 오른쪽 위 모서리에 위치하겠다는 설정임.
단 JQuery UI 의 Position 유틸리티가 설치되어야 한다.

http://jqueryui.com/demos/position/  

Position 유틸리티의 좌표계는 아래 이미지를 참고