Положение jQuery UI с шаблонами jQuery - PullRequest
Новая
       32

Положение jQuery UI с шаблонами jQuery

1 голос
/ 20 мая 2011

Я пытаюсь визуализировать div чуть ниже tr в таблице, которую я заполняю шаблонами jQuery. Я пытаюсь расположить div с позицией jQuery UI. Вот мой код

Мой шаблон 

    <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 располагается только в нижней части таблицы, а не под строкой. Что может быть возможной причиной.

1 Ответ

0 голосов
/ 27 мая 2011

У вас есть несколько проблем здесь. Прежде всего, вы неправильно используете свойство "of" в позиции пользовательского интерфейса jQuery. Предполагается указать элемент для позиционирования, который в этом случае будет 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>
...