0

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?

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

編集： style属性を別のcssクラスに置き換えることをお勧めします。

JQuery CSS

JQuery addClass

于 2013-03-12T03:50:10.130 に答える