объекты с абсолютным позиционированием, добавленные с помощью jQuery, неправильно позиционируются! - PullRequest
Новая
       44

объекты с абсолютным позиционированием, добавленные с помощью jQuery, неправильно позиционируются!

0 голосов
/ 01 декабря 2009

Я динамически добавляю несколько li s в неупорядоченный список, используя jQuery. Они позиционируются абсолютно (используя параметр style для каждого li), но когда они добавляются на страницу, они не находятся в правильных положениях, даже если я проверяю их с помощью Firebug или инспектора элементов Chrome, значения верны.

Также обратите внимание, что li s использует перетаскиваемые и изменяемые классы jQuery.

Вы можете увидеть это здесь: http://bit.ly/5HfegZ

Это скрипт, который добавляет li s на страницу (из XML-файла) 

 //load saved board  
      var savedBoard = getParameterByName("open");
      if (savedBoard != ""){

       $.ajax({
                  type: "GET",
                  url: "saved/" + savedBoard + ".xml",
                  dataType: "xml",
                  success: function(xml) {

                      $(xml).find('item').each(function() {
                          var openTag = $(this).find('openTag').text();
                      openTag = openTag.replace(/%3C/g, "<");
                      openTag = openTag.replace(/%2F/g, "/");
                      openTag = openTag.replace(/%3E/g, ">");
                          var media = $(this).find('media').text();
                      media = media.replace(/%3C/g, "<");
                      media = media.replace(/%2F/g, "/");
                      media = media.replace(/%3E/g, ">");

                          $('#other').append(openTag + "<div class='inners'>" + media + "</div><div class='boxMenu'><img class='star' src='img/gold_star.gif' alt='Favorite' /><img class='delete' src='img/minus.gif' alt='Delete'/><p></p></div></li>");
                          $("li", "#other").draggable();
                          $("li", "#other").resizable({ transparent: true, handles: 'all' });
                          menustuff();
                          checkColour();
                      });

                  }
              });

      }

HTML: 

<ul id="other" class="ui-widget-header">

XML: 

<item n="0"> 
<openTag>%3Cli runat='server' title='0' class='ui-widget-content' style='z-index:16;width:250px;height:150px;top:187 px;left:135px;'%3E</openTag> 
<media>%3Cimg class="imaged" src="http:%2F%2Fimages.websnapr.com%2F?size=s&amp;key=bOJhv6ljQ0aq&amp;url=http:%2F%2Fwww.cancerpartnersuk.org" alt=""&gt;</media>

1 Ответ

0 голосов
/ 13 декабря 2009

Хорошо, я обнаружил, что он отображается правильно, потому что класс jQuery ui.resizable был position: relative; Я просто установил его на position: absolute;, и все снова стало хорошо.

...