向容器添加多个jquery小部件

Question

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

$( "#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，但这会带走一些使用小部件的灵活性。

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

Answer 1

我以前没有真正使用过jquery-widgets。我认为你的问题是:

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

修改这个。元素本身使用:

$(this.element).attr('id',newid);
$(this.element).addClass('label-container');
...   

编辑:我建议用另一个css类替换style属性。

JQuery CSS

最好选择用addClass 替代JQuery