jquery - 使用 JQuery 插件动态创建 HTML

Question

所以我想使用 Stack Overflow 提供给我的这个 JQuery 插件 :)

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);
}

然后在前端我将它们附加到 Jquery 中的 div 中，如下所示:

// 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 之一的文本大小？

Answer 1

我不知道 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);

---

So your changed plugin, will that call it on every single span it finds in the container div?

不完全是。我的更改只是意味着您可以替换

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

与

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