如何定位jQuery UI對話框

Question

http://jsfiddle.net/Qt7pQ/5/

上述鏈接是我正在做的一個樣本。

我的問題是我如何使jQuery UI對話框下的單選按鈕？

<div id="rbl_1"><input type="radio" group="one" id="r1" value="Milk"> Milk</div> 
<div id="rbl_2"><input type="radio" group="one" id="r2" value="Butter" checked> Butter</div> 

<div id="divid0" style="border:1px;">0</div> 
<div id="divid1">1</div> 
<div id="divid2">2</div> 

$('#divid0').dialog({ 
      autoOpen: false, 
     }); 

     $('#divid1').dialog({ 
      autoOpen: false, 
     }); 

     $('#divid2').dialog({ 
      autoOpen: false, 
     });   

     $('#rbl_0 :radio').hover(

     function() { 
      $('#divid0').dialog('open'); 
     }, function() { 
      $('#divid0').dialog('close'); 
     }); 


     $('#rbl_1 :radio').hover(

     function() { 
      $('#divid1').dialog('open'); 
     }, function() { 
      $('#divid1').dialog('close'); 
     }); 


     $('#rbl_2 :radio').hover(

     function() { 
      $('#divid2').dialog('open'); 
     }, function() { 
      $('#divid2').dialog('close'); 
     }); 

Answer 1

您可以使用jQuery UI的位置工具來做到這一點：http://jqueryui.com/demos/position/

例如，在「中心底」的<div id="rbl_1"><input type="radio" group="one" id="r1" value="Milk"> Milk</div>你會做這個職位你<div id="divid0" style="border:1px;">0</div>對話框的「中心頂部」 ：

$('#divid0').position({ my: 'center top', at: 'center bottom', of: '#rbl_1' });