jQuery 1.6的Textfill吗? (不工作) [英] Textfill for jQuery 1.6? (not working)

问题描述

我希望你能启发我.我正在尝试在具有jQuery 1.6.1(模板使用它)的joomla网站中使用GeekMonkey的textfill插件.插件无法正常工作.有没有什么办法解决这一问题?我在那里找不到其他文本填充！

I hope you can enlighten me. I'm trying to use GeekMonkey's textfill plugin in a joomla website which has jQuery 1.6.1 (the template uses it). The plugin is not working. Is there any way to fix this? I can't find any other textfill out there!

这是GeekMonkey的插件:

This is GeekMonkey's plugin:

; (function($) {
    /**
    * Resizes an inner element's font so that the inner element completely fills the outer element.
    * @author Russ Painter [e-mail]
    * @version 0.1
    * @param {Object} Options which are maxFontPixels (default=40), innerTag (default='span')
    * @return All outer elements processed
    * @example <div class='mybigdiv filltext'><span>My Text To Resize</span></div>
    */
    $.fn.textfill = function(options) {
        var defaults = {
            maxFontPixels: 40,
            innerTag: 'span'
        };
        var Opts = jQuery.extend(defaults, options);
        return this.each(function() {
            var fontSize = Opts.maxFontPixels;
            var ourText = $(Opts.innerTag + ':visible:first', this);
            var maxHeight = $(this).height();
            var maxWidth = $(this).width();
            var textHeight;
            var textWidth;
            do {
                ourText.css('font-size', fontSize);
                textHeight = ourText.height();
                textWidth = ourText.width();
                fontSize = fontSize - 1;
            } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
        });
    };
})(jQuery);

$(document).ready(function() {
    $('.jtextfill').textfill({ maxFontPixels: 36, innerTag: 'h1' });
});

还有

$(document).ready(function() {
            $('.jtextfill').textfill({ maxFontPixels: 70 });

            $('#dyntext').keyup(function() {
                $('.dyntextval').html(this.value);
                $('.jtextfill').textfill({ maxFontPixels: 70 });
            });
        });

预先感谢， 绝望的用户.-

Thanks in advance, desperate user.-

推荐答案

要使该插件正常工作，您需要

For that plugin to work you need to

• 设置容器的(.jtextfill)宽度和高度
• 内联显示内部标签(在CSS中为display:inline).

• set the container's (.jtextfill) width and height
• display the inner tag inline (display:inline in the CSS).

演示: http://jsfiddle.net/2btyN/

这篇关于jQuery 1.6的Textfill吗? (不工作)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！