jQuery UI 与 jQuery 模板的位置

发布于 2024-11-08 07:33:37 字数 1116 浏览 0 评论 0原文

我正在尝试在表中的 tr 下方渲染一个 div，我正在使用 jQuery 模板填充该表。我正在尝试使用 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 只定位在表格的底部，而不是该行下方。可能的原因是什么。

原文

I am trying to render a div just below the tr in the table which i am populating with jQuery templates. I am trying to position the div with jQuery UI position. Here is my code

My Template

    <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>

Template Rendering Code

    <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>

My Div to be rendered

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

However my div is only getting positioned at the bottom of the table and not below the row. What could be the possible reason.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

铜锣湾横着走 2024-11-15 07:33:37

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

最后，使用 UI Position 移动 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>

You have several problems here. First of all, you're using the "of" property in jQuery UI position improperly. It is meant to specify the element to position against, which in this case would be the TR. Secondly, you cannot put a DIV below a TR, this is invalid HTML. Thirdly, you should call your function positionDiv with an event handler, not in the javascript attribute, although this is more of a style issue.

Finally, the general methodology of using UI Position to move the DIV around is overcomplicated. Without knowing what your eexact goal is, it seems easier to just use DOM insertion to copy the DIV and put it where you want (in this, inside the TD but below the link). Try something like:

<!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>

回复收藏 0 原文

~没有更多了~