將多個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本身：

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

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

編輯：我建議你用另一個CSS類替換樣式屬性。

JQuery CSS

JQuery addClass