带有 jQuery 模板的 jQuery UI 位置答案

【问题标题】：jQuery UI position with jQuery templates带有 jQuery 模板的 jQuery UI 位置
【发布时间】：2011-08-29 09:57:15
【问题描述】：

我正在尝试在使用 jQuery 模板填充的表中的 tr 下方呈现一个 div。我正在尝试使用 jQuery UI 位置定位 div。这是我的代码

我的模板

    <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

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

但是，我的 div 仅位于表格的底部，而不是位于行的下方。可能的原因是什么。

【问题讨论】：

标签： jquery jquery-ui positioning jquery-templates

【解决方案1】：

这里有几个问题。首先，您在 jQuery UI 位置不正确地使用了“of”属性。它旨在指定要定位的元素，在本例中为 TR。其次，您不能将 DIV 放在 TR 下面，这是无效的 HTML。第三，您应该使用事件处理程序调用您的函数 positionDiv，而不是在 javascript 属性中，尽管这更多的是样式问题。

最后，使用 UI 位置移动 DIV 的一般方法过于复杂。在不知道您的确切目标是什么的情况下，使用 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>

【讨论】：