本文介绍了jQuery 1.6的Textfill吗? (不工作)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我希望你能启发我.我正在尝试在具有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 [email protected]
* @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吗? (不工作)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!