jQuery UI position with jQuery templates
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 开发者_Go百科positioned at the bottom of the table and not below the row. What could be the possible reason.
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>
加载中,请稍侯......
精彩评论