I currently am trying to append multiple widgets to a container.
$( "#addbutton" ).click( function() {
newid++;
$("#designspace").append($("<div></div>").mywigdet({id:newid,top:100,left:100,width:100,height:100,color:"blue",text:"Hello"}));
});
with this way I need to create a div and then add the widget into that div. The widget itself does the following in the _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
});
...
while it works this creates one container inside another.
But because I have relative positioning code in my widget this method prevents it from working as the blank container DIVs position is the parent.
I can move the position stuff into the container DIV but this would take away some of the flexibility of using widgets.
Is there a better way to accomplish adding multiple widgets to one container, without creating sub-containers?
I haven't really played with jquery-widgets before. I think your problem is:
this._container = $('<div class="label-container" id="' + newid +'" style="position:relative; border:1px solid black;"></div>').appendTo(this.element);
Rather modify this.element itself by using:
$(this.element).attr('id',newid);
$(this.element).addClass('label-container');
...
Edit: I'd recommend replacing the style attribute with another css class.