使用jQuery插件動態創建的HTML

，所以我想用這個jQuery插件，堆棧溢出已經提供給我:)使用jQuery插件動態創建的HTML

Auto-size dynamic text to fill fixed size container

不過，我需要使用這是一個HTML元素動態創建服務器端。例如，

創建的所有元素，將它們轉換爲HTML，然後返回它們爲JSON串基本上（在HTML形式）的陣列，以前端：

public JsonResult GetMessages() 
{ 
    // do conversion work 
    List<string> htmlMessages = new List<string>(); 
    foreach(Message message in this.messages) 
    { 
     htmlMessages.Add(message.toHTML()); 
    } 
    return Json(htmlMessages); 
}

然後在正面最後我附上他們的div jQuery中是這樣的：

// make my AJAX call 
// in the success method I do this 
for (var i = 0; i < data.length; i++) 
{ 
    $('#containerDiv').append(data[i]); 
}

現在這工作正常，但我怎麼會那麼調用jQuery插件上的每個多數民衆贊成追加到divs在一個內格式化文本大小，這些元素元素？

來源

2011-06-17 slandau

我不知道什麼HTML本身看起來像，但嘗試這樣的事：

// snip... 
var $container = $('#containerDiv'); 
for (var i = 0; i < data.length; i++) 
{ 
    $container.append(data[i]); 
} 
$container.children('div').textfill({ maxFontPixels: 36 });

它看起來像插件依賴包含單個<span>元素的元素，所以你HTML可能必須相應地構建。同樣基於wee little test，看起來插件在包含多個元素的jQuery集合上調用時無法正常工作。簡單的解決辦法：

$container.children('div').each(function() 
{ 
    $(this).textfill({ maxFontPixels: 36 }); 
});

「正道」是真正改變這個插件，雖然：

;(function($) { 
    $.fn.textfill = function(options) { 
     var fontSize = options.maxFontPixels; 
     this.each(function() { 
      var $this = $(this), 
       ourText = $this.find('span:visible:first'), 
       maxHeight = $this.height(), 
       maxWidth = $this.width(), 
       textHeight, 
       textWidth; 
      do { 
       ourText.css('font-size', fontSize); 
       textHeight = ourText.height(); 
       textWidth = ourText.width(); 
       fontSize = fontSize - 1; 
      } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3); 
     }); 
     return this; 
    } 
})(jQuery);

所以你改變插件，會調用它的每一個跨度它在容器div中找到？

不完全。我只是改變意味着你可以更換

$container.children('div').each(function() 
{ 
    $(this).textfill({ maxFontPixels: 36 }); 
});

與

$container.children('div').textfill({ maxFontPixels: 36 });

來源

2011-06-17 14:53:10

嗯，這是一個好主意。所以在容器被完全填滿之後，運行所有孩子上的插件。這可能只是工作。 – slandau

所以你改變的插件，它會在它在容器div中找到的每一個跨度上調用它嗎？ – slandau

不完全 - 請參閱我的編輯。 –

當動態添加dom元素時，可以使用.load（）事件添加插件。 http://api.jquery.com/load-event/

// make my AJAX call 
// in the success method I do this 
for (var i = 0; i < data.length; i++) 
{ 
var elem = data[i]; 
elem.load(function(){ 
// Plugin here. 
}); 

    $('#containerDiv').append(elem); 
}

來源

2011-06-17 14:51:25 Phil

但我不想附加一個事件，我只是想運行插件，它只是在文本進入DOM時重新格式化。 – slandau

好的，它們.load（）應該可以工作。一旦該元素被附加並呈現給DOM，它就會觸發。 – Phil

加載也可能會起作用，並且會是一個事件，我不必擔心何時調用它。我會先試試這個，謝謝。 – slandau

這聽起來像它可能是livequery工作，它允許你當一個元素是動態運行的函數添加到DOM。

來源

2011-06-17 15:11:26 Town

使用jQuery插件動態創建的HTML

回答

相關問題