0

我目前正在尝试将多个小部件附加到容器中。

$( "#addbutton" ).click( function() {  
    newid++;
    $("#designspace").append($("<div></div>").mywigdet({id:newid,top:100,left:100,width:100,height:100,color:"blue",text:"Hello"}));        
});

通过这种方式，我需要创建一个 div，然后将小部件添加到该 div 中。小部件本身在 _create 中执行以下操作

 ...
 this._container = $('<div class="label-container" id="' + newid +'" style="position:relative; border:1px solid black;"></div>').appendTo(this.element);
 this._setOptions({
      'top': this.options.top,
      'left': this.options.left,
      'width': this.options.width,
      'height': this.options.height,
      'color': this.options.color,
      'text': this.options.text
 });
 ...

虽然它起作用，但它会在另一个容器中创建一个容器。

但是因为我的小部件中有相对定位代码，所以这个方法阻止它工作，因为空白容器 DIV 的位置是父级。

我可以将位置内容移动到容器 DIV 中，但这会带走使用小部件的一些灵活性。

有没有更好的方法来完成向一个容器添加多个小部件而不创建子容器？

4

1 回答 1

1

我以前没有真正玩过 jquery-widgets。我认为你的问题是：

this._container = $('<div class="label-container" id="' + newid +'" style="position:relative; border:1px solid black;"></div>').appendTo(this.element);

而是使用以下方法修改 this.element 本身：

$(this.element).attr('id',newid);

$(this.element).addClass('label-container');
...

编辑：我建议用另一个 CSS 类替换样式属性。

jQuery CSS

jQuery addClass

于 2013-03-12T03:50:10.130 回答