jQuery UI位置与jQuery模板

我想呈现一个div下方的表格，我用jQuery模板填充tr。我想用jQuery UI位置来定位div。这里是我的代码jQuery UI位置与jQuery模板

我的模板

<table id="MyTable"> 
     <tr><td>Name</td></tr> 
    </table> 
    <script type="text/x-jQuery-tmpl" id="myTmpl"> 
    <tr id='${Id}'><td><a href='javascript:positionDiv("${Id}");'>${Name}</a></td></tr> 
    </script>

模板渲染代码

<script type="text/javascript"> 
    $(function(){ 
     $('#myTmpl').tmpl(data).appendTo('#MyTable'); 
    });  

    function positionDiv(dvId) { 
     var $dv = $('#myDiv'); 
     var $tr = $('#MyTable').find('tr:nth-child(' + dvId + ')'); 
     $tr.position({ 
      my: "left bottom", 
      at: "left top", 
      of: $dv.show(); 
     }); 
    } 
    </script>

我的事业部将被渲染

<div style="width:100px;height:100px;display:none" id="myDiv">This is my div</div>

然而，我的div只是位于表格的底部而不在行的下方。可能的原因是什么？

来源

2011-05-20 Ashish

这里有几个问题。首先，您在jQuery UI位置中使用“of”属性的方式不正确。它的意思是指定要对抗的元素，在这种情况下将是TR。其次，你不能把一个DIV放在TR下面，这是无效的HTML。第三，你应该使用事件处理函数调用你的函数positionDiv，而不是在javascript属性中，尽管这更像是一个样式问题。

最后，使用UI位置移动DIV的一般方法过于复杂。在不知道你的eexact目标是什么的情况下，使用DOM插入复制DIV并将其放在你想要的位置（在TD中，但在链接下面）似乎更容易。尝试类似：

<!DOCTYPE html> 
<html> 
<head> 
<title>test</title> 
<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script> 
<script src="js/jquery-ui-1.8.11.custom.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(function(){ 
     $(".position").click (function() { 
      var dv = $('#myDiv').clone(); 
      $(this).after(dv); 
      dv.show();   
     }); 
    }); 
</script> 
</head> 

<body> 
<div style="display:none;" id="myDiv">This is my div</div> 
<table id="MyTable"> 
    <tr> 
     <td>Name</td> 
    </tr> 
    <tr id="my1"> 
     <td><a href="#" class="position">John Doe</a></td> 
    </tr> 
</table> 
</body> 
</html>

来源

2011-05-27 02:15:01

jQuery UI位置与jQuery模板

回答

相关问题