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-widget。我认为你的问题是：

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');
...

编辑：我建议将style属性替换为另一个css类。

JQuery CSS

JQuery addClass

将多个jquery小部件附加到容器

1 个答案: